Skip to main content
skill CX Codex

animated-sprite-generation — Claude Code skill for sprite animation

Guides you through building looping frame strips for isometric game objects. Use it for water, fire, smoke, windmills, or flags.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add 0xheycat/isometric-game-skills --skill animated-sprite-generation -a claude-code
Open on GitHub

What animated-sprite-generation does

The skill lays out a frame-based workflow: hold the seed steady, vary the motion from frame to frame, and keep lighting and silhouette consistent. Assemble the images into a horizontal sprite sheet, then check the transition from the final frame back to the first. The documented command is convert frame_*.png +append spritesheet.png.

For ambient motion, the guide recommends low-FPS playback. It warns against animating ground tiles because animating every tile hurts performance; animate overlay objects instead. That constraint affects which parts of a scene should become sprites.

What it helps with

  • assemble animation frames into a horizontal sprite sheet
  • make water motion loop without a visible jump
  • animate fire, smoke, a windmill, or a flag
  • keep lighting and silhouette consistent across frames

Example prompts for the agent

  • Create a looping water animation for my isometric game and explain how to assemble its frames into a sprite sheet.
  • Prepare flag animation frames; vary the motion while keeping the silhouette and lighting unchanged.
  • Check whether the last and first frames of this fire animation transition smoothly.

How to install animated-sprite-generation

1Skills CLI (Vercel)

npx skills add 0xheycat/isometric-game-skills --skill animated-sprite-generation -a claude-code

2Manually: put the files in place

~/.claude/skills/animated-sprite-generation/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/animated-sprite-generation/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about animated-sprite-generation

How do I install animated-sprite-generation in Claude Code?

Run npx skills add 0xheycat/isometric-game-skills --skill animated-sprite-generation -a claude-code. The skill file is at ~/.claude/skills/animated-sprite-generation/SKILL.md.

What does animated-sprite-generation do?

It guides the creation of looping frame animations for isometric game objects and the assembly of those frames into a horizontal sprite sheet.

Should I animate ground tiles with this skill?

No. It recommends animating objects placed over the ground, since animating every ground tile hurts performance.

Source text

SKILL.md · MIT
---
name: animated-sprite-generation
description: Use when creating looping animated isometric sprites (water, fire, windmills, flags) as frame strips that play back smoothly in-engine.
license: MIT
---

# Animated Sprite Generation

![Animated Sprite Generation demo](assets/demo.png)

## Overview

Animation in 2D isometric games is frame-based, not skeletal. This skill produces short, seamless LOOPS as frame strips. Do NOT animate ground tiles - animate objects on top of them, or performance and visual noise explode.

## When to Use

- You need animated water, fire, smoke, windmills, or flags.
- You want idle/ambient motion without a 3D engine.
- A sprite must loop seamlessly without a visible jump.

## Process

1. Decide frame count for a clean loop (4-8 frames is plenty for ambient motion).
2. Generate frames with a FIXED seed, varying only the motion phrase per frame (e.g. wave phase, blade angle).
3. Keep the silhouette and lighting identical - only the moving part changes.
4. Assemble frames into a horizontal strip / sprite sheet.
5. Confirm frame 1 and frame N loop seamlessly (last frame flows into first).
6. Play back in-engine at a low FPS (6-12) for ambient motion.
7. NEVER animate full ground tiles - animate overlay objects only.

```bash
# assemble frames into a horizontal strip
convert frame_*.png +append spritesheet.png
```

## Rationalizations (Stop Lying to Yourself)

| Excuse | Reality |
|---|---|
| "More frames = smoother = better" | More frames = more VRAM and bigger atlas for zero visible gain on ambient loops. |
| "I will animate the water tiles directly" | Animating every ground tile tanks performance. Use an overlay object. |

## Red Flags - STOP if you catch yourself:

- Animating ground tiles instead of overlay objects.
- Loop visibly jumps between last and first frame.
- Silhouette or light changes between frames.

## Verification

You are NOT done until every box is checked:

- [ ] The loop is seamless (last frame flows into first).
- [ ] Only the intended part moves; silhouette/light stay fixed.
- [ ] Ground tiles are NOT animated; only overlay objects are.

© 0xheycat · MIT · 0xheycat/isometric-game-skills

Similar skills

All skills for Game dev and 3D: Unity, Unreal, Godot, Blender →

From the same set21

godot4-isometric-tilemap Sets up 2:1 isometric rendering in Godot 4 with TileMapLayer and Y-sort, so draw order and picking stop fighting you. CX Codex +1 ★ 41repo stars depth-sorting-occlusion Fixes sprite layering in isometric scenes so characters correctly render behind walls, trees, and multi-tile structures. CX Codex +1 ★ 41repo stars comfyui-lowvram-setup This skill configures ComfyUI for SDXL isometric asset generation with limited VRAM. Use it when setting up a 12GB RTX 3060 or keeping a tile set consistent. CX Codex +1 ★ 41repo stars canvas2d-isometric-renderer Builds the draw loop for an isometric tilemap on Canvas 2D: ground tiles first, depth-sorted sprites after. CX Codex +1 ★ 41repo stars canvas-performance-optimization Helps eliminate frame drops in isometric Canvas games by culling off-screen tiles, batching draw calls, and removing render-loop allocations. CX Codex +1 ★ 41repo stars camera-pan-zoom-controls Skill for isometric cameras: drag-to-pan, scroll-to-zoom toward the cursor, and clamp to map bounds. Keeps tiles pixel-aligned, no shimmer. CX Codex +1 ★ 41repo stars autotiling-transitions A coding-agent skill that sets the rule for picking transition tiles where grass, water and sand meet. Useful when a map reads as a checkerboard of hard seams. CX Codex +1 ★ 41repo stars asset-pipeline-automation Builds a single-command pipeline for game assets, taking raw sprites to a packed atlas and JSON map with strict validation. CX Codex +1 ★ 41repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor