
Pixijs Ticker
Wire PixiJS v8 per-frame updates, timing units, and render-loop priority so solo builders ship smooth canvas or WebGL games without frame-rate bugs.
Overview
Pixijs-ticker is an agent skill for the Build phase that teaches PixiJS v8 Ticker patterns—add/addOnce/remove, timing units, priorities, FPS caps, and onRender—for per-frame game and canvas logic.
Install
npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-tickerWhat is this skill?
- Documents deltaTime, deltaMS, and elapsedMS with speed scaling and when each unit fits animation vs physics
- Ticker.add/addOnce/remove with UPDATE_PRIORITY ordering for physics before draw
- maxFPS, minFPS, ticker.speed, Ticker.shared vs custom instances, and manual rendering paths
- Per-object onRender hook for transform updates without global ticker spam
- Cross-links to pixijs-application, pixijs-performance, and pixijs-migration-v8 for v7 signature changes
- Three timing properties documented: deltaTime, deltaMS, and elapsedMS with speed-scaling behavior
- Ticker drives app.render() at UPDATE_PRIORITY.LOW by default
Adoption & trust: 1.3k installs on skills.sh; 206 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have PixiJS sprites moving on screen but jitter, wrong speeds across devices, or update order bugs because deltaTime, priorities, and the shared ticker are easy to misuse.
Who is it for?
Indie game or interactive canvas builds on PixiJS v8 where every frame updates rotation, physics, or UI motion.
Skip if: Teams not using PixiJS, or projects that only need static assets with no per-frame simulation (use layout/CSS skills instead).
When should I use this skill?
Running per-frame logic or controlling the PixiJS v8 render loop; triggers include Ticker, UPDATE_PRIORITY, deltaTime, deltaMS, elapsedMS, onRender, app.ticker, maxFPS, minFPS, Ticker.shared.
What do I get? / Deliverables
After applying the skill, your agent registers prioritized ticker callbacks and object hooks with the correct time units and FPS limits so animation stays stable across frame rates.
- Ticker-registered update callbacks with correct time units
- Priority-ordered frame pipeline
- FPS-capped or manually stepped render configuration
Recommended Skills
Journey fit
Ticker and deltaTime work happen while implementing the interactive product surface, not during launch or ops. Render-loop callbacks, onRender hooks, and FPS caps are frontend/canvas runtime concerns in the build phase.
How it compares
Procedural PixiJS render-loop reference—not a generic React animation helper or an MCP server.
Common Questions / FAQ
Who is pixijs-ticker for?
Solo builders and small teams shipping browser games or rich canvas UIs with PixiJS v8 who want the ticker API applied correctly in agent-generated TypeScript.
When should I use pixijs-ticker?
During Build (frontend) when you add app.ticker callbacks, tune UPDATE_PRIORITY, cap maxFPS/minFPS, scale ticker.speed, or attach sprite.onRender—and when migrating from PixiJS v7 ticker signatures.
Is pixijs-ticker safe to install?
It is documentation-style guidance with code snippets; review the Security Audits panel on this Prism page and inspect the skill package in your repo before running untrusted installs.
Workflow Chain
Requires first: pixijs application
Then invoke: pixijs performance
SKILL.md
READMESKILL.md - Pixijs Ticker
`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 ```ts 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 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 | ```ts import { Application } from "pixi.js"; const app = new Application(); await app.init({ width: 800, height: 600 }); app.ticker.add((ticker) => { // deltaTime: dimensionless scalar, ~1.0 at 60fps sprite.rotation += 0.1 * ticker.deltaTime; // deltaMS: real milliseconds (speed-scaled, capped) sprite.x += (200 / 1000) * ticker.deltaMS; // 200 pixels per second // elapsedMS: raw milliseconds (no scaling, no cap) console.log(`Raw frame time: ${ticker.elapsedMS}ms`); }); ``` **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 ```ts import { Application, UPDATE_PRIORITY } from "pixi.js"; const app = new Application(); await app.init({ width: 800, height: 600 }); // INTERACTION (50) > HIGH (25) > NORMAL (0) > LOW (-25) > UTILITY (-50) // app.render() is registered at LOW by the TickerPlugin app.ticker.add( (ticker) => { // Physics runs before normal-priority callbacks updatePhysics(ticker.deltaMS); }, undefined, UPDATE_PRIORITY.HIGH, ); app.ticker.add((ticker) => { // Default priority (NORMAL = 0), runs after HIGH but before render updateAnimations(ticker.deltaTime); }); // Pass `this` as the second argument to preserve context on class methods class GameSystem { public speed = 5; public position = 0; public update(ticker: Ticker): void { this.position += this.speed * ticker.deltaTime; } } const system = new GameSystem(); app.ticker.add(system.update, system); app.ticker.remove(system.update, system); // must match both fn and context ``` ### Frame rate capping ```ts import { Ticker } from "pixi.js"; const ticker = new Ticker(); ticker.maxFPS = 30; // Cap at 30fps (skips frames to mainta