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>
78 lines
2.8 KiB
TypeScript
78 lines
2.8 KiB
TypeScript
import type { Container, Mesh, Renderer } from 'pixi.js';
|
||
import { shaderOf } from '../core/properties/shaders';
|
||
import type { ActiveCamera } from './activeCamera';
|
||
import { type CameraPicture, cameraPicture } from './cameraPicture';
|
||
import { ShaderPicture } from './shaderPicture';
|
||
import { type ShaderSource, syncShader } from './shaders';
|
||
import { disposeSpriteMesh, newSpriteMesh, placeNode } from './symbols';
|
||
|
||
/** The picture `camera`'s shader is laid over, or null while it wears none that compiles. */
|
||
export function shadedPicture(
|
||
camera: ActiveCamera,
|
||
shaders: ShaderSource,
|
||
devicePixelsPerUnit: number,
|
||
onGrid: boolean,
|
||
): CameraPicture | null {
|
||
const id = shaderOf(camera.props);
|
||
return id && shaders.compiled(id) ? cameraPicture(camera, devicePixelsPerUnit, onGrid) : null;
|
||
}
|
||
|
||
/**
|
||
* A camera's shader (#299): the world as the camera sees it is drawn into a picture of its frame, and
|
||
* the shader draws that picture where the frame stands.
|
||
*/
|
||
export class CameraShade {
|
||
private mesh: Mesh | null = null;
|
||
private readonly picture = new ShaderPicture();
|
||
|
||
/**
|
||
* Draws `world`, which is in world units, into the camera's picture and lays the shader over it.
|
||
* `clearColor` is the scene's background, or null for a see-through overlay camera. Returns what a
|
||
* view attaches, in world units – or null, and nothing drawn, while the camera wears no shader that
|
||
* compiles. `onGrid`: through a pixel perfect camera (see `cameraPicture`).
|
||
*/
|
||
draw(
|
||
world: Container,
|
||
camera: ActiveCamera,
|
||
shaders: ShaderSource,
|
||
devicePixelsPerUnit: number,
|
||
renderer: Renderer,
|
||
clearColor: number | null,
|
||
onGrid = false,
|
||
): Mesh | null {
|
||
const id = shaderOf(camera.props);
|
||
const compiled = id ? shaders.compiled(id) : null;
|
||
if (!compiled) return null;
|
||
const shape = cameraPicture(camera, devicePixelsPerUnit, onGrid);
|
||
const scaleMode = shape.blocky ? 'nearest' : 'linear';
|
||
const picture = this.picture.draw(
|
||
renderer,
|
||
world,
|
||
shape.pixels,
|
||
shape.toPicture,
|
||
clearColor,
|
||
compiled.edge,
|
||
scaleMode,
|
||
);
|
||
const mesh = (this.mesh ??= newSpriteMesh());
|
||
const { x, y } = shape.centre;
|
||
placeNode(mesh, { a: 1, b: 0, c: 0, d: 1, tx: x, ty: y }, shape.frame.w, shape.frame.h);
|
||
mesh.texture = picture;
|
||
// The frame is the edge, so neither Padding nor Vertex output moves it; a pixel counts as a camera pixel.
|
||
syncShader(mesh, camera.props, shaders, null, id, shape.pixelScale);
|
||
this.picture.release();
|
||
return mesh;
|
||
}
|
||
|
||
/** The picture's size in pixels while one is drawn (test hook). */
|
||
get pixels(): { w: number; h: number } | null {
|
||
return this.picture.pixels;
|
||
}
|
||
|
||
destroy(): void {
|
||
if (this.mesh) disposeSpriteMesh(this.mesh);
|
||
this.mesh = null;
|
||
this.picture.destroy();
|
||
}
|
||
}
|