Files
feuerwerk/src/ui/render.ts
T
admin bc57f61c91
game-maker / suite (push) Successful in 10m46s
A still editor has nothing to draw, so the frame loop wakes on change (#44)
The renderer is taken off the ticker; the ticker itself keeps running, so
the clock, a live world and the panels still get their step. Drawing now
happens inside a 200 ms trailing window that every pointer, wheel and key
event, every Widget.invalidate/resize, every Stack.relayout, every
EditorState.emit and both library onChange hooks reopen. The window rather
than a single frame is what makes the ~70 direct redraw() calls that never
pass through invalidate() safe, along with repaints an event only starts:
a microtask, a texture upload, a resolved font.

Editor.movesByItself() keeps asking for every frame while Play or an editor
run is on, a time shader is on screen, or the particle or animation preview
is showing.

The FPS counter now counts drawn frames over the time the renderer was
awake. Idle seconds are not slow seconds, so it answers "how smooth while
it moves" and holds its last answer instead of falling to 0 at rest.

Measured on the built stand, 20 s per variant, CPU of all chromium
processes from /proc: kept awake 75.5 % of a core at 60 fps, render on
change 8.8 % with 0 frames drawn, awake again 83.9 % as an order probe.

No colour check can see a missing repaint: pixelAt extracts from the stage
on demand and is just as green on a screen frozen a minute ago. Step 33
watches the new __gm.renderStats() counter instead.
2026-09-14 21:41:50 +02:00

64 lines
2.3 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import { type Application, UPDATE_PRIORITY } from 'pixi.js';
/**
* Drives the renderer from changes instead of from the clock.
*
* An idle editor at 60 fps costs ~75 % of a core, and ~64 of those points are the drawing alone –
* a picture nobody asked to change. The ticker keeps running (~3 points): the clock, a running
* world and the panels still get their frame, only `app.render()` is skipped while nothing asked
* for it.
*
* What wakes it is deliberately not a strict dirty flag. Every pointer and keyboard event, every
* `Widget.invalidate()`/`resize()`, every `EditorState.emit()` and every texture or font arriving
* opens a short trailing window rather than requesting exactly one frame. A repaint that lands a
* few milliseconds after its cause – a microtask, a texture upload, a font resolving – is drawn
* without anyone having had to declare it, which is the failure this design refuses to have:
* a missing repaint is invisible to the check scripts, because `pixelAt` re-renders on demand.
*/
/** How long one wake-up keeps drawing. Long enough for the late repaint, short enough to idle. */
const WAKE_MS = 200;
let deadline = 0;
let rendered = 0;
/** Draw, and keep drawing for a moment. Cheap enough to call from every event. */
export function requestRender(): void {
deadline = performance.now() + WAKE_MS;
}
/** Whether the renderer is currently awake. */
export function isRendering(): boolean {
return performance.now() <= deadline;
}
/** Frames actually drawn since the loop was installed – the fps readout and the checks read it. */
export function renderCount(): number {
return rendered;
}
/**
* Takes the renderer off the ticker and drives it from `requestRender()` instead. Added at the
* ticker's lowest priority, so everything that may request a frame has run for this tick already.
*/
export function initRenderLoop(app: Application): void {
// `TickerPlugin` registers `Application.prototype.render` bound to the app; same pair to remove.
app.ticker.remove(app.render, app);
app.ticker.add(
() => {
if (!isRendering()) return;
rendered += 1;
app.render();
},
undefined,
UPDATE_PRIORITY.LOW,
);
requestRender();
}
/** Tests only: back to a cold loop. */
export function resetRenderLoop(): void {
deadline = 0;
rendered = 0;
}