adminandClaude Opus 5.5
1665576fb9
A camera that follows smoothly stands between pixels most of the time, and pixel art then wanders between them. The new camera switch draws what the camera shows on the game view's own grid, while positions in the model keep their fractions. - `Pixel perfect` is a camera row, off by default. It works at every fixed game scale and at Auto, but not at Fit and not in the Scene tab, where one works with the fractions. - The grid has one step per device pixel of a world unit. At 100% that is whole units, at 500% fifths. The view carries it (`View.grid`), so no view draws with the grid of another. - The view looks from a point that puts the world's origin on a whole device pixel (`lookFrom`). This also covers odd camera sizes and views that cut the picture to an odd size. - Sprites, texts and tilemaps snap their top left corner when they are unturned, so an odd size lands on whole pixels too. A turned object snaps its pivot (`snapPlacement` in `pixelGrid.ts`). - Under a camera shader the picture is taken the same way, and the objects in it use the picture's grid. With Camera pixels that is one step per camera pixel. - An overlay camera has its own switch and snaps only while the main picture is at a fixed scale. - Particles are drawn where they are. - New test hook `__gm.gameDrawnRect(id)` reads where a sprite's picture is drawn, which `gameRect` (the model's) cannot tell. Found: the e2e fixture at 300% drew the crate at y 205.5 device pixels without moving the camera, because the view cut to an odd height puts its centre on half a pixel. With the switch on it is at 206. Tests: - Gate: 237 files, 3587 tests (+10 in pixel-grid.test.ts) - e2e 2,3: ALL PASSED, 75 checks (+1, 3j) - Counter-checks: without the origin snap 3 unit tests fail, with the centre snapped instead of the corner 2 fail Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
45 lines
1.7 KiB
TypeScript
45 lines
1.7 KiB
TypeScript
/**
|
||
* Pixel perfect cameras: what they show is drawn on a grid of one step per device pixel a world unit
|
||
* gets – a game view at 100% on whole units, at 500% on fifths. The model keeps its fractions; only
|
||
* where things are drawn snaps. Pure, so the arithmetic is tested without a GPU.
|
||
*/
|
||
import type { Mat } from '../core/model/matrix';
|
||
|
||
export function gridSteps(devicePixelsPerUnit: number): number {
|
||
return Math.max(1, Math.round(devicePixelsPerUnit));
|
||
}
|
||
|
||
export function onGrid(v: number, steps: number): number {
|
||
return Math.round(v * steps) / steps;
|
||
}
|
||
|
||
/**
|
||
* Where a box of `w`×`h` of its own units, placed by `m` around `pivot` (parts of the box), is drawn
|
||
* on a grid of `steps` per unit; null draws it as it is. An unturned box snaps a corner, so an odd
|
||
* size lands on whole pixels too, a turned one its pivot.
|
||
*/
|
||
export function snapPlacement(
|
||
m: Mat,
|
||
w: number,
|
||
h: number,
|
||
steps: number | null,
|
||
pivot = { x: 0.5, y: 0.5 },
|
||
): Mat {
|
||
if (!steps) return m;
|
||
if (Math.abs(m.b) > 1e-9 || Math.abs(m.c) > 1e-9)
|
||
return { ...m, tx: onGrid(m.tx, steps), ty: onGrid(m.ty, steps) };
|
||
const left = pivot.x * m.a * w;
|
||
const top = pivot.y * m.d * h;
|
||
return { ...m, tx: onGrid(m.tx - left, steps) + left, ty: onGrid(m.ty - top, steps) + top };
|
||
}
|
||
|
||
/**
|
||
* The point a view looks from instead of `x`, so the world's origin lands on a whole pixel: `centre`
|
||
* is where the view puts what it looks at, `scale` pixels per unit and `ratio` pixels per CSS pixel
|
||
* (1 for a picture that counts its own).
|
||
*/
|
||
export function lookFrom(x: number, centre: number, scale: number, ratio = 1): number {
|
||
const origin = Math.round((centre - x * scale) * ratio) / ratio;
|
||
return (centre - origin) / scale;
|
||
}
|