如何为 2D 游戏制作 Sprite Sheets — Indie Devs 实用指南

Source: Dev.to

请提供您希望翻译的具体文本内容，我将按照要求保留源链接、格式和代码块，仅翻译正文部分为简体中文。

为什么精灵图集很重要

• 更少的 HTTP 请求 – 加载一个打包好的纹理比获取数十个单独的帧图像要快。
• GPU 批处理 – 引擎可以对同一纹理图集中的精灵进行批量渲染，将绘制调用次数从数百降至个位数。
• 内存效率 – 一个大纹理比许多小纹理更有效地使用 GPU 内存，因为采用了二次幂尺寸的纹理。

如果你曾经想知道为什么你的 Phaser 或 Godot 项目在动画时会卡顿，散落的单独图像往往就是原因。

精灵表组件

1. 打包图像（通常 PNG） – 所有帧以网格或最佳方式排列。
2. 元数据文件 – 每帧的坐标和尺寸，供引擎了解一帧何时结束、下一帧何时开始。

引擎元数据格式

打包精灵表的工具

• ImageMagick montage – 适用于简单网格的快速工具，但不提供元数据。

  montage frame_*.png -tile 8x -geometry +0+0 spritesheet.png

• Sprite Sheet Maker – 基于浏览器的打包工具，支持拖拽图片、配置布局、实时预览动画，并导出打包后的 PNG 以及引擎专用的元数据。无需安装。

典型工作流程

1. 导出帧 为单独的 PNG，使用透明背景。按顺序命名（例如 walk_01.png、walk_02.png），以保持顺序。
2. 上传所有帧 到打包工具。选择布局：
   • 网格 – 标准的行列布局，适用于大多数引擎。
   • 水平条带 – 单行布局，GameMaker 所需。
   • 垂直条带 – 单列布局，某些 CSS 工作流使用。
3. 调整帧间填充，如果你的引擎出现纹理泄漏（在非整数缩放的像素艺术中常见）。
4. 预览动画，在不同帧率下检查是否有缺帧、顺序错误或尺寸不一致。
5. 下载 打包好的 PNG 和元数据文件，使用引擎所需的格式。

引擎特定示例

Phaser

// Loading a sprite sheet in Phaser 3
this.load.atlas(
  'player',
  'assets/player.png',
  'assets/player.json'
);

// Creating an animation
this.anims.create({
  key: 'walk',
  frames: this.anims.generateFrameNames('player', {
    prefix: 'walk_',
    start: 1,
    end: 8,
    zeroPad: 2
  }),
  frameRate: 12,
  repeat: -1
});

Godot 4

# In Godot, import the XML + PNG, then reference in AnimatedSprite2D
var sprite_frames = load("res://assets/player.tres")
$AnimatedSprite2D.sprite_frames = sprite_frames
$AnimatedSprite2D.play("walk")

转换 GIF

您可以直接将动画 GIF 转换为精灵表，而无需手动提取帧——这对于参考动画、占位资源，或将网页动画转化为游戏可用格式非常有用。相反的过程（精灵表 → GIF）则方便在社交媒体或文档中分享预览。

常见陷阱与技巧

• Texture bleeding – 在帧之间添加 1–2 px 间距，并在打包工具支持 “extrude” 时启用它。
• Power‑of‑two sizes – 某些旧引擎和移动 GPU 需要纹理尺寸为 256、512、1024、2048 等。请确认目标平台的要求。
• Frame naming – 使用一致、具描述性的名称（例如 player_walk_01），而不是通用的 frame1。当你拥有数百个精灵时，这能节省时间。
• Premultiplied alpha – 了解你的引擎是期望直通 Alpha 还是预乘 Alpha；错误的设置会导致透明精灵出现暗边。

结论

Sprite sheets 是一种基础的优化手段，在整个项目中都能带来收益。尽早做好流水线：自动打包，为你的引擎选择正确的元数据格式，并且在导出前始终预览。如果你想尝试这里描述的工作流，Sprite Sheet Maker 支持上述所有格式，并且完全在浏览器中运行——无需账号。

祝构建愉快！