pixijs-ticker

Implement per-frame animation with PixiJS Ticker using deltaTime and UPDATE_PRIORITY.

Updated Mar 13, 2022
One-click install
npx skills add https://github.com/alexkafer/alexkafer-web --skill pixijs-ticker-alexkafer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pixijs-ticker
Source: https://github.com/alexkafer/alexkafer-web/tree/main/.agents/skills/pixijs-ticker
Command: npx skills add https://github.com/alexkafer/alexkafer-web --skill pixijs-ticker-alexkafer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves confusion and bugs in per-frame animation logic by teaching you how to correctly use PixiJS v8's Ticker timing, priority, and render hooks.

Core Features & Use Cases

  • Frame-independent motion: Use deltaTime, deltaMS, and elapsedMS correctly to avoid speed bugs when FPS fluctuates.
  • Deterministic update ordering: Control when callbacks run via UPDATE_PRIORITY so physics/interaction/update logic happens in the right order.
  • Stable performance controls: Cap with maxFPS/minFPS and tune speed scaling to keep animations consistent across devices.
  • Multiple ticker strategies: Choose Ticker.shared, Ticker.system, or a custom Ticker instance depending on lifecycle needs.

Quick Start

Ask the AI to show how to animate a sprite with ticker.deltaMS and set UPDATE_PRIORITY.HIGH for physics updates.

Frequently Asked Questions about pixijs-ticker

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

FAQPage Schema
How do I fix PixiJS animation speed bugs when FPS fluctuates?

To fix PixiJS animation speed bugs during FPS drops, use the Ticker's deltaTime, deltaMS, and elapsedMS values for frame-independent motion. This ensures per-frame logic scales correctly with actual frame timing rather than assuming a fixed rate.

How do I control PixiJS per-frame update order for physics and interactions?

Control PixiJS per-frame update order by assigning UPDATE_PRIORITY to your Ticker callbacks. This guarantees deterministic ordering, ensuring physics, interaction, and rendering logic execute in the correct sequence during the render loop.

Can I cap the frame rate in a PixiJS render loop?

Yes, you can cap the frame rate in a PixiJS render loop using the maxFPS and minFPS properties. This stabilizes performance across different devices and allows speed scaling to keep animations consistent.

What is the difference between Ticker.shared and a custom PixiJS Ticker instance?

The difference between Ticker.shared and a custom PixiJS Ticker instance lies in lifecycle management. Ticker.shared is a global singleton, while custom instances allow isolated per-frame logic, providing flexibility for different update strategies.

Does PixiJS support per-object rendering logic in the ticker?

Yes, PixiJS supports per-object rendering logic through sprite.onRender. This can be optionally leveraged alongside the Ticker instance callback signature to execute specific rendering hooks for individual objects.

Why does my PixiJS animation speed change on different devices?

PixiJS animation speed changes across devices when per-frame logic ignores timing units. Applying the correct Ticker callback signature with deltaMS or deltaTime normalizes updates, preventing speed variations caused by differing hardware frame rates.