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.

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:

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.