pixijs-scene-sprite

PixiJS v8 provides three sprite classes for different image-drawing tasks, and this skill explains when and how to use each. Sprite is the default image-drawing leaf and the right choice for the large majority of 2D content; NineSliceSprite is a resizable UI-panel variant that preserves corner art while stretching the center; and TilingSprite repeats a texture across an area, with tilePosition driving scrolling for backgrounds, parallax, or repeating patterns. AnimatedSprite is a subclass of Sprite that cycles through a texture array or spritesheet animation frames, inheriting all Sprite properties such as anchor, tint, and position. All sprite classes are leaf nodes and cannot have children, so grouping multiple sprites requires wrapping them in a Container; the skill assumes familiarity with pixijs-scene-core-concepts.

The doc emphasizes a few core concepts and common mistakes. Position is typically set after construction when it depends on the live renderer size (such as app.screen.width / 2), though literal x/y can be passed in the options object. Sprite.anchor is normalized in the [0, 1] range and shifts only the texture draw origin with no position offset, whereas Container.pivot is in pixel space and shifts both the transform origin and the visual position, so centering should always use anchor.set(0.5); confusing the two is flagged as a high-severity mistake. Another high-severity pitfall is loading textures with Texture.from(url), which only reads the cache in v8, instead of awaiting Assets.load(...), whose return value is the texture. Sprite.from(id) likewise only reads the Assets cache and does not fetch.

Additional notes cover dynamic textures, where modifying a texture's frame or swapping its source does not automatically notify sprites unless texture.dynamic = true is set once or onViewUpdate() is called manually, and the v8 rename of NineSlicePlane to NineSliceSprite along with its switch to an options-object constructor taking texture, leftWidth, topHeight, rightWidth, and bottomHeight. Sprite, NineSliceSprite, and TilingSprite all set allowChildren = false. For thousands of identical sprites the doc redirects to ParticleContainer with Particle instances, and for drawing shapes or paths to Graphics. Use this skill whenever drawing images, animating frames, building resizable UI panels, or creating scrolling repeating backgrounds in PixiJS.