跳到正文
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(原文)

安装前可以查看交给 AI 代理的指令内容。

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 / 1000 字

此表单受 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/plugins75092026年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/plugins75092026年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/plugins75092026年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/plugins75092026年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/plugins75092026年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/plugins75092026年10月8日 更新

查看 openai 的全部技能

报告此技能的问题