Pixijs Scene Sprite
Implement frame-based spritesheet animation in PixiJS games or interactive canvases without guessing AnimatedSprite APIs.
Overview
pixijs-scene-sprite is an agent skill for the Build phase that teaches PixiJS AnimatedSprite patterns for spritesheet-driven frame animation.
Install
npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-scene-spriteWhat is this skill?
- Documents AnimatedSprite quick start with Assets.load and sheet.animations
- Covers both constructor forms plus AnimatedSpriteOptions (loop, autoPlay, animationSpeed)
- Explains Sprite inheritance—anchor, tint, position, scale behave like Sprite
- Includes core playback patterns for walk cycles, explosions, and UI icon loops
- Notes allowChildren = false inherited from Sprite
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 a spritesheet and need reliable frame animation in PixiJS without misconfiguring textures, loop behavior, or Sprite options.
Who is it for?
Indie game or interactive UI builders using PixiJS spritesheets for characters, VFX, or animated icons.
Skip if: Teams not using PixiJS, or projects that only need static Sprites with no frame sequences.
When should I use this skill?
When implementing PixiJS AnimatedSprite from spritesheets for characters, VFX, or UI icon loops.
What do I get? / Deliverables
Your agent outputs correct AnimatedSprite construction, playback flags, and stage wiring aligned with PixiJS Sprite semantics.
- AnimatedSprite initialization snippets
- Playback configuration (loop, speed, autoPlay)
Recommended Skills
Journey fit
How it compares
Use as a focused AnimatedSprite recipe card rather than reading the full PixiJS API surface ad hoc in chat.
Common Questions / FAQ
Who is pixijs-scene-sprite for?
Solo and indie builders shipping 2D canvas or browser games who want agent-assisted PixiJS animation code that matches library conventions.
When should I use pixijs-scene-sprite?
During Build (frontend) when wiring walk cycles, explosions, or UI loops from a loaded spritesheet, or when refactoring raw texture arrays into AnimatedSprite options.
Is pixijs-scene-sprite safe to install?
Review the Security Audits panel on this Prism page and inspect the skill package source before enabling it in your agent environment.
SKILL.md
READMESKILL.md - Pixijs Scene Sprite
# AnimatedSprite A `Sprite` subclass that cycles through an array of textures for frame-based animation. Use for character walk cycles, explosions, UI icon loops, or any sequence driven by pre-rendered frames from a spritesheet. ## Quick Start ```ts const sheet = await Assets.load("character.json"); const walk = new AnimatedSprite({ textures: sheet.animations["walk"], animationSpeed: 0.15, loop: true, autoPlay: true, }); app.stage.addChild(walk); ``` `AnimatedSprite` extends `Sprite`, so anchor, tint, position, and scale all work the same way. It adds frame playback on top. Inherits `allowChildren = false` from `Sprite`. ## Core Patterns ### Construction ```ts new AnimatedSprite(frames, autoUpdate?); new AnimatedSprite({ textures, autoUpdate, autoPlay, loop, animationSpeed }); ``` Two constructor forms are supported. The options form accepts all `SpriteOptions` (anchor, tint, position, etc.) plus the animation-specific fields below. The positional form takes a frames array and an optional `autoUpdate` flag. ```ts const sheet = await Assets.load("character.json"); const walk = new AnimatedSprite({ textures: sheet.animations["walk"], animationSpeed: 0.2, loop: true, autoPlay: true, anchor: 0.5, x: 200, y: 300, }); ``` #### AnimatedSpriteOptions | Option | Type | Default | Description | | ---------------- | -------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------- | | `textures` | `AnimatedSpriteFrames` | — | Frame list: a `Texture[]` or `FrameObject[]` (each `{ texture, time }` with `time` in ms). Required. | | `animationSpeed` | `number` | `1` | Playback multiplier; negative values reverse direction. | | `autoPlay` | `boolean` | `false` | Start playback immediately on construction. | | `autoUpdate` | `boolean` | `true` | Drive playback from `Ticker.shared`; set `false` to call `update(ticker)` manually. | | `loop` | `boolean` | `true` | Restart after the last frame; set `false` for one-shot animations. | | `onComplete` | `() => void` | `null` | Fires when a non-looping animation reaches its end. | | `onFrameChange` | `(currentFrame: number) => void` | `null` | Fires every time the displayed texture changes. | | `onLoop` | `() => void` | `null` | Fires when a looping animation wraps back to the start. | | `updateAnchor` | `boolean` | `false` | Copy `texture.defaultAnchor` onto the sprite's anchor on every frame change. Overrides any previously set anchor. | Also inherits `SpriteOptions` minus `texture` (use `textures` for frames) — see `sprite.md`. All `Container` options (`position`, `scale`, `tint`, `label`, `filters`, `zIndex`, etc.) are also valid here — see `skills/pixijs-scene-core-concepts/references/constructor-options.md`. ### Playback control ```ts walk.play(); walk.stop(); walk.gotoAndStop(3); walk.gotoAndPlay(0); walk.currentFrame = 2; console.log(walk.totalFrames); console.log(walk.playing); ``` - `play()` / `stop()`: start or freeze playback at the current frame. - `gotoAndStop(frame)` / `gotoAndPlay(frame)`: jump to a specific frame index. - `currentFrame`: readable and writable. The setter throws if the value is outside `[