博客 Luki
精灵图游戏开发教程

精灵图（Sprite Sheet）怎么做：新手完整指南

精灵图（Sprite Sheet）怎么做：新手完整指南

这篇指南从零开始讲精灵图（sprite sheet）怎么做：它到底是什么、动笔前必须先定下的三个数、怎样在 Aseprite 里画帧并导出、怎样把一堆散帧拼成一张图，以及 Unity、Godot、RPG Maker 各自的精确导入设置。最后列出让精灵图显得业余的几个典型错误，逐条给出避法。

如果你手上已经有帧图、只想把它们拼起来，直接跳到把散帧拼成一张图。如果你想让 AI 把帧直接画出来，文末的 AI 精灵图生成器就是干这个的。

精灵图是什么？

精灵图是一张图里装下一个动画的全部帧，按一行或一个网格排列，每个格子大小相同。引擎在图上开一个和格子一样大的窗口，每次只画一格，窗口逐格往后挪，角色就走起来了。

精灵图是由统一大小的格子组成的网格，一格一个姿势

为什么不直接发八张单独的 PNG？因为 GPU 只需要绑定一张纹理而不是八张。一个 2D 游戏同屏四十个会动的实体时，这点差别会直接体现在帧时间上。它也意味着只有一个文件要管版本，美术方向一变只换一个文件。

格式本身早已定型：格子统一、无间隙、一个文件。真正没定、也是新手最常踩坑的，是动手前要选的那几个数。

第一步：先把数定下来

三个决定影响后面所有事。现在定对了，这篇教程剩下的部分全是机械操作；定错了，每一帧都得重画。

帧数：6、8 还是 12

这是最影响动画手感的决定。

  • 6 帧：角色腿部结构简单、游戏视距较远时，走路循环够用了。32 像素高的俯视角 RPG 用 4 帧走了几十年，没人觉得不对。
  • 8 帧：主力选择。接触、下压、经过、抬起，两遍、镜像。它能给出真正的重心转移，而且以后想砍成 4 帧的低精度版本也能整除。
  • 12 帧：开始像「动画」而不只是「在动」。适用于角色在屏幕上很大、有披风或头发需要拖尾、或者玩家会盯着看的一次性动作——死亡、施法、变身。放在一个循环六小时的走路动作上，十二帧大多是白干。

一条经得起考验的规则：常驻循环的动作，把帧花在可读性上；偶尔播放的动作，把帧花在顺滑度上。

格子尺寸：从屏幕往回推

格子尺寸就是单帧的像素宽高。常见取值 16、32、64、96、128。

别按「我想画多精细」来选，按「精灵最终在玩家屏幕上占多少像素」来选。以 1920×1080 为目标，镜头横向显示 30 格地块，那每格地块就是 64 屏幕像素；一个一格半高的角色大约要 96 像素的画。用 32 画然后放大 3 倍，能得到刻意的粗颗粒感；用 128 画再缩小，得到的是一团糊，因为缩小像素画会毁掉让它成为像素画的那些硬边。

要避免的失败模式：显示倍率不是整数。32 像素的画放 2 倍是锐利的，放 2.4 倍则每条斜线都在闪，而且一旦看见就再也忘不掉。

视角：画第一帧之前就要选好

四种视角几乎覆盖所有 2D 游戏：

  • 侧视：纯侧面。平台跳跃、格斗、跑酷。一个方向，有时镜像。
  • 俯视：镜头垂直向下。双摇杆射击、Roguelike。通常四个方向。
  • 网格 RPG：四分之三视角，角色面向镜头但在网格上移动。这就是 RPG Maker 的样子。四个方向。
  • 等距：菱形的四分之三视角。最贵，因为走路循环通常要八个方向。

视角不是事后加的滤镜。它决定哪些肢体可见、影子落在哪里、你欠自己几套方向变体。侧视角色只需一套走路循环，网格 RPG 角色要四套。

第二步：在 Aseprite 里画帧

Aseprite 是像素动画的标准工具，下面的流程是大多数精灵画师在用的。任何带帧和洋葱皮功能的编辑器（Piskel、Pyxel Edit、LibreSprite）都是同样的做法，本站免费的像素画编辑器也一样，它直接在浏览器里运行，不用安装任何东西。

  1. 按格子尺寸新建画布。 File → New，把宽高设成你上面选定的格子尺寸（比如 32×32），透明背景。不要在大画布上画完再裁，格子尺寸是你和引擎之间的合同。
  2. 画接触姿势。 第一帧是角色一只脚在前、踩在地上的姿势。这里把剪影敲定，因为其它每一帧都是它的变体。
  3. 添加帧。 Frame → New Frame（或 Alt+N）会复制当前帧，让你在上面微调而不是重画。按接触 → 下压 → 经过 → 抬起做走路，然后镜像给另一条腿再来一遍。
  4. 打开洋葱皮。 View → Show Onion Skin 会把前一帧和后一帧当作幽灵叠上来。这是保证头顶高度一致、双脚踩同一条线的手段。
  5. 预览循环。 按 Enter 播放。盯着脚和头顶。哪个在不均匀地上下跳，现在就修——它还只是一帧，不是一整张图。
  6. 导出精灵图。 File → Export Sprite Sheet（Ctrl+E）。Layout 标签页里，单行选 Horizontal Strip，网格选 By Rows 并固定列数。Borders 标签页里 Trim 保持关闭（格子统一比紧贴边框更重要），如果引擎会对纹理做滤波，加 1–2 像素的 Spacing。Output 标签页里勾上 JSON Data 可以给 Phaser 之类的引擎输出帧矩形。

导出得到一张 PNG，每一帧在等大的格子里。这就是你的精灵图。如果你用的工具只能导出单独的图片，下一步负责把它们拼起来。

第三步：把散帧拼成一张图

很多流程的终点是一个装满散 PNG 的文件夹：素材包里的 walk_01.png 到 walk_08.png、从 3D 模型渲染出来的帧、或者某个生成器的输出。它们需要变成一个格子统一的文件。

你可以在任何图像编辑器里手动做：新建一张 列数 × 格宽 乘 行数 × 格高 的画布，把每一帧放到格子尺寸的整数倍位置上。能做，但又烦又容易差一个像素。

更快的路是本站免费的精灵图拼接工具。把帧拖进去，它会按文件名排序、以最大的那帧为格子、让所有帧脚踩同一条基线，然后给你一张 PNG 和一个可以直接填进引擎的格子尺寸。什么都不会上传，拼接在你的浏览器里完成。如果你手上的动画是一张 GIF 动图而不是散帧，GIF 转精灵图工具会把每一帧都拆出来，导出成一张 PNG 精灵图。

所有帧必须共用一条基线：脚在同一条线上才对，脚高低不一走路会上下跳

不管走哪条路，往下之前检查两件事：每个格子大小完全一致；角色的脚在每一帧里都踩在同一条线上。第二件事在静态图里看不出来，动画一播就明明白白。

第四步：把精灵图导入引擎

每个引擎要的东西都一样：格子统一、没有间隙（除非你告诉它间隙多大）的一张图。下面是各家设置在哪里。

Unity

  1. 选中 PNG。在 Inspector 里把 Texture Type 设为 Sprite (2D and UI)，Sprite Mode 设为 Multiple。
  2. 像素画把 Filter Mode 设为 Point (no filter)，Compression 设为 None。默认的双线性滤波就是让像素画发糊的元凶，人人都会中一次招。
  3. 把 Pixels Per Unit 设成你的格子尺寸，让一格等于一个世界单位，然后点 Apply。
  4. 打开 Sprite Editor，选 Slice → Grid By Cell Size，填入格子宽高（加了间距就填 padding），切片。
  5. 把切出来的精灵一起拖进 Scene 就会生成 Animation Clip，或者在 Animation 窗口里手动建。

Godot 4

  1. 添加 AnimatedSprite2D 节点，在它的 Sprite Frames 属性里新建一个 SpriteFrames 资源。
  2. 在 SpriteFrames 面板里点 Add frames from a Sprite Sheet，选你的 PNG，Horizontal 填列数、Vertical 填行数。Godot 会替你切网格。
  3. 选中属于这个动画的帧，设置 FPS，勾上 Loop。
  4. 像素画打开 Project Settings → Rendering → Textures，把 Default Texture Filter 设为 Nearest。同时把项目的拉伸模式设为 canvas_items 并开整数缩放，保证 2 倍就是精确的 2 倍。

RPG Maker MV / MZ

RPG Maker 比另外两个严格，因为它不让你选排版。角色图是固定网格：

  • 每个角色是 3 列 × 4 行：每个方向三帧走路，四行的顺序是下、左、右、上。
  • MV 和 MZ 默认格子 48×48，所以一个角色块是 144×192 像素。
  • 一张标准图放 8 个角色，按 4×2 排列（576×384 像素）。
  • 文件名前缀加 $ 告诉引擎这个文件只有一个角色而不是八个；前缀加 ! 关闭引擎给角色加的那点向上偏移，门和物件要用这个。

把文件丢进 img/characters/，它就出现在角色选择器里。如果你的帧不是 48×48，把格子（不是画）调到匹配；RPG Maker 不会切任意尺寸的图。

Phaser（附赠）

this.load.spritesheet("hero", "hero.png", { frameWidth: 32, frameHeight: 32 });
this.anims.create({
  key: "walk",
  frames: this.anims.generateFrameNumbers("hero", { start: 0, end: 7 }),
  frameRate: 10,
  repeat: -1,
});

在游戏配置里设 pixelArt: true，渲染器会用最近邻缩放。

让精灵图显得业余的五个错误

  1. 格子不统一。 把每帧裁到它的包围盒看起来很整洁，但会彻底破坏网格切片。保持格子统一，让空白的地方空着。
  2. 地面线不一致。 第 1 帧脚在 y=60，第 5 帧在 y=58，精灵走路就会上下跳。每一帧都要同一条基线。
  3. 透明边缘渗色。 GPU 采样格子边缘的像素时，双线性滤波会把隔壁格子的像素拉进来，出现一像素宽的错色边。用点采样，或者给每个格子加 1–2 像素的透明沟槽并告诉引擎间距。
  4. 显示倍率不是整数。 32 像素的画放 2.4 倍会闪。选一个能给出精确 2 倍、3 倍、4 倍的镜头尺寸。
  5. 剪影漂移。 角色在各帧之间悄悄变胖或变瘦，因为每帧都是从头画的。复制帧再微调而不是重画，每次都开洋葱皮。

或者，跳过手工活

手画八帧且保持一致是一项真本事，这也是大多数独立开发者带着占位美术上线的原因。瓶颈不在点子，而在于让角色的比例、配色、剪影在每一帧里都稳住。

这种一致性问题正是生成擅长的。SpriteGen 精灵图生成器接受一句文字描述，让你按本文选好视角、风格、帧数和格子尺寸，然后返回一张帧已经对齐在统一网格上的成品精灵图。免费试用，无需注册，大约一分钟。如果你要的是单张静态精灵，比如道具、图标或 NPC，而不是一段动画，AI 精灵制作器会画出一张透明底的像素风 PNG。

不管你用什么做，上面那几个数都是要先定的。一开始就定对，比在围绕它们搭好动画状态机之后再改，便宜得多。

[CTA] SIGN-OFF

准备好让你的角色动起来了吗？

描述你的角色，几分钟内拿到可直接入游戏的精灵图。免费开始。

试用 Sprite Creator →