skills.rest
alexkafer
alexkaferCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

pixijs-scene-sprite

Render PixiJS v8 sprite variants for static, animated, nine-slice, and tiling scenes.

Updated Mar 13, 2022
Search Tags:#animation#anchor#pixijs#nineslice#sprite rendering#tiling background#texture loading
One-click install
npx skills add https://github.com/alexkafer/alexkafer-web --skill pixijs-scene-sprite-alexkafer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pixijs-scene-sprite
Source: https://github.com/alexkafer/alexkafer-web/tree/main/.agents/skills/pixijs-scene-sprite
Command: npx skills add https://github.com/alexkafer/alexkafer-web --skill pixijs-scene-sprite-alexkafer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you render the right PixiJS v8 sprite type (static, animated, nine-slice UI, or tiling background) without common setup mistakes around assets, anchors, and resizable behavior.

Core Features & Use Cases

  • Choose the correct sprite variant: use Sprite for static images, AnimatedSprite for frame-based playback, NineSliceSprite for crisp resizable panels, and TilingSprite for repeating/scrolling backgrounds.
  • Use anchors correctly: apply normalized anchor for sprite draw origin and avoid confusion with pivot from Container.
  • Avoid invisible sprites and animation issues: load textures deterministically with Assets.load and configure playback (autoPlay, play()) and frame timing (animationSpeed, FrameObject.time in milliseconds).

Quick Start

Create a Sprite from a texture you loaded via Assets.load("bunny.png"), set anchor: 0.5 and an optional tint, then add it to app.stage.

Frequently Asked Questions about pixijs-scene-sprite

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

FAQPage Schema
Why does my PixiJS sprite render blank or invisible after adding it to the stage?▼

PixiJS sprites appear blank when textures are not fully loaded. You must use `Assets.load` to ensure deterministic texture availability before instantiating sprites and adding them to the stage.

How do I choose between Sprite, AnimatedSprite, NineSliceSprite, and TilingSprite in PixiJS v8?▼

Use `Sprite` for static images, `AnimatedSprite` for frame-based character playback, `NineSliceSprite` for crisp resizable UI panels, and `TilingSprite` for repeating or scrolling parallax background layers.

How do I set the draw origin for a PixiJS sprite using anchor?▼

Apply the normalized `anchor` value on the sprite to set its draw origin, such as `0.5` for centering. Avoid confusing the sprite `anchor` with the `pivot` property used on `Container` objects.

How do I configure animation speed and playback for an AnimatedSprite in PixiJS?▼

Configure frame-based playback by setting `animationSpeed` and using `FrameObject.time` in milliseconds. Control playback behavior by setting `autoPlay` or calling the `play()` method after creating the AnimatedSprite.

Can I use NineSliceSprite for resizable game UI dialogs in PixiJS?▼

Yes, `NineSliceSprite` is specifically designed for crisp resizable UI panels and dialogs. It maintains the integrity of the panel's edges and corners when the sprite geometry is scaled or resized.

Related Skills

Explore More Design & Creative Skills→
nolantaitnolantait
125

bevy-sprites

Configure Bevy 0.19 sprite size, anchors, z-ordering, and texture atlases.

Community
Intermediate
matthewharwoodmatthewharwood
1

pixijs-events

Handle per-object pointer, mouse, touch, and wheel events in PixiJS v8.

Community
Intermediate
pixijspixijs
302

pixijs-scene-container

Group and transform PixiJS v8 display objects with Container scene graphs.

Official
Advanced
ayofemiadeayofemiade

pixijs-2d

Create WebGL-accelerated 2D graphics, particle systems, and interactive canvas applications with PixiJS.

Community
Advanced