大きな画面でゲームをもっと見せる

ドット絵のゲームは、640x360 のような解像度を決めてウィンドウいっぱいに拡大するのが普通です。1440p のモニターではピクセルが大きくなるだけで、見える範囲はノートパソコンと変わりません。@debuffjp/core 0.19 で追加する scale: "pixel" はその逆で、論理単位の大きさを CSS ピクセルで固定し、ゲームの論理サイズのほうをウィンドウに合わせて広げます。ピクセルはくっきりしたまま、ワールドがもっと見えます。

const game = new Game({ canvas, width: 640, height: 360, pixelArt: true, scale: "pixel", pixelSize: 3 });

ウィンドウ（CSS ピクセル）	integer（640x360）	pixel、pixelSize: 3
1920x1080	640x360 を 3 倍	640x360 を 3 倍
2560x1440	640x360 を 4 倍	853x480 を 3 倍
1366x768	640x360 を 2 倍	683x384 を 2 倍

この数値はコアのテスト（packages/core/test/game.test.ts）と、そのテストが確かめているリサイズ処理から出しています。

サイズの決まり方

1. 論理単位 1 つが pixelSize CSS ピクセルになります。2 倍のディスプレイでもくっきり見えるよう、デバイスピクセルの整数倍にそろえます。
2. 論理サイズはコンテナをその大きさで割った値なので、大きなウィンドウやフルスクリーンほど単位が増えます。
3. width と height は最小サイズです。ウィンドウが小さくて pixelSize では収まらないときは、integer と同じようにデバイスピクセル単位で縮小します。

サイズが変わる前提でレイアウトする

game.width と game.height はリサイズで変わるので、定数に焼き込まず毎フレーム読みます。HUD のバー、ミニマップ、タッチ用スティックのように端に貼り付けるものは、この値から位置を決め直します。

game.hooks.resize((w, h) => {
  hud.y = h - 30;
  minimap.x = w - 72;
});

もう1つのレスポンシブなモードが、以前からある expand です。fit のスケールを保ったまま余った方向だけを広げるので、どの画面でも同じ大きさで見せたいゲーム向けです。pixel は見える範囲が広いこと自体に意味があるゲーム、たとえば穴掘りやストラテジーのマップ、広いワールドのゲームに向いています。

できないこと

ゲームバランスまでは調整しません。マップを広く見られることで有利になるなら、game.width と game.height に上限を設けるか、カメラを制限してください。

0.19 が公開されたら、npm create debuff@latest のあとsrc/main.ts で scale: "pixel" を指定し、ウィンドウの大きさを変えて試してみてください。