# Show more of the game on big screens

Pixel-art games usually pick a resolution, say 640x360, and scale it up to fill the window. On a 1440p monitor that means each pixel gets bigger and the player sees exactly as much as on a laptop. `@debuffjp/core` 0.19 adds `scale: "pixel"`, which does the opposite: every logical unit stays a fixed number of CSS pixels, and the game's logical size grows with the window. Same crisp pixels, more of the world.

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

| Window (CSS pixels) | `integer` at 640x360 | `pixel`, `pixelSize: 3` |
| --- | --- | --- |
| 1920x1080 | 640x360 at 3x | 640x360 at 3x |
| 2560x1440 | 640x360 at 4x | 853x480 at 3x |
| 1366x768 | 640x360 at 2x | 683x384 at 2x |

These sizes come from the core test suite (`packages/core/test/game.test.ts`) and the resize code they exercise.

## How it sizes

1. Each logical unit is `pixelSize` CSS pixels, snapped to whole device pixels so a 2x display stays crisp.
2. The logical size is the container divided by that, so a bigger window or a fullscreen monitor gets more units.
3. `width` and `height` are the minimum. If the window is too small to fit them at `pixelSize`, the scale drops by whole device pixels instead, like `integer`.

## Laying out for a size that changes

`game.width` and `game.height` now change on resize, so read them each frame rather than baking in constants. Anything pinned to an edge (a HUD bar, a minimap, a touch stick) re-anchors from them:

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

`expand` (added earlier) is the other responsive mode: it keeps `fit`'s scale and grows only along the spare axis, which suits a game that should look the same size on every screen. `pixel` suits games where seeing more is the point: diggers, strategy maps, anything with a big world.

## What this doesn't do

It doesn't change gameplay balance for you. If seeing more of the map is an advantage, cap `game.width` and `game.height` yourself, or clamp the camera.

Try it once 0.19 is out: `npm create debuff@latest`, then set `scale: "pixel"` in `src/main.ts` and resize the window.