pixijs-scene-sprite

Name: pixijs-scene-sprite
Author: pixijs

2.9kinstalls15forks

How to install pixijs-scene-sprite?

pixijs/pixijs-skills/pixijs-scene-sprite

$npx -y skills add pixijs/pixijs-skills --skill pixijs-scene-sprite

Installs into the current project.

Summary

Use this skill when drawing images in PixiJS v8. Covers Sprite with anchor/tint/texture, AnimatedSprite for frame animation, NineSliceSprite for resizable UI panels, TilingSprite for scrolling/repeating backgrounds. Triggers on: Sprite, AnimatedSprite, NineSliceSprite, TilingSpri

Files · 1

View on GitHub

SKILL.md

1	PixiJS has three sprite classes for different drawing tasks. `Sprite` is the default image-drawing leaf; `NineSliceSprite` is a resizable UI-panel variant that preserves corner art; `TilingSprite` repeats a texture across an area. The `AnimatedSprite` subclass of `Sprite` cycles through texture frames for frame-based animation.
2
3	Assumes familiarity with `pixijs-scene-core-concepts`. All sprite classes are leaf nodes; they cannot have children. Wrap multiple sprites in a `Container` to group them.
4
5	## Quick Start
6
7	```ts
8	const texture = await Assets.load("bunny.png");
9
10	const sprite = new Sprite({
11	texture,
12	anchor: 0.5,
13	tint: 0xff8888,
14	});
15	sprite.x = app.screen.width / 2;
16	sprite.y = app.screen.height / 2;
17
18	app.stage.addChild(sprite);
19	```
20
21	Position is set after construction because `app.screen.width / 2` depends on the live renderer size. Literal positions can go directly in the options object via `x`/`y` (inherited from `Container`).
22
23	Related skills: `pixijs-scene-core-concepts` (leaves, transforms), `pixijs-assets` (texture loading), `pixijs-scene-particle-container` (thousands of sprites), `pixijs-performance` (spritesheets, batching).
24
25	## Variants
26
27	\| Variant \| Use when \| Trade-offs \| Reference \|
28	\| ----------------- \| --------------------------------------------------------- \| ----------------------------------------------- \| ---------------------------------------------------------------- \|
29	\| `Sprite` \| Draw a single texture at a position \| Fixed size = texture size \| [references/sprite.md](references/sprite.md) \|
30	\| `AnimatedSprite` \| Frame-based animation from a texture array or spritesheet \| Pre-rendered frames only; no tweening \| [references/animated-sprite.md](references/animated-sprite.md) \|
31	\| `NineSliceSprite` \| Resizable UI panels, buttons, dialog frames \| Border width is fixed; center stretches \| [references/nineslice-sprite.md](references/nineslice-sprite.md) \|
32	\| `TilingSprite` \| Scrolling backgrounds, parallax, repeating patterns \| Single texture repeated; `tilePosition` scrolls \| [references/tiling-sprite.md](references/tiling-sprite.md) \|
33
34	`AnimatedSprite` is a subclass of `Sprite`; all `Sprite` properties (anchor, tint, position) apply.
35
36	Each variant's constructor options are documented in its sub-reference file (`references/{variant}.md`). All variants also accept the `Container` options (`position`, `scale`, `tint`, `label`, `filters`, `zIndex`, etc.) — see `skills/pixijs-scene-core-concepts/references/constructor-options.md`.
37
38	## When to use what
39
40	- "I want to draw a single image at a position" → `Sprite`. The default choice for 90% of 2D game and app content.
41	- "I want to animate a character through a series of frames" → `AnimatedSprite`. Load a spritesheet via Assets and pass `sheet.animations['walk']`. See `references/animated-sprite.md`.
42	- "I want a UI button/panel that resizes without stretching the borders" → `NineSliceSprite`. Set border widths, then set `width`/`height`. See `references/nineslice-sprite.md`.
43	- "I want a scrolling repeating background" → `TilingSprite`. Animate `tilePosition` to scroll. See `references/tiling-sprite.md`.
44	- "I want thousands of identical sprites" → Use `ParticleContainer` with `Particle` instances (see `pixijs-scene-particle-container`), not plain sprites.
45	- "I want to draw shapes or paths" → Use `Graphics` (see `pixijs-scene-graphics`), not a sprite.
46
47	## Quick concepts
48
49	### Anchor vs pivot
50
51	`Sprite.anchor` is normalized `[0, 1]` and shifts only the texture draw origin; no position offset. `Container.pivot` is pixel-space and shifts both the transform origin and the visual position. For centering a sprite, always use `anchor.set(0.5)`.
52
53	### Loading before creating
54
55	`Sprite.from(id)` only reads the Assets cache; it does not fetch. Always `await Assets.load(...)` first, or pass the returned `Texture` directly to `new Sprite(texture)`.
56
57	### Dynamic textures
58
59	Once a texture is loaded, modifying its `frame` or swapping its source does not automatically notify sprites. Set `texture.dynamic = true` once, or call `sprite['onViewUpdate']()` manually after changes.
60
61	## Common Mistakes
62
63	### [HIGH] Using `Texture.from(url)` to loa

People who liked this also viewed

6 picks

Type

pixijs-scene-sprite

2.9kinstalls15forks

View on GitHub

How to install pixijs-scene-sprite?

pixijs/pixijs-skills/pixijs-scene-sprite

$npx -y skills add pixijs/pixijs-skills --skill pixijs-scene-sprite

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	PixiJS has three sprite classes for different drawing tasks. `Sprite` is the default image-drawing leaf; `NineSliceSprite` is a resizable UI-panel variant that preserves corner art; `TilingSprite` repeats a texture across an area. The `AnimatedSprite` subclass of `Sprite` cycles through texture frames for frame-based animation.
2
3	Assumes familiarity with `pixijs-scene-core-concepts`. All sprite classes are leaf nodes; they cannot have children. Wrap multiple sprites in a `Container` to group them.
4
5	## Quick Start
6
7	```ts
8	const texture = await Assets.load("bunny.png");
9
10	const sprite = new Sprite({
11	texture,
12	anchor: 0.5,
13	tint: 0xff8888,
14	});
15	sprite.x = app.screen.width / 2;
16	sprite.y = app.screen.height / 2;
17
18	app.stage.addChild(sprite);
19	```
20
21	Position is set after construction because `app.screen.width / 2` depends on the live renderer size. Literal positions can go directly in the options object via `x`/`y` (inherited from `Container`).
22
23	Related skills: `pixijs-scene-core-concepts` (leaves, transforms), `pixijs-assets` (texture loading), `pixijs-scene-particle-container` (thousands of sprites), `pixijs-performance` (spritesheets, batching).
24
25	## Variants
26
27	\| Variant \| Use when \| Trade-offs \| Reference \|
28	\| ----------------- \| --------------------------------------------------------- \| ----------------------------------------------- \| ---------------------------------------------------------------- \|
29	\| `Sprite` \| Draw a single texture at a position \| Fixed size = texture size \| [references/sprite.md](references/sprite.md) \|
30	\| `AnimatedSprite` \| Frame-based animation from a texture array or spritesheet \| Pre-rendered frames only; no tweening \| [references/animated-sprite.md](references/animated-sprite.md) \|
31	\| `NineSliceSprite` \| Resizable UI panels, buttons, dialog frames \| Border width is fixed; center stretches \| [references/nineslice-sprite.md](references/nineslice-sprite.md) \|
32	\| `TilingSprite` \| Scrolling backgrounds, parallax, repeating patterns \| Single texture repeated; `tilePosition` scrolls \| [references/tiling-sprite.md](references/tiling-sprite.md) \|
33
34	`AnimatedSprite` is a subclass of `Sprite`; all `Sprite` properties (anchor, tint, position) apply.
35
36	Each variant's constructor options are documented in its sub-reference file (`references/{variant}.md`). All variants also accept the `Container` options (`position`, `scale`, `tint`, `label`, `filters`, `zIndex`, etc.) — see `skills/pixijs-scene-core-concepts/references/constructor-options.md`.
37
38	## When to use what
39
40	- "I want to draw a single image at a position" → `Sprite`. The default choice for 90% of 2D game and app content.
41	- "I want to animate a character through a series of frames" → `AnimatedSprite`. Load a spritesheet via Assets and pass `sheet.animations['walk']`. See `references/animated-sprite.md`.
42	- "I want a UI button/panel that resizes without stretching the borders" → `NineSliceSprite`. Set border widths, then set `width`/`height`. See `references/nineslice-sprite.md`.
43	- "I want a scrolling repeating background" → `TilingSprite`. Animate `tilePosition` to scroll. See `references/tiling-sprite.md`.
44	- "I want thousands of identical sprites" → Use `ParticleContainer` with `Particle` instances (see `pixijs-scene-particle-container`), not plain sprites.
45	- "I want to draw shapes or paths" → Use `Graphics` (see `pixijs-scene-graphics`), not a sprite.
46
47	## Quick concepts
48
49	### Anchor vs pivot
50
51	`Sprite.anchor` is normalized `[0, 1]` and shifts only the texture draw origin; no position offset. `Container.pivot` is pixel-space and shifts both the transform origin and the visual position. For centering a sprite, always use `anchor.set(0.5)`.
52
53	### Loading before creating
54
55	`Sprite.from(id)` only reads the Assets cache; it does not fetch. Always `await Assets.load(...)` first, or pass the returned `Texture` directly to `new Sprite(texture)`.
56
57	### Dynamic textures
58
59	Once a texture is loaded, modifying its `frame` or swapping its source does not automatically notify sprites. Set `texture.dynamic = true` once, or call `sprite['onViewUpdate']()` manually after changes.
60
61	## Common Mistakes
62
63	### [HIGH] Using `Texture.from(url)` to loa

People who liked this also viewed

6 picks

Type