这是我参与8月更文挑战的第28天,活动详情查看: 8月更文挑战
什么是子画面表单(Sprite Sheet)
子画面表单(Sprite Sheet)有的翻译叫做精灵表(甚至还有叫雪碧图的。。。我感觉都翻译的有问题,不是很直观)在电脑游戏诞生之初就已经存在了。其想法是创造一个包含所有角色动画的大图像,而不是处理许多单个文件。
子画面表单(Sprite Sheet)的类型
子画面条带(Sprite Strips) 和 动画条带(Animation Strips)
动画条带 是 子画面条带 的最简单形式:它只是将每个动画帧放在一起。所有帧都有相同的大小,动画在每一帧中对齐。
子画面瓦片集(Tile Sets)
如果动画较长,它也可能包含多行 或者 几个不同的动画被组合在一起。
子画面瓦片集 与 子画面表单 没有什么不同: 下面是一个贴图的例子,它包含了游戏关卡的构建模块。
游戏很容易检索子画面,因为它们都有相同的宽度和高度。缺点是子画面会因为所有额外的透明度而浪费大量内存。
优化子画面表单
游戏引擎开发者意识到简单 子画面表单 中的内存浪费,于是开始优化空间。最简单的方法是移除子画面周围的透明度,并将其收缩到边界框中。
更有效的方法是使用多边形轮廓去切割子画面。
-
通过它的边界修剪子画面
-
使用多边形修剪子画面
游戏引擎现在需要额外的信息来绘制子画面: 它需要知道子画面的位置以及移除了多少透明度。
这些信息可以存储在子画面表单附带的数据文件中。它不仅包含坐标,还可以包含子画面和其他元信息的名称。
有了这个数据文件,你就更容易告诉游戏引擎你想在位置 (299,192) 绘制一个香蕉子画面。
这是一个优化的子画面表单的例子,它的数据文件可能是这样的:
创建子画面表单
创建优化 子画面表单 的最简单方法是使用 TexturePacker 。TexturePacker 是一个专门创建子画面表单的工具。免费版本允许你创建 子画面表单 和 子画面瓦片集。
TexturePacker 可用于 Windows, MacOS 和 Linux。
如何创建一个子画面条带
创建子画面表单只需要将子画面文件夹拖到 TexturePacker 上:
TexturePacker 将文件夹中的所有图像文件为您打包。 它支持大量的图像格式,包括 PhotoShop 的 psd 文件,甚至 Flash 电影(.swf)。
当你在使用免费版本时,你可以更改 3 个选项的默认值。你可以没有限制地设置它们来创建子画面表单:
- 算法: 基本
- 修剪模式: 没有
- Png Opt 级别: 0 (在高级设置中)
最后,点击 Publish Sprite Sheet 生成的结果如下
注意:如果子画面太多,超过了最大纹理限制,则会报如下错误
如何创建优化的子画面表单(需要升级为 Pro 版)
子画面表单是一个很好的开始,但在很多情况下也会浪费内存。如果你打算制作一款游戏,你应该优化子画面表单。
首先要选择你计划使用的游戏引擎。TexturePacker 支持 30 多个引擎,可以扩展到支持任何新的引擎。
单击设置中的数据格式按钮。从下拉菜单中选择你计划使用的引擎:
TexturePacker 自动应用为所选游戏引擎优化的默认设置。当您按下 Publish 时,它还会编写一个包含所需精灵信息的数据文件。
例如,生成为 Spark AR 优化的子画面表单
- 选择 Spark AR
- 生成的 json 数据为