pixel-art-sprites

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

When this skill is activated, always start your first response with the 🧢 emoji.

当激活本技能时，首次回复必须以🧢表情开头。

Pixel Art Sprites

像素画精灵

A practical guide to creating pixel art sprites, animating them for games, building reusable tilesets, and managing constrained color palettes. This is not general digital art advice - it focuses on the specific technical and aesthetic constraints of low-resolution raster art where every pixel is a deliberate design decision.

Pixel art looks simple but punishes sloppiness. A single misplaced pixel breaks a silhouette, a wrong hue muddies readability at 1x scale, and an animation with inconsistent volume destroys the illusion of life. This skill covers the rules that prevent those failures.

这是一份关于创建像素画精灵、为游戏制作精灵动画、构建可复用瓦片集（tileset），以及管理受限颜色调色板的实用指南。本指南并非通用数字艺术建议——它聚焦于低分辨率光栅图的特定技术与美学限制，这类图像中每一个像素都是经过深思熟虑的设计决策。

像素画看似简单，但对草率的操作零容忍。一个错位的像素就会破坏轮廓，错误的色调会降低1倍缩放时的可读性，而体积不一致的动画会打破鲜活的错觉。本技能涵盖了避免这些问题的规则。

When to use this skill

何时使用本技能

Trigger this skill when the user:

Wants to create a pixel art character sprite or object
Needs to build a sprite sheet with animation frames
Asks about walk cycles, attack animations, or idle animations in pixel art
Wants to design a tileset for a 2D tile-based game
Needs help choosing or constraining a pixel art color palette
Asks about dithering techniques or anti-aliasing in pixel art
Wants to export sprites for a game engine (Unity, Godot, Phaser)
Asks about sub-pixel animation or pixel-perfect rendering

Do NOT trigger this skill for:

High-resolution digital painting, vector illustration, or 3D modeling
General game design questions not related to sprite art (use system-design or gamedev skills)

当用户有以下需求时触发本技能：

想要创建像素画角色精灵或物体
需要制作包含动画帧的精灵表（sprite sheet）
询问像素画中的行走循环、攻击动画或待机动画相关问题
想要为2D瓦片式游戏设计tileset
需要帮助选择或限定像素画颜色调色板
询问像素画中的抖动技术或抗锯齿相关问题
想要为游戏引擎（Unity、Godot、Phaser）导出精灵资源
询问子像素动画或像素完美渲染相关问题

以下情况请勿触发本技能：

高分辨率数字绘画、矢量插画或3D建模
与精灵艺术无关的通用游戏设计问题（请使用系统设计或游戏开发相关技能）

Key principles

核心原则

Every pixel is intentional - At 16x16 or 32x32 resolution, there is no room for ambiguity. Each pixel must serve the silhouette, shading, or detail. If removing a pixel does not hurt readability, it should not be there. Start with the silhouette (solid fill), then add internal detail only where it improves recognition at 1x zoom.
Constrain your palette ruthlessly - Limiting colors to 8-16 is not a nostalgic affectation - it enforces visual cohesion across all sprites in a project. Pick a palette before drawing the first sprite. Every color in the palette must have a clear role: base, shadow, highlight, outline, and at most 2-3 accent hues. Adding a color mid-project breaks consistency.
Animate volume, not lines - Beginners animate by shifting outlines. Good sprite animation preserves the volume (total pixel mass) of the character across frames. A walk cycle should not make the character appear to grow and shrink. Check by toggling between frames rapidly - the silhouette should feel stable.
Tiles must be seamless at every edge - A tileset that looks good in isolation but produces visible seams when repeated has failed its only job. Design tiles from the edges inward: lock the border pixels first, then fill the interior. Test with a 3x3 grid of the same tile before considering it done.
Respect the grid - Pixel art lives on a strict grid. Rotation by non-90-degree angles, non-integer scaling, and sub-pixel positioning in engines all destroy pixel crispness. Export at 1x and scale with nearest-neighbor interpolation only. Configure the game engine's texture filter to "point/nearest" not "bilinear".

每一个像素都有其意义 - 在16x16或32x32的分辨率下，没有模糊的空间。每个像素都必须服务于轮廓、阴影或细节。如果移除某个像素不会影响可读性，那它就不应该存在。从轮廓（实心填充）开始绘制，仅在能提升1倍缩放辨识度的位置添加内部细节。
严格限制调色板 - 将颜色数量限制在8-16种并非怀旧噱头——它能确保项目中所有精灵的视觉一致性。在绘制第一个精灵前就确定调色板。调色板中的每种颜色都必须有明确的用途：底色、阴影、高光、轮廓，最多再加上2-3种强调色。在项目中途添加颜色会破坏一致性。
围绕体积而非线条做动画 - 新手通常通过移动轮廓来做动画。优秀的精灵动画会在各帧之间保持角色的体积（总像素量）一致。行走循环不应让角色看起来忽大忽小。可以通过快速切换帧来检查——轮廓应保持稳定。
瓦片必须在所有边缘无缝拼接 - 单独看效果很好但重复排列时出现明显接缝的tileset是不合格的。从边缘向内设计瓦片：先锁定边框像素，再填充内部。在完成前，用3x3的相同瓦片网格进行测试。
遵循网格规则 - 像素画存在于严格的网格之上。非90度旋转、非整数缩放，以及引擎中的子像素定位都会破坏像素的清晰度。以1倍尺寸导出，仅使用最近邻插值法进行缩放。将游戏引擎的纹理过滤器设置为“point/nearest”而非“bilinear”。

Core concepts

核心概念

Sprite sizes and common canvases

精灵尺寸与常用画布

Size	Use case	Notes
8x8	Small items, tiny icons, minimal tiles	NES-era constraint
16x16	Standard characters, items, basic tiles	Most common indie size
32x32	Detailed characters, large tiles	Good balance of detail and constraint
48x48 / 64x64	Boss sprites, detailed portraits	Approaches illustration territory

A character sprite sheet typically uses one fixed canvas per frame. All frames in an animation must share the same canvas size to prevent jitter during playback.

尺寸	使用场景	说明
8x8	小型物品、微型图标、极简瓦片	NES时代的限制
16x16	标准角色、物品、基础瓦片	独立游戏中最常用的尺寸
32x32	细节丰富的角色、大型瓦片	在细节与限制之间取得良好平衡
48x48 / 64x64	Boss精灵、精细肖像	接近插画领域

角色精灵表通常为每帧使用固定尺寸的画布。动画中的所有帧必须使用相同的画布尺寸，以避免播放时出现抖动。

Anatomy of a sprite sheet

精灵表的结构

A sprite sheet is a single image containing all animation frames laid out in a grid. Each row is usually one animation state (idle, walk, attack). Each column is one frame in that animation.

[idle-0][idle-1][idle-2][idle-3]
[walk-0][walk-1][walk-2][walk-3][walk-4][walk-5]
[attack-0][attack-1][attack-2][attack-3]

The game engine slices the sheet by cell size (e.g., 32x32) and plays frames in sequence. Metadata (frame count per row, frame duration) is defined in the engine, not the image.

精灵表是一张包含所有动画帧的单张图片，这些帧以网格形式排列。通常每一行代表一种动画状态（待机、行走、攻击），每一列代表该动画中的一帧。

[idle-0][idle-1][idle-2][idle-3]
[walk-0][walk-1][walk-2][walk-3][walk-4][walk-5]
[attack-0][attack-1][attack-2][attack-3]

游戏引擎会根据单元格尺寸（如32x32）切割精灵表，并按顺序播放帧。元数据（每行的帧数、帧持续时间）在引擎中定义，而非图片本身。

Tileset structure

Tileset结构

Tilesets use a fixed grid (usually 16x16 or 32x32 per tile). Standard tileset categories:

Ground - grass, dirt, stone, water (need seamless tiling)
Edges/transitions - where two terrain types meet (requires 47 auto-tile variants for full coverage, or 16 for simplified)
Decoration - flowers, rocks, signs (placed on top of ground tiles)
Walls/obstacles - collision-relevant tiles

Tileset使用固定网格（通常每个瓦片为16x16或32x32）。标准tileset分类：

地面 - 草地、泥土、石头、水（需要无缝拼接）
边缘/过渡 - 两种地形的交界处（完整覆盖需要47种自动瓦片变体，简化版为16种）
装饰 - 花朵、岩石、标牌（放置在地面瓦片之上）
墙壁/障碍物 - 与碰撞相关的瓦片

Color ramp anatomy

颜色渐变带结构

A color ramp is a sequence of 3-5 colors from shadow to highlight for a single hue:

[dark shadow] -> [shadow] -> [base] -> [highlight] -> [bright highlight]

Each step shifts not just lightness but also hue. Shadows shift toward cool (blue/purple). Highlights shift toward warm (yellow/white). This "hue shifting" creates vibrant, natural-looking shading that flat lightness scaling cannot achieve.

颜色渐变带是单一色调从阴影到高光的3-5种颜色序列：

[深阴影] -> [阴影] -> [底色] -> [高光] -> [亮高光]

每一步不仅改变亮度，还会改变色调。阴影向冷色调（蓝色/紫色）偏移，高光向暖色调（黄色/白色）偏移。这种“色调偏移”能创造出充满活力、自然的阴影效果，是单纯的亮度缩放无法实现的。

Common tasks

常见任务

Create a character sprite with proper shading

创建带有恰当阴影的角色精灵

Start with silhouette, then layer shading using a 3-4 step color ramp with hue shifting.

Workflow:

Draw the silhouette as a solid color block on transparent background
Verify the silhouette is readable at 1x zoom - if you cannot tell what it is, redesign
Pick a base color, then create the ramp: shadow (darker + hue shift cool), base, highlight (lighter + hue shift warm)
Apply light source from top-left (convention in 2D games) - upper-left edges get highlight, lower-right edges get shadow
Add the darkest outline color on exterior edges only; interior lines use the shadow color, not black

Never use pure black (#000000) for outlines. Use a very dark, slightly saturated color (e.g., dark navy or dark brown) that complements the palette. Pure black creates a harsh, flat look.

从轮廓开始，然后使用带有色调偏移的3-4步颜色渐变带分层添加阴影。

工作流程：

在透明背景上绘制实心色块作为轮廓
验证轮廓在1倍缩放时的可读性——如果你无法识别它是什么，就重新设计
选择底色，然后创建渐变带：阴影（更暗+冷色调偏移）、底色、高光（更亮+暖色调偏移）
采用左上方向的光源（2D游戏中的惯例）——左上边缘添加高光，右下边缘添加阴影
仅在外部边缘使用最暗的轮廓色；内部线条使用阴影色，而非黑色

永远不要使用纯黑色（#000000）作为轮廓色。使用一种非常深、略带饱和度的颜色（如深海军蓝或深棕色）来搭配调色板。纯黑色会营造出生硬、扁平的视觉效果。

Build a walk cycle animation

制作行走循环动画

A standard walk cycle uses 4-6 frames. The key poses are: contact, passing, and their mirrors.

4-frame walk cycle:

Frame 1 (Contact) - Front leg extended forward, back leg extended back, body at lowest point
Frame 2 (Passing) - Legs cross under body, body at highest point (1-pixel vertical bob)
Frame 3 (Contact mirrored) - Opposite leg forward
Frame 4 (Passing mirrored) - Mirror of frame 2

Rules:

Maintain consistent volume across all frames - the character should not grow or shrink
Add 1-pixel vertical bob on passing frames (body rises slightly when weight is on one leg)
Arms swing opposite to legs
Frame timing: 100-150ms per frame for a natural pace

标准行走循环使用4-6帧。关键姿势包括：接触、过渡，以及它们的镜像。

4帧行走循环：

帧1（接触） - 前腿向前伸展，后腿向后伸展，身体处于最低位置
帧2（过渡） - 双腿在身体下方交叉，身体处于最高位置（1像素的垂直摆动）
帧3（镜像接触） - 相反的腿向前伸展
帧4（镜像过渡） - 帧2的镜像

规则：

所有帧之间保持体积一致——角色不应看起来忽大忽小
在过渡帧添加1像素的垂直摆动（单腿承重时身体略微抬起）
手臂与腿部摆动方向相反
帧时长：每帧100-150毫秒，以呈现自然的节奏

Design a seamless tileset

设计无缝拼接的tileset

Edge-first workflow:

Define the tile size (16x16 is standard)
Draw the left and top edges first
Copy left edge to right edge, top edge to bottom edge (guarantees seamless)
Fill the interior with detail, avoiding patterns that create obvious repetition
Test by placing 5x5 copies of the tile side-by-side
Add 2-3 variations of the same tile to break repetition in the map

Terrain transitions (auto-tiling):

Simplified: 16 tiles per transition (4-bit bitmask for cardinal neighbors)
Full: 47 tiles per transition (8-bit bitmask for cardinal + diagonal neighbors)
Draw the inner corners, outer corners, and straight edges; the engine handles placement via bitmask lookup

从边缘开始的工作流程：

确定瓦片尺寸（标准为16x16）
先绘制左侧和顶部边缘
将左侧边缘复制到右侧，顶部边缘复制到底部（确保无缝拼接）
填充内部细节，避免会导致明显重复的图案
将瓦片并排排列成5x5的网格进行测试
添加2-3种相同瓦片的变体，以打破地图中的重复感

地形过渡（自动瓦片）：

简化版：每种过渡需要16个瓦片（基于四方向邻居的4位位掩码）
完整版：每种过渡需要47个瓦片（基于四方向+对角线邻居的8位位掩码）
绘制内转角、外转角和直边；引擎通过位掩码查找自动放置瓦片

Build and manage a color palette

构建与管理颜色调色板

Step 1: Choose constraints

Total colors: 8 (minimal), 16 (standard), 32 (detailed)
Decide if you are emulating a hardware palette (NES: 54 colors, Game Boy: 4 shades, PICO-8: 16 fixed)

Step 2: Build ramps

For each major hue in your game (skin, foliage, metal, sky), create a 3-5 step ramp
Apply hue shifting: shadows lean toward blue/purple, highlights lean toward yellow/orange
Include one dedicated outline color (near-black, slightly warm or cool depending on mood)

Step 3: Test across all sprites

Every sprite in the game must use only palette colors
If a new sprite needs a color not in the palette, reconsider the design before adding the color
Export the palette as a .pal, .gpl (GIMP), or .png swatch strip for tool import

Example 16-color palette structure:

[outline] [skin-shadow] [skin-base] [skin-highlight]
[hair-shadow] [hair-base] [green-shadow] [green-base]
[green-highlight] [blue-shadow] [blue-base] [brown-shadow]
[brown-base] [gray-base] [white] [accent]

步骤1：确定限制条件

总颜色数：8种（极简）、16种（标准）、32种（精细）
决定是否要模拟硬件调色板（NES：54种颜色，Game Boy：4种色调，PICO-8：16种固定颜色）

步骤2：创建渐变带

为游戏中的每个主色调（皮肤、植物、金属、天空）创建3-5步的渐变带
应用色调偏移：阴影向蓝色/紫色偏移，高光向黄色/橙色偏移
包含一种专用的轮廓色（接近黑色，根据氛围略微偏暖或偏冷）

步骤3：在所有精灵中测试

游戏中的每个精灵都必须仅使用调色板中的颜色
如果新精灵需要调色板中没有的颜色，在添加颜色前重新考虑设计
将调色板导出为.pal、.gpl（GIMP格式）或.png色条，以便导入工具使用

16色调色板结构示例：

[轮廓色] [皮肤阴影] [皮肤底色] [皮肤高光]
[头发阴影] [头发底色] [绿色阴影] [绿色底色]
[绿色高光] [蓝色阴影] [蓝色底色] [棕色阴影]
[棕色底色] [灰色底色] [白色] [强调色]

Apply dithering for smooth gradients

应用抖动效果实现平滑渐变

Dithering uses alternating pixel patterns to simulate colors between two palette entries. Use sparingly - overdithering makes sprites look noisy.

Common dithering patterns:

Checkerboard (50%) - alternating pixels of two colors; strongest blend
25% / 75% - every 4th pixel is the secondary color; subtle transition
Stylized/organic - irregular pattern that follows the shape's contour

When to dither:

Large flat areas that need subtle gradation (sky backgrounds, large terrain)
Transitions between two ramp colors when adding an intermediate color would bust the palette

When NOT to dither:

Small sprites (16x16 or below) - there are not enough pixels for dithering to read
Animated sprites - dithering patterns shimmer during motion and look like noise

抖动效果通过交替像素图案来模拟两种调色板颜色之间的过渡色。要谨慎使用——过度抖动会让精灵看起来充满噪点。

常见抖动图案：

棋盘格（50%） - 两种颜色的像素交替排列；混合效果最明显
25% / 75% - 每4个像素中有1个是次要颜色；过渡效果微妙
风格化/有机 - 不规则的图案，跟随形状的轮廓

何时使用抖动：

需要微妙渐变的大面积平坦区域（天空背景、大型地形）
两种渐变带颜色之间的过渡，且添加中间色会超出调色板限制时

何时不使用抖动：

小型精灵（16x16及以下）——像素数量太少，抖动效果无法被识别
动画精灵——抖动图案在运动时会闪烁，看起来像噪点

Export sprites for game engines

为游戏引擎导出精灵

For Unity:

Export as PNG with transparent background
Import settings: Filter Mode = Point (no filter), Compression = None, Pixels Per Unit = your tile size
Sprite Mode = Multiple, then use the Sprite Editor to slice by cell size

For Godot:

Export as PNG, import with Filter = Nearest (disable in Import tab)
Use AnimatedSprite2D or AnimationPlayer with SpriteFrames resource
Set texture filter on the project level: Rendering > Textures > Default Texture Filter = Nearest

For Phaser / web:

javascript

// Load sprite sheet
this.load.spritesheet('player', 'player.png', {
  frameWidth: 32,
  frameHeight: 32
});

// Create animation
this.anims.create({
  key: 'walk',
  frames: this.anims.generateFrameNumbers('player', { start: 0, end: 5 }),
  frameRate: 8,
  repeat: -1
});

// CRITICAL: set pixel-perfect rendering
game.config.render.pixelArt = true;
// or in Phaser 3 config:
// render: { pixelArt: true }

针对Unity：

导出为带透明背景的PNG格式
导入设置：过滤模式 = Point（无过滤），压缩 = 无，每单位像素数 = 你的瓦片尺寸
精灵模式 = 多个，然后使用精灵编辑器按单元格尺寸切割

针对Godot：

导出为PNG格式，导入时设置过滤 = Nearest（在导入选项卡中禁用）
使用AnimatedSprite2D或AnimationPlayer搭配SpriteFrames资源
在项目层面设置纹理过滤器：渲染 > 纹理 > 默认纹理过滤器 = Nearest

针对Phaser / 网页：

javascript

// Load sprite sheet
this.load.spritesheet('player', 'player.png', {
  frameWidth: 32,
  frameHeight: 32
});

// Create animation
this.anims.create({
  key: 'walk',
  frames: this.anims.generateFrameNumbers('player', { start: 0, end: 5 }),
  frameRate: 8,
  repeat: -1
});

// CRITICAL: set pixel-perfect rendering
game.config.render.pixelArt = true;
// or in Phaser 3 config:
// render: { pixelArt: true }

Create sub-pixel animation

创建子像素动画

Sub-pixel animation creates the illusion of movement smaller than one pixel by shifting color values rather than pixel positions. Used for smooth, fluid motion in small sprites.

Technique: Instead of moving an eye 1 pixel right (which is a large jump at 16x16), darken the current pixel and lighten the adjacent pixel. The viewer's eye interpolates a half-pixel shift.

Rules:

Only works when the sprite is displayed at integer scale (2x, 3x, 4x)
Requires at least 3 values in the color ramp to create intermediate steps
Most effective for small details: eyes blinking, subtle breathing, water shimmer
Do not use for large movements - it looks blurry instead of smooth

子像素动画通过改变颜色值而非像素位置，来创造小于1像素的移动错觉。适用于小型精灵的平滑、流畅运动。

技术： 不要将眼睛向右移动1像素（在16x16分辨率下这是一个很大的跳跃），而是将当前像素变暗，将相邻像素变亮。观众的眼睛会自动插值出半像素的移动效果。

规则：

仅在精灵以整数倍缩放（2x、3x、4x）显示时有效
需要颜色渐变带中至少有3种颜色来创建中间步骤
对小型细节最有效：眨眼、轻微呼吸、水面微光
不要用于大型移动——它会看起来模糊而非平滑

Anti-patterns

反模式

Mistake	Why it fails	What to do instead
Using bilinear filtering on pixel art	Blurs pixels into a mushy mess, destroys crispness	Always use nearest-neighbor / point filtering in engine and export
Pillow shading (light from all sides)	Creates a flat, blobby look with no directional light	Pick one light direction (top-left is standard) and shade consistently
Too many colors without a palette	Sprites look inconsistent, cannot be themed or recolored	Lock a palette of 8-16 colors before drawing; every sprite shares it
Black outlines everywhere	Creates a dark, heavy look; interior details drown	Use dark saturated colors for outlines; softer colors for interior lines
Jagged curves (staircase lines)	Lines look rough and unintentional	Use consistent pixel-length steps: 3-3-2-2-1 not 3-1-2-4-1 for curves
Non-integer scaling (1.5x, 3.5x)	Pixels become different sizes, grid breaks	Scale only by whole integers: 1x, 2x, 3x, 4x
Animating without consistent volume	Character appears to inflate/deflate between frames	Overlay frames at 50% opacity to check silhouette stability

错误做法	失败原因	正确做法
对像素画使用双线性过滤	模糊像素，使画面变得浑浊，破坏清晰度	在引擎和导出时始终使用最近邻/点过滤
枕头阴影（光线来自四面八方）	营造出扁平、 blob 状的视觉效果，没有定向光源	选择一个光源方向（左上是惯例）并保持一致的阴影
无调色板限制使用过多颜色	精灵看起来不一致，无法统一主题或重新着色	在绘制前锁定8-16种颜色的调色板；所有精灵共享该调色板
到处使用黑色轮廓	营造出暗沉、厚重的视觉效果；内部细节被掩盖	使用深饱和度颜色作为轮廓色；内部线条使用更柔和的颜色
锯齿状曲线（阶梯线）	线条看起来粗糙且不自然	使用一致的像素长度步骤：绘制曲线时使用3-3-2-2-1而非3-1-2-4-1
非整数缩放（1.5x、3.5x）	像素大小不一，网格被破坏	仅使用整数倍缩放：1x、2x、3x、4x
动画时体积不一致	角色在帧之间看起来忽大忽小	将帧以50%透明度叠加，检查轮廓稳定性

References

参考资料

For detailed content on specific sub-domains, read the relevant file from the

references/

folder:

```
references/palette-recipes.md
```
- Pre-built palette recipes for common game genres (fantasy RPG, sci-fi, horror, Game Boy, NES)
```
references/animation-techniques.md
```
- Advanced animation guides: anticipation, follow-through, squash-and-stretch at pixel scale
```
references/tileset-patterns.md
```
- Auto-tile bitmask tables, terrain transition templates, and tileset organization patterns

Only load a references file if the current task requires it - they are long and will consume context.

如需特定子领域的详细内容，请阅读

references/

文件夹中的相关文件：

```
references/palette-recipes.md
```
- 针对常见游戏类型（奇幻RPG、科幻、恐怖、Game Boy、NES）的预制调色板方案
```
references/animation-techniques.md
```
- 高级动画指南：像素级别的预备动作、跟随动作、挤压与拉伸
```
references/tileset-patterns.md
```
- 自动瓦片位掩码表、地形过渡模板、tileset组织模式

仅在当前任务需要时加载参考文件——它们篇幅较长，会占用上下文资源。

pixel-art-sprites

Original

Translation

Pixel Art Sprites

像素画精灵

When to use this skill

何时使用本技能

Key principles

核心原则

Core concepts

核心概念

Sprite sizes and common canvases

精灵尺寸与常用画布

Anatomy of a sprite sheet

精灵表的结构

Tileset structure

Tileset结构

Color ramp anatomy

颜色渐变带结构

Common tasks

常见任务

Create a character sprite with proper shading

创建带有恰当阴影的角色精灵

Build a walk cycle animation

制作行走循环动画

Design a seamless tileset

设计无缝拼接的tileset

Build and manage a color palette

构建与管理颜色调色板

Apply dithering for smooth gradients

应用抖动效果实现平滑渐变

Export sprites for game engines

为游戏引擎导出精灵

Create sub-pixel animation

创建子像素动画

Anti-patterns

反模式

References

参考资料

Related skills

相关技能