rootandClaude Opus 5
1135bf4562
An animation asset is a list of pictures (whole textures or frames) with frames per second and Loop/Once/Ping-pong playback. A sprite wears it through its texture property, so the picker, instance overrides and the Properties node work unchanged; there is no dedicated play node. A different animation starts from its first frame, the same one set again runs on, so a graph may choose Run or Idle every frame. The clock lives on the entity, not in props, which the world writes back as overrides. The AnimationSystem ticks before behaviors, and On animation finished fires once when a Once animation reaches its end. The Animation tab plays a preview above a frame strip: reorder by dragging, Delete, duplicate, + Frames, pause/resume, and wheel zoom about the pointer with pan and Fit. Scene and Container tabs show the first frame; edit mode has no clock. Right-clicking a texture creates an animation from its frames. Button now measures its label with the bold font it draws in, which cut the Animation tab and red dialog buttons short. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import type { Graphics } from 'pixi.js';
|
||
|
||
/** Side of one square of the transparency checkerboard, in screen pixels. */
|
||
const CHECKER_SIZE = 8;
|
||
const CHECKER_DARK = 0x1a1c21;
|
||
const CHECKER_LIGHT = 0x24272e;
|
||
|
||
/**
|
||
* The checkerboard behind a picture at (x, y, w, h). Only squares inside `0..clipW × 0..clipH` are
|
||
* drawn: a 4000 px sheet zoomed in would otherwise cost tens of thousands of rectangles per redraw.
|
||
*/
|
||
export function drawChecker(
|
||
g: Graphics,
|
||
x: number,
|
||
y: number,
|
||
w: number,
|
||
h: number,
|
||
clipW: number,
|
||
clipH: number,
|
||
): void {
|
||
if (w <= 0 || h <= 0) return;
|
||
g.rect(x, y, w, h).fill(CHECKER_DARK);
|
||
const from = (start: number, limit: number) => Math.max(0, Math.floor((limit - start) / CHECKER_SIZE));
|
||
const x0 = from(x, 0);
|
||
const y0 = from(y, 0);
|
||
const x1 = Math.min(Math.ceil(w / CHECKER_SIZE), from(x, clipW) + 1);
|
||
const y1 = Math.min(Math.ceil(h / CHECKER_SIZE), from(y, clipH) + 1);
|
||
for (let cy = y0; cy < y1; cy++) {
|
||
for (let cx = x0; cx < x1; cx++) {
|
||
if ((cx + cy) % 2 === 0) continue;
|
||
g.rect(
|
||
x + cx * CHECKER_SIZE,
|
||
y + cy * CHECKER_SIZE,
|
||
Math.min(CHECKER_SIZE, w - cx * CHECKER_SIZE),
|
||
Math.min(CHECKER_SIZE, h - cy * CHECKER_SIZE),
|
||
);
|
||
}
|
||
}
|
||
g.fill(CHECKER_LIGHT);
|
||
}
|