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>
62 lines
2.4 KiB
TypeScript
62 lines
2.4 KiB
TypeScript
import type { PropertyBag } from '../model/Properties';
|
||
import { defaultsFor } from './PropertySchema';
|
||
|
||
const DEFAULTS = defaultsFor('camera');
|
||
|
||
export interface WorldRect {
|
||
left: number;
|
||
top: number;
|
||
right: number;
|
||
bottom: number;
|
||
}
|
||
|
||
/**
|
||
* The world region a camera shows: its view size divided by its zoom. Drawn as a frame in edit mode,
|
||
* and the only region rendered in play mode.
|
||
*/
|
||
export function cameraFrame(props: PropertyBag): { w: number; h: number } {
|
||
const zoom = Math.max(0.01, Number(props.zoom ?? DEFAULTS.zoom));
|
||
const size = cameraSize(props);
|
||
return { w: size.w / zoom, h: size.h / zoom };
|
||
}
|
||
|
||
/** The picture the camera produces, in its own pixels – what the game view's 100% shows 1:1. */
|
||
export function cameraSize(props: PropertyBag): { w: number; h: number } {
|
||
return { w: Number(props.width ?? DEFAULTS.width), h: Number(props.height ?? DEFAULTS.height) };
|
||
}
|
||
|
||
export function isPixelPerfect(props: PropertyBag): boolean {
|
||
return props.pixelPerfect === true;
|
||
}
|
||
|
||
/**
|
||
* Where the mouse is in the world as `camera` sees it, with that camera's picture fitted into the
|
||
* main camera's and centred, the way #302 lays an overlay on. `onPicture` is the mouse on the main
|
||
* picture, from its centre in parts of its width and height; `onMain` whether it is on it at all.
|
||
* `inside` is then whether the mouse is on this camera's picture.
|
||
*/
|
||
export function pointerThrough(
|
||
onPicture: { x: number; y: number },
|
||
onMain: boolean,
|
||
mainProps: PropertyBag,
|
||
camera: { x: number; y: number; props: PropertyBag },
|
||
): { x: number; y: number; inside: boolean } {
|
||
const main = cameraFrame(mainProps);
|
||
const frame = cameraFrame(camera.props);
|
||
// Units of the main frame per unit of this camera's.
|
||
const fit = Math.min(main.w / frame.w, main.h / frame.h);
|
||
if (!(fit > 0) || !Number.isFinite(fit)) return { x: camera.x, y: camera.y, inside: false };
|
||
const dx = onPicture.x * main.w;
|
||
const dy = onPicture.y * main.h;
|
||
const inside = onMain && Math.abs(dx) <= (frame.w * fit) / 2 && Math.abs(dy) <= (frame.h * fit) / 2;
|
||
return { x: camera.x + dx / fit, y: camera.y + dy / fit, inside };
|
||
}
|
||
|
||
export function rectAround(cx: number, cy: number, w: number, h: number): WorldRect {
|
||
return { left: cx - w / 2, top: cy - h / 2, right: cx + w / 2, bottom: cy + h / 2 };
|
||
}
|
||
|
||
export function rectsIntersect(a: WorldRect, b: WorldRect): boolean {
|
||
return a.left < b.right && a.right > b.left && a.top < b.bottom && a.bottom > b.top;
|
||
}
|