pixijs-ticker

Use this skill when running per-frame logic or controlling the PixiJS v8 render loop. Covers Ticker.add/addOnce/remove, deltaTime vs deltaMS vs elapsedMS, UPDATE_PRIORITY ordering, maxFPS/minFPS capping, speed scaling, Ticker.shared vs new instances, per-object onRender hook, manual rendering. Trigg

By pixijs · 4,257 installs

npx skills add pixijs/pixijs-skills --skill pixijs-ticker

Source repository · Upstream listing

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 Related skills: pixijs application (Application setup and sharedTicker option), pixijs performance (frame rate optimization), pixijs migration v8 (v7 ticker signature changes). Core Patterns Time units The Ticker exposes three timing values, each for different use cases: Property Type Scaled by speed? Capped by minFPS? Use case deltaTime dimensionless (~1.0 at 60fps) yes yes Frame rate independent animation multipliers deltaMS milliseconds yes yes Time based calculations (pixels/sec) elapsedMS milliseconds no no Raw measurement, profiling Tension note: deltaTime is not milliseconds. It is deltaMS Ticker.targetFPMS where targetFPMS is 0.06 (i.e. 1/16.67). At exactly 60fps, deltaTime is 1.0. At 30fps, deltaTime is 2.0. This catches people who treat it as a time value. Priority ordering and context binding Frame rate capping maxFPS skips update calls to enforce a ceiling. minFPS caps deltaTime/deltaMS so large frame drops don't produce enormous deltas (default minFPS is 10). Per object onRender hook onRender is called during scene graph traversal, before GPU rendering. It is an alternative to a global ticker callback when logic is tied to a specific display object. Ticker.shared, Ticker.system, and new Ticker Application creates its own Ticker by default. Set sharedTicker: true in app.init() to use Ticker.shared instead. Ticker.shared and Ticker.system are both protected and will not actually be destroyed if you call destroy() on them. Read ticker.FPS for the measured frame rate and ticker.count for the current listener count. App lifecycle and manual rendering app.start() and app.stop() are added by the TickerPlugin and map to ticker.start() / ticker.stop() . Use autoStart: false plus your own frame driver when you need to pause on tab blur, run a fixed timestep loop, or render offscreen. Speed scaling Common Mistakes [CRITICAL] Ticker callback expects delta as first argument Wrong: Correct: v8 passes the Ticker instance as the callback argument, not a delta number. The v7 pattern (dt) = ... compiles but dt is the entire Ticker object, so arithmetic on it produces NaN . [HIGH] Using updateTransform for per frame logic Wrong: Correct: updateTransform was removed in v8. Use the onRender callback for per object per frame logic. [MEDIUM] Treating deltaTime as milliseconds Wrong: Correct: deltaTime is a dimensionless scalar (~1.0 at 60fps), not milliseconds. Use deltaMS for real time calculations. Use deltaTime as a simple multiplier when you want "per frame at 60fps" behavior. API Reference [Ticker](https://pixijs.download/release/docs/ticker.Ticker.html.md) [TickerPlugin](https://pixijs.download/release/docs/app.TickerPlugin.html.md) [TickerPluginOptions](https://pixijs.download/release/docs/app.TickerPluginOptions.html.md)