본문으로 건너뛰기
cccskills
무료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.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

원문원문 설명 보기

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.

설치 방법 보기

이럴 때 유용합니다

  • 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

포함된 파일(2)

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

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

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.5천2026년 10월 8일 업데이트

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.5천2026년 10월 8일 업데이트

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.5천2026년 10월 8일 업데이트

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.5천2026년 10월 8일 업데이트

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.5천2026년 10월 8일 업데이트

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.5천2026년 10월 8일 업데이트

openai의 스킬 모두 보기

이 스킬의 문제 신고