pixijs-ticker

Name: pixijs-ticker
Author: pixijs

2.9kinstalls15forks

How to install pixijs-ticker?

pixijs/pixijs-skills/pixijs-ticker

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

Installs into the current project.

Summary

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, man

Files · 1

View on GitHub

SKILL.md

1	`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.
2
3	## Quick Start
4
5	```ts
6	app.ticker.add((ticker) => {
7	sprite.rotation += 0.01 * ticker.deltaTime;
8	sprite.x += (200 / 1000) * ticker.deltaMS;
9	});
10
11	app.ticker.add(
12	(ticker) => {
13	updatePhysics(ticker.deltaMS);
14	},
15	undefined,
16	UPDATE_PRIORITY.HIGH,
17	);
18
19	app.ticker.maxFPS = 30;
20	app.ticker.speed = 0.5;
21
22	sprite.onRender = () => {
23	sprite.scale.x = Math.sin(performance.now() / 500);
24	};
25	```
26
27	Related skills: `pixijs-application` (Application setup and sharedTicker option), `pixijs-performance` (frame rate optimization), `pixijs-migration-v8` (v7 ticker signature changes).
28
29	## Core Patterns
30
31	### Time units
32
33	The Ticker exposes three timing values, each for different use cases:
34
35	\| Property \| Type \| Scaled by speed? \| Capped by minFPS? \| Use case \|
36	\| ----------- \| ----------------------------- \| ---------------- \| ----------------- \| -------------------------------------------- \|
37	\| `deltaTime` \| dimensionless (~1.0 at 60fps) \| yes \| yes \| Frame-rate-independent animation multipliers \|
38	\| `deltaMS` \| milliseconds \| yes \| yes \| Time-based calculations (pixels/sec) \|
39	\| `elapsedMS` \| milliseconds \| no \| no \| Raw measurement, profiling \|
40
41	```ts
42	import { Application } from "pixi.js";
43
44	const app = new Application();
45	await app.init({ width: 800, height: 600 });
46
47	app.ticker.add((ticker) => {
48	// deltaTime: dimensionless scalar, ~1.0 at 60fps
49	sprite.rotation += 0.1 * ticker.deltaTime;
50
51	// deltaMS: real milliseconds (speed-scaled, capped)
52	sprite.x += (200 / 1000) * ticker.deltaMS; // 200 pixels per second
53
54	// elapsedMS: raw milliseconds (no scaling, no cap)
55	console.log(`Raw frame time: ${ticker.elapsedMS}ms`);
56	});
57	```
58
59	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.
60
61	### Priority ordering and context binding
62
63	```ts
64	import { Application, UPDATE_PRIORITY } from "pixi.js";
65
66	const app = new Application();
67	await app.init({ width: 800, height: 600 });
68
69	// INTERACTION (50) > HIGH (25) > NORMAL (0) > LOW (-25) > UTILITY (-50)
70	// app.render() is registered at LOW by the TickerPlugin
71
72	app.ticker.add(
73	(ticker) => {
74	// Physics runs before normal-priority callbacks
75	updatePhysics(ticker.deltaMS);
76	},
77	undefined,
78	UPDATE_PRIORITY.HIGH,
79	);
80
81	app.ticker.add((ticker) => {
82	// Default priority (NORMAL = 0), runs after HIGH but before render
83	updateAnimations(ticker.deltaTime);
84	});
85
86	// Pass `this` as the second argument to preserve context on class methods
87	class GameSystem {
88	public speed = 5;
89	public position = 0;
90
91	public update(ticker: Ticker): void {
92	this.position += this.speed * ticker.deltaTime;
93	}
94	}
95
96	const system = new GameSystem();
97	app.ticker.add(system.update, system);
98	app.ticker.remove(system.update, system); // must match both fn and context
99	```
100
101	### Frame rate capping
102
103	```ts
104	import { Ticker } from "pixi.js";
105
106	const ticker = new Ticker();
107
108	ticker.maxFPS = 30; // Cap at 30fps (skips frames to maintain interval)
109	ticker.minFPS = 10; // Cap deltaTime so it never exceeds 10fps worth
110
111	// If maxFPS < minFPS, minFPS is lowered to match
112	// If minFPS > maxFPS, maxFPS is raised to match
113	```
114
115	`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).
116
117	### Per-object onRender hook
118
119	```ts
120	import { Sprite, Assets, Application } from "pixi.js";
121
122	const app = new Application();
123	await app.init({ width: 800, height: 600 });
124
125	const texture = await Assets.load("bunny.png");
126	const sprite = new Sprite(texture);
127	app.stage.addChild(sprite);
128
129	sprite.onRender = (renderer) => {
130	sprite.rotation += 0.01;
131	};
132	```
133
134	`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.
135
136	### Ticker.shared, Ticker.system, and new Ticker
137
138	```ts
139	import { Ticker, UPDATE_PRIORITY } from "pixi.js";
140
141	// Ticker.shared: single

People who liked this also viewed

6 picks

Type

pixijs-ticker

2.9kinstalls15forks

View on GitHub

How to install pixijs-ticker?

pixijs/pixijs-skills/pixijs-ticker

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	`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.
2
3	## Quick Start
4
5	```ts
6	app.ticker.add((ticker) => {
7	sprite.rotation += 0.01 * ticker.deltaTime;
8	sprite.x += (200 / 1000) * ticker.deltaMS;
9	});
10
11	app.ticker.add(
12	(ticker) => {
13	updatePhysics(ticker.deltaMS);
14	},
15	undefined,
16	UPDATE_PRIORITY.HIGH,
17	);
18
19	app.ticker.maxFPS = 30;
20	app.ticker.speed = 0.5;
21
22	sprite.onRender = () => {
23	sprite.scale.x = Math.sin(performance.now() / 500);
24	};
25	```
26
27	Related skills: `pixijs-application` (Application setup and sharedTicker option), `pixijs-performance` (frame rate optimization), `pixijs-migration-v8` (v7 ticker signature changes).
28
29	## Core Patterns
30
31	### Time units
32
33	The Ticker exposes three timing values, each for different use cases:
34
35	\| Property \| Type \| Scaled by speed? \| Capped by minFPS? \| Use case \|
36	\| ----------- \| ----------------------------- \| ---------------- \| ----------------- \| -------------------------------------------- \|
37	\| `deltaTime` \| dimensionless (~1.0 at 60fps) \| yes \| yes \| Frame-rate-independent animation multipliers \|
38	\| `deltaMS` \| milliseconds \| yes \| yes \| Time-based calculations (pixels/sec) \|
39	\| `elapsedMS` \| milliseconds \| no \| no \| Raw measurement, profiling \|
40
41	```ts
42	import { Application } from "pixi.js";
43
44	const app = new Application();
45	await app.init({ width: 800, height: 600 });
46
47	app.ticker.add((ticker) => {
48	// deltaTime: dimensionless scalar, ~1.0 at 60fps
49	sprite.rotation += 0.1 * ticker.deltaTime;
50
51	// deltaMS: real milliseconds (speed-scaled, capped)
52	sprite.x += (200 / 1000) * ticker.deltaMS; // 200 pixels per second
53
54	// elapsedMS: raw milliseconds (no scaling, no cap)
55	console.log(`Raw frame time: ${ticker.elapsedMS}ms`);
56	});
57	```
58
59	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.
60
61	### Priority ordering and context binding
62
63	```ts
64	import { Application, UPDATE_PRIORITY } from "pixi.js";
65
66	const app = new Application();
67	await app.init({ width: 800, height: 600 });
68
69	// INTERACTION (50) > HIGH (25) > NORMAL (0) > LOW (-25) > UTILITY (-50)
70	// app.render() is registered at LOW by the TickerPlugin
71
72	app.ticker.add(
73	(ticker) => {
74	// Physics runs before normal-priority callbacks
75	updatePhysics(ticker.deltaMS);
76	},
77	undefined,
78	UPDATE_PRIORITY.HIGH,
79	);
80
81	app.ticker.add((ticker) => {
82	// Default priority (NORMAL = 0), runs after HIGH but before render
83	updateAnimations(ticker.deltaTime);
84	});
85
86	// Pass `this` as the second argument to preserve context on class methods
87	class GameSystem {
88	public speed = 5;
89	public position = 0;
90
91	public update(ticker: Ticker): void {
92	this.position += this.speed * ticker.deltaTime;
93	}
94	}
95
96	const system = new GameSystem();
97	app.ticker.add(system.update, system);
98	app.ticker.remove(system.update, system); // must match both fn and context
99	```
100
101	### Frame rate capping
102
103	```ts
104	import { Ticker } from "pixi.js";
105
106	const ticker = new Ticker();
107
108	ticker.maxFPS = 30; // Cap at 30fps (skips frames to maintain interval)
109	ticker.minFPS = 10; // Cap deltaTime so it never exceeds 10fps worth
110
111	// If maxFPS < minFPS, minFPS is lowered to match
112	// If minFPS > maxFPS, maxFPS is raised to match
113	```
114
115	`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).
116
117	### Per-object onRender hook
118
119	```ts
120	import { Sprite, Assets, Application } from "pixi.js";
121
122	const app = new Application();
123	await app.init({ width: 800, height: 600 });
124
125	const texture = await Assets.load("bunny.png");
126	const sprite = new Sprite(texture);
127	app.stage.addChild(sprite);
128
129	sprite.onRender = (renderer) => {
130	sprite.rotation += 0.01;
131	};
132	```
133
134	`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.
135
136	### Ticker.shared, Ticker.system, and new Ticker
137
138	```ts
139	import { Ticker, UPDATE_PRIORITY } from "pixi.js";
140
141	// Ticker.shared: single

People who liked this also viewed

6 picks

Type