sprite-sheet-layout

Explains the packed sprite sheet format used to read, import, and render Pokemon sprites.

2|1|Updated Jun 28, 2026
One-click install
npx skills add https://github.com/lxsmnsyc/overwander --skill sprite-sheet-layout-lxsmnsyc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sprite-sheet-layout
Source: https://github.com/lxsmnsyc/overwander/tree/main/.agents/skills/sprite-sheet-layout
Command: npx skills add https://github.com/lxsmnsyc/overwander --skill sprite-sheet-layout-lxsmnsyc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Pokemon sprite sheets in this project are packed bags of deduplicated pictures rather than uniform grids, so naive frame arithmetic like frame * frameWidth produces broken rendering. This Skill documents the actual layout of sheet.json, frames.bin, and the coat PNGs so anything that reads, imports, or draws a sprite does it correctly. ## Core Features & Use Cases - Format rules: Defines how pictures, clips, anchors, and coats relate, including why a clip's box is frameWidth x frameHeight and why sourceFrameWidth is never a layout measure. - Cast tiers: Documents the six minimum clips (Idle, Attack, Walk, Sleep, Hurt, Hop) and the four additional ones a renderer may assume, plus the append-only SpriteAnim numbering. - Import workflow: Covers pnpm import-sprites, --dry-run, and pnpm compact-sprites, which copy sheets from the SpriteCollab checkout and rewrite coats.json stamps. - Use Case: When writing a renderer that draws a species sprite, use this Skill to read frames through the sheet description rather than grid arithmetic, and to handle mirrored frames and out-of-box anchors correctly. ## Quick Start Ask the assistant to explain how to read a frame from a Pokemon sprite sheet before writing rendering code that draws a species sprite.

Frequently Asked Questions about sprite-sheet-layout

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

FAQPage Schema
How do I read a frame from a packed sprite sheet?▼

Read each frame through the sheet description in sheet.json, never by arithmetic like frame * frameWidth. Frames of one clip have different sizes and positions, and a picture may be stored where another clip placed it.

How do I import Pokemon sprites from SpriteCollab?▼

Run pnpm import-sprites from the repository with the SpriteCollab checkout beside it. Use --dry-run to preview, and pnpm compact-sprites to record sheets and shrink PNGs. The script replaces the tree and rewrites coats.json stamps.

Why does frame times frameWidth break sprite rendering?▼

Sheets are packed bags of deduplicated pictures, not grids. Two frames of the same clip differ in size and location, and pictures are shared across clips, so grid arithmetic points at the wrong pixels.

What is the difference between frameWidth and sourceFrameWidth?▼

frameWidth x frameHeight is the clip's actual box used for placement, measurement, and hit-testing. sourceFrameWidth is the generous cell the artist drew in, used only for shadow width and sparkle spread, never for layout.

Which animation clips can a renderer assume exist?▼

A renderer may assume ten clips: the six minimum (Idle, Attack, Walk, Sleep, Hurt, Hop) plus Charge, Double, Rotate, and Swing. Never assume clips beyond these ten; query the sprite with SpeciesSpriteAnimation.has instead.

How are shiny and female sprite coats stored?▼

Every coat shares one packed layout. Shiny and female variants are separate PNG files over the same frames, so swapping the image changes nothing else. spriteImagePath picks the file for a species, shiny, and female combination.