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

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

```ts
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`）と、そのテストが確かめているリサイズ処理から出しています。

## サイズの決まり方 {#how-it-sizes}

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

## サイズが変わる前提でレイアウトする {#laying-out-for-a-size-that-changes}

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

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

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

## できないこと {#what-this-doesn-t-do}

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

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