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
Decision gist · record as of 2026-06-04
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.
Use it when
- pixijs-ticker provides three timing properties: `deltaTime` is a normalized delta (1.0 = one frame at target speed.
- pixijs-ticker supports `maxFPS` to cap frame rate and `minFPS` for frame-drop tolerance.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
pixijs/pixijs-skills/pixijs-ticker
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 1 file
skills/pixijs-ticker/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Add frame-based callbacks to control per-frame animation and game logic”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill equips you to bootstrap PixiJS v8 projects with modern async patterns, handling application setup and renderer initialization. Perfect for developers building 2D web games or interactive graphics who need a structured foundation for their rendering pipeline.
Master PixiJS Application initialization and renderer configuration for fast 2D graphics across WebGL, WebGPU, and Canvas. This skill covers foundational setup, scene graph structure, sprite and graphics rendering, text display, filter effects, and performance tuning techniques. Ideal for developers building interactive web experiences with PixiJS v8.
Pixi.js is a lightweight 2D rendering engine that leverages WebGL for blazing-fast graphics performance. Perfect for creating games, data visualizations, and interactive experiences, it provides a straightforward API for sprites, animations, and effects without the overhead of heavier frameworks.
This skill guides developers through upgrading PixiJS projects from version 7 to version 8, covering all breaking changes and API shifts. It provides a structured migration checklist and explains modern patterns for the fast WebGL-based 2D rendering engine. Perfect for teams maintaining graphics-heavy web applications.
Master input handling in PixiJS v8 by learning how to capture and respond to pointer, mouse, touch, and wheel events. This skill covers event binding techniques, listener management, and best practices for building responsive interactive graphics. Perfect for developers building games and applications with PixiJS's fast 2D rendering engine.
PixiJS is a high-performance 2D rendering engine built for the web. This skill collection guides agents through core PixiJS v8 concepts—from application initialization and scene management to advanced rendering techniques, custom shaders, and optimization strategies. Whether building interactive graphics or migrating from earlier versions, these skills provide structured pathways to solve rendering challenges efficiently.
More skills pixijs-core-concepts (MIT) · pixijs-create (MIT) · pixijs-scene-gif (MIT) · pixijs-filters (MIT) · pixijs-html-source (MIT)