pixijs-ticker
The pixijs-ticker skill teaches you how to leverage PixiJS's built-in ticker for synchronizing animation frames and game updates. Learn to attach callbacks that fire reliably each frame, manage timing across your scene, and optimize performance in real-time graphics applications.
pixijs-ticker lets you attach frame-based callbacks using `app.ticker.add(callback)`. Your callback receives a `Ticker` object with timing data. Use `deltaTime` for frame-rate-independent movement (already scaled by `speed`), or `deltaMS`/`elapsedMS` for raw millisecond values. Callbacks execute every frame automatically when the ticker runs, letting you update sprite positions, animations, and game logic synchronously.
AI-generated summary based on this skill's SKILL.md
Install
pixijs/pixijs-skills/pixijs-ticker
git clone https://github.com/pixijs/pixijs-skills
cp -r pixijs-skills/skills/pixijs-ticker ~/.claude/skills/pixijs-tickerFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I add a callback to pixi ticker for per-frame animation?
pixijs-ticker lets you attach frame-based callbacks using `app.ticker.add(callback)`. Your callback receives a `Ticker` object with timing data. Use `deltaTime` for frame-rate-independent movement (already scaled by `speed`), or `deltaMS`/`elapsedMS` for raw millisecond values. Callbacks execute every frame automatically when the ticker runs, letting you update sprite positions, animations, and game logic synchronously.
What's the difference between deltaTime, deltaMS, and elapsedMS in pixijs-ticker?
pixijs-ticker provides three timing properties: `deltaTime` is a normalized delta (1.0 = one frame at target speed, affected by `speed` scaling), `deltaMS` is milliseconds since last frame, and `elapsedMS` is total milliseconds since the ticker started. Use `deltaTime` for frame-rate-independent gameplay, `deltaMS` for precise frame intervals, and `elapsedMS` for absolute elapsed time tracking.
How do I control frame rate and priority ordering in pixijs-ticker?
pixijs-ticker supports `maxFPS` to cap frame rate and `minFPS` for frame-drop tolerance. Assign priorities with `UPDATE_PRIORITY.HIGH`, `NORMAL`, or `LOW` when adding callbacks—higher-priority callbacks execute first. Configure speed scaling via `ticker.speed` (1.0 = normal). Use `autoStart` to control whether the ticker begins automatically, and manually call `start()` or `stop()` as needed.
Should I use app.ticker.shared or create a new Ticker instance?
pixijs-ticker's `Ticker.shared` is a global instance tied to your app's render loop—use it for most game updates. Create a `new Ticker()` only for independent timing needs (e.g., UI animations separate from game logic). Shared instances are more efficient and stay synchronized; manual instances require you to call `update()` yourself or manage their own loop.
How do I remove a callback or pause animation in pixijs-ticker?
pixijs-ticker provides `ticker.remove(callback, context)` to detach a callback, or `ticker.addOnce(callback)` for one-shot execution. Pause all updates with `ticker.stop()`, resume with `ticker.start()`. Adjust `ticker.speed` to 0 for a pause without stopping the ticker. For manual rendering without the ticker, set `app.ticker.autoStart = false` and call `app.render()` explicitly.
What changed in pixijs-ticker between v7 and v8?
pixijs-ticker's core API remains stable across v7 to v8, but check your PixiJS release notes for any timing precision improvements or priority constant name changes. The callback signature and `deltaTime`/`deltaMS` behavior are consistent. If migrating, verify your `UPDATE_PRIORITY` references and test frame-rate-dependent logic to ensure smooth transitions.
SKILL.md
rendered from the published skill — quoted content, verbatim
app.ticker runs registered callbacks every frame and drives app.render() at UPDATE_PRIORITY.LOW. Each callback receives the Ticker instance; read deltaTime as a frame-rate-independent multiplier (≈1.0 at 60fps) or deltaMS for real-time calculations.
Quick Start
app.ticker.add((ticker) => {
sprite.rotation += 0.01 * ticker.deltaTime;
sprite.x += (200 / 1000) * ticker.deltaMS;
});
app.ticker.add(
(ticker) => {
updatePhysics(ticker.deltaMS);
},
undefined,
UPDATE_PRIORITY.HIGH,
);
app.ticker.maxFPS = 30;
app.ticker.speed = 0.5;
sprite.onRender = () => {
sprite.scale.x = Math.sin(performance.now() / 500);
};
Related skills: pixijs-application (Application setup and
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/pixijs-ticker/SKILL.md