pixijs-ticker

Coordinate per-frame logic using PixiJS v8 Ticker registration and timing APIs.

1|Updated Apr 26, 2026
One-click install
npx skills add https://github.com/matthewharwood/dean-stack --skill pixijs-ticker-matthewharwood
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pixijs-ticker
Source: https://github.com/matthewharwood/dean-stack/tree/main/.claude/skills/pixijs-ticker
Command: npx skills add https://github.com/matthewharwood/dean-stack --skill pixijs-ticker-matthewharwood

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers manage per-frame logic and render loops in PixiJS v8, ensuring consistent timing and clean separation of concerns between updating game state and rendering.

Core Features & Use Cases

  • Ticker.add, Ticker.addOnce, Ticker.system, Ticker.shared usage for per-frame callbacks.
  • Understanding and using deltaTime, deltaMS, and elapsedMS for frame-rate independent logic.
  • Controlling frame rate with maxFPS and minFPS, and using speed scaling.
  • Per-object onRender hook, and manual rendering in App lifecycle (start/stop, etc.).
  • Distinguishing between shared vs new Ticker instances, and lifecycle management.

Quick Start

Add a ticker callback and drive animation using ticker.deltaTime or ticker.deltaMS for a consistent frame rate.

Frequently Asked Questions about pixijs-ticker

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create frame-rate independent animations in PixiJS?

Use the PixiJS Ticker to register per-frame callbacks and apply deltaTime or deltaMS to normalize movement, ensuring deterministic updates across varying hardware frame rates.

What is the difference between Ticker.shared and a new Ticker instance in PixiJS v8?

Ticker.shared provides a global singleton instance for app-wide updates, while creating a new Ticker instance allows isolated lifecycle management. Use shared for standard rendering loops and new instances for independent timing control or manual start/stop operations.

How do I add and remove per-frame callbacks in PixiJS?

Use Ticker.add for persistent per-frame callbacks and Ticker.addOnce for single-execution callbacks. Remove specific callbacks with Ticker.remove to cleanly manage lifecycle events and prevent memory leaks during scene transitions.

Can I cap the FPS or scale animation speed using PixiJS Ticker?

PixiJS Ticker supports FPS capping via maxFPS and minFPS properties, and speed scaling through the speed property. Adjust these values to control rendering frequency and modify animation playback speed dynamically.

How do I use the onRender hook for per-object updates in PixiJS?

PixiJS Ticker supports per-object onRender hooks to execute logic immediately before rendering occurs. This separates game state updates from rendering logic, ensuring frame-accurate visual synchronization within the App lifecycle.

How does priority ordering work for PixiJS Ticker callbacks?

PixiJS Ticker priority ordering controls the execution sequence of registered callbacks within a single frame. Assign priority values during Ticker.add to ensure critical updates execute before dependent rendering logic, maintaining deterministic frame accuracy.