Skip to content
cccskills
FreePublished on GitHub

sprite-pipeline

Create 2D sprite animations from an approved character frame. Generate all frames together, normalize their size and alignment, and prepare preview sheets to check consistency before using the animation in a game.

OriginalShow the original description

Generate and normalize 2D sprite animations. Use when the user asks for full-strip generation from approved source frames, consistent anchor and scale normalization, or preview assets for browser-game animation.

See how to install

Good for

  • Create an animation from an approved character frame
  • Normalize frame size and anchor alignment
  • Match the first frame to an existing game sprite
  • Prepare a preview sheet for animation review

Files included (2)

  • SKILL.md3.3 KB
  • agents/openai.yaml234 B

SKILL.md (original)

Review the instructions the agent will receive before you install.

Sprite Pipeline

Overview

Use this skill for 2D sprite generation and normalization. This workflow is intentionally anchored around one approved frame and a whole-strip generation pass because frame-by-frame generation drifts too easily.

This skill is 2D-specific. If the request is for 3D characters, meshes, or materials, route back through ../game-studio/SKILL.md.

Core Workflow

  1. Start from an approved in-game seed frame.
    • The seed frame should already reflect the right silhouette, palette, costume, and proportions.
  2. Build a larger transparent reference canvas around that frame.
    • Use ../../scripts/build_sprite_edit_canvas.py.
  3. Ask for the full animation strip in one edit request.
    • Do not generate each frame independently unless the user explicitly accepts lower consistency.
  4. Normalize the result into fixed-size game frames.
    • Use ../../scripts/normalize_sprite_strip.py.
    • Use one shared scale across the whole strip.
    • Align frames with one shared anchor, typically bottom-center.
  5. Optionally lock frame 01 back to the shipped seed frame.
    • Do this when the animation should begin from the exact idle or base pose already in game.
  6. Render a preview sheet and inspect the animation in-engine before approving it.
    • Use ../../scripts/render_sprite_preview_sheet.py.

Prompting Rules

Always preserve these invariants in the prompt:

  • same character
  • same facing direction
  • same palette family
  • same silhouette family
  • same readable face or key features
  • same outfit proportions
  • transparent background
  • exact frame count and slot layout

Always ask for:

  • one strip at once
  • a transparent canvas
  • no scenery, labels, or poster composition
  • crisp pixel-art clusters for pixel work
  • production asset tone, not concept art

Using Image Generation

For live asset generation or edits, use the installed imagegen skill in this workspace. This skill defines the game-specific process; imagegen handles the API-backed generation or edit execution.

Script Recipes

Create a reference canvas:

python3 scripts/build_sprite_edit_canvas.py \
  --seed output/sprites/idle-01.png \
  --out output/sprites/hurt-edit-canvas.png \
  --frames 4 \
  --slot-size 256 \
  --canvas-size 1024

Normalize a raw strip:

python3 scripts/normalize_sprite_strip.py \
  --input output/sprites/hurt-raw.png \
  --out-dir output/sprites/hurt \
  --frames 4 \
  --frame-size 64 \
  --anchor output/sprites/idle-01.png \
  --lock-frame1

Render a preview sheet:

python3 scripts/render_sprite_preview_sheet.py \
  --frames-dir output/sprites/hurt \
  --out output/sprites/hurt-preview.png \
  --columns 4

Quality Gates

  • proportions stay stable across frames
  • frame-to-frame size does not drift
  • action reads clearly at game scale
  • transparency is preserved
  • frame 01 matches the shipped sprite when lockback is enabled
  • preview looks correct before any in-engine asset index update

References

  • Detailed workflow: ../../references/sprite-pipeline.md
  • Shared frontend context: ../game-ui-frontend/SKILL.md

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Review charts, diagrams, and dashboards for accessibility, including color contrast, keyboard access, and text alternatives. Get specific guidance for preserving key findings in screen readers, static exports, and reduced-motion views.

  • Reviewing dashboard colors and keyboard access
  • Writing chart alt text and long descriptions
  • Preparing accessible figures for PDF reports
openai/plugins7.5KUpdated Oct 8, 2026

Give a photo collection a consistent look using Adobe tools to adjust color, tone, presets, and optional crops. Review a before-and-after sample before processing the full set, then receive links to the edited images.

  • Giving travel photos a consistent look
  • Unifying photos taken in mixed lighting
  • Applying a warm or cinematic style across a photo set
openai/plugins7.5KUpdated Oct 8, 2026

Visualize a logo, sketch, or design on products such as mugs, shirts, and business cards. Review a pilot image, generate a visually consistent set, and collect the results on a shareable Firefly Board.

  • Preview a logo on mugs and shirts
  • Turn a hand-drawn sketch into product mockups
  • Create consistent brand presentation images
openai/plugins7.5KUpdated Oct 8, 2026

Prepare images and videos for social platforms using Adobe tools. Create image crops that keep the subject in view, expand backgrounds when available, preview a full-set sample, and resize videos while preserving their aspect ratio.

  • Creating image variants for multiple social platforms
  • Cropping photos for Instagram Stories
  • Preparing LinkedIn images and YouTube thumbnails
openai/plugins7.5KUpdated Oct 8, 2026

Create flyers, social posts, business cards, and other visuals from Adobe Express templates. Choose a template, customize its text and background color, and receive a design link, with additional editing and export options depending on the available tools.

  • Creating an event flyer
  • Designing an Instagram post
  • Customizing business card text and colors
openai/plugins7.5KUpdated Oct 8, 2026

Turn an uploaded video into three highlight edits with Adobe Quick Cut. Choose a target length and style, then compare versions that feature different moments and download the ones you prefer.

  • Creating a short highlight video for social media
  • Condensing interview footage into a highlight reel
  • Comparing three edits with different moment selections
openai/plugins7.5KUpdated Oct 8, 2026

See all skills by openai

Report a problem with this skill