图集资源(Atlas)

图集(Atlas)也称作 Sprite Sheet,是游戏开发中常见的一种美术资源。图集是通过专门的工具将多张图片合并成一张大图,并通过 plist 等格式的文件索引的资源。可供 Cocos Creator 3D 使用的图集资源由 plistpng 文件组成。下面就是一张图集使用的图片文件:

atlas sheep

为什么要使用图集资源

在游戏中使用多张图片合成的图集作为美术资源,有以下优势:

  • 合成图集时会去除每张图片周围的空白区域,加上可以在整体上实施各种优化算法,合成图集后可以大大减少游戏包体和内存占用
  • 多个 Sprite 如果渲染的是来自同一张图集的图片时,这些 Sprite 可以使用同一个渲染批次来处理,大大减少 CPU 的运算时间,提高运行效率。

更形象生动的解释可以观看来自 CodeAndWeb 的教学视频 What is a Sprite Sheet(什么是图集),需要使用 VPN 打开视频。

制作图集资源

要生成图集,首先您应该准备好一组原始图片:

single sheep

接下来可以使用专门的软件生成图集,我们推荐的图集制作软件包括:

使用这些软件生成图集时请选择 cocos2d-x 格式的 plist 文件。最终得到的图集文件是同名的 plistpng

atlas files

使用 TexturePacker 打包图集的用户需要注意:

  • 3D 这里不再做 3.x 版本以下的图集格式,导入是会报错的,望用户知悉,推荐使用的版本是 4.x。
  • 由于 TexturePacker 打包结果的问题,与我们处理九宫格算法的不匹配,所以在 1.0.4 版本的编辑器中,生成合图时请禁止旋转,以获得正确的效果。

导入图集资源

将上面所示的 plistpng 文件同时拖拽到 资源管理器 中,就可以生成可以在编辑器和脚本中使用的图集资源了。

Atlas 和 SpriteFrame

图像资源文档中,我们介绍了 Texture 和 SpriteFrame 的关系。导入图集资源后,我们可以看到类型为 Atlas 的图集资源可以点击左边的三角图标展开,展开后可以看到图集资源里包含了很多类型为 SpriteFrame 的子资源,每个子资源都是可以单独使用和引用的图片。

sprite frame

接下来对于 Sprite Frame 的使用方法就和图像资源中介绍的一样了,请查阅相关文档。