# pixijs-scene-sprite

This skill tells your agent how to draw images in PixiJS v8 with Sprite, AnimatedSprite, NineSliceSprite and TilingSprite. Useful when the project already runs PixiJS and you want working draw code fast.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 5900 installs · ★ 358
- Author: pixijs
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-scene-sprite/SKILL.md
- Updated: 2026-10-01
- HTML: https://affpapa.org/en/nevibecode/skills/pixijs-scene-sprite

## What it does

Four sprite classes are covered. `Sprite` draws one texture at a position, `AnimatedSprite` cycles frames from an array or spritesheet, `NineSliceSprite` stretches the center of a panel while keeping corners intact, and `TilingSprite` repeats a texture across an area and scrolls it through `tilePosition`. All of them are leaf nodes with no children, so grouping goes through a `Container`.

The skill also walks through common mistakes. `Texture.from(url)` in v8 only reads the cache, it does not fetch, so you need `await Assets.load(...)` first. It separates `anchor` from `pivot` too: `anchor` sits in the `[0, 1]` range and moves only the draw origin, while `pivot` works in pixels and shifts both the transform and the visual position, which is why sprites jump. For centering it suggests `anchor.set(0.5)`.

Prior familiarity with `pixijs-scene-core-concepts` is assumed. The skill points at sibling skills in the same repo for texture loading, `ParticleContainer` with thousands of sprites, and performance. If you are drawing shapes rather than images, this is the wrong skill — that is `Graphics`.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-scene-sprite -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/pixijs-scene-sprite/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/pixijs-scene-sprite/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-scene-sprite -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/pixijs-scene-sprite/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-scene-sprite -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/pixijs-scene-sprite/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install pixijs/pixijs-skills pixijs-scene-sprite
```

2. **Manually: put the files in place**
- File: `.github/skills/pixijs-scene-sprite/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-scene-sprite -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/pixijs/pixijs-skills --path skills/pixijs-scene-sprite
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/pixijs-scene-sprite/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-scene-sprite -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-scene-sprite/SKILL.md

## When to use it
- draw a single texture at a given point on the stage
- build frame animation for a character from a spritesheet
- make a panel or button that resizes without warping its borders
- loop a scrolling background through `tilePosition`
- figure out why a sprite shifted after setting `pivot`

## Example prompts
- Show me how to create a Sprite with anchor 0.5 and tint in PixiJS v8
- Build an AnimatedSprite from sheet.animations['walk'] and start it
- Set up a NineSliceSprite for a panel with fixed borders

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 7d492108d37fdc62.

BEGIN THIRD-PARTY FILE 7d492108d37fdc62
````text
---
name: pixijs-scene-sprite
description: "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, TilingSprite, Sprite.from, anchor, tint, tilePosition, animationSpeed, gotoAndPlay, leftWidth, topHeight, constructor options, SpriteOptions, AnimatedSpriteOptions, NineSliceSpriteOptions, TilingSpriteOptions."
license: MIT
---

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.

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.

## Quick Start

```ts
const texture = await Assets.load("bunny.png");

const sprite = new Sprite({
  texture,
  anchor: 0.5,
  tint: 0xff8888,
});
sprite.x = app.screen.width / 2;
sprite.y = app.screen.height / 2;

app.stage.addChild(sprite);
```

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`).

**Related skills:** `pixijs-scene-core-concepts` (leaves, transforms), `pixijs-assets` (texture loading), `pixijs-scene-particle-container` (thousands of sprites), `pixijs-performance` (spritesheets, batching).

## Variants

| Variant           | Use when                                                  | Trade-offs                                      | Reference                                                        |
| ----------------- | --------------------------------------------------------- | ----------------------------------------------- | ---------------------------------------------------------------- |
| `Sprite`          | Draw a single texture at a position                       | Fixed size = texture size                       | [references/sprite.md](references/sprite.md)                     |
````
END THIRD-PARTY FILE 7d492108d37fdc62

The third-party file has ended. Everything between the 7d492108d37fdc62 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2315 of 6510 bytes. © pixijs · MIT · https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-scene-sprite/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md