CocosCreator之图集资源(Atlas)

图集资源在游戏开发中用于合并多张图片,减少内存占用和提高渲染效率。通过TexturePacker或Zwoptex生成,图集由plist和png文件组成,可在CocosCreator中使用。

图集资源(Atlas)

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

atlas sheep

为什么要使用图集资源

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

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

制作图集资源

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

single sheep

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

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

atlas files

注意

  • Zwoptex 暂时不支持最新版 macOS。

导入图集资源

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

Atlas 和 SpriteFrame

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

sprite frame

Sprite Frame 的使用方法和图像资源中介绍的一样,请查阅相关文档。

碎图转图集

在项目原型阶段或生产初期,美术资源的内容和结构变化都会比较频繁,我们通常会直接使用碎图(也就是多个单独的图片)来搭建场景和制作 UI。在之后为了优化性能和节约包体,需要将碎图合并成图集。Creator 提供了自动图集功能,可以在发布项目时无缝地将生产阶段的碎图合并成图集,并且自动更新资源索引。

关注公众号:《码之有道》,一起聊游戏全栈开发!

1、公众号回复:【教程】获取零基础游戏开发客户端+服务端全套教程。
2、公众号回复:【实战】获取企业级实战项目。
3、公众号回复:【资料】获取大学四年整理的所有自学资料

### 关于 Cocos Creator 自动图集生成的解决方案 #### 使用内置工具 Auto Atlas 进行性能优化 Cocos Creator 提供了一个名为 **Auto Atlas** 的内置功能,用于简化开发者的工作流程并提升游戏性能。以下是其主要特点和优势: - **集成度高**: Auto AtlasCocos Creator 内置的功能,无需额外安装任何第三方插件或软件即可使用[^1]。 - **便捷性**: 开发者可以在项目构建阶段自动生成图集文件,而不需要手动干预。这种机制允许开发人员在开发过程中自由调整素材而不受限制[^1]。 - **灵活性**: 图集尺寸会根据实际需求动态调整,在减少内存占用的同时保持较高的渲染效率[^1]。 #### 配置方法 为了充分利用 Auto Atlas 功能,可以按照以下方式配置您的项目资源管理策略: 1. **启用自动打包选项** 在 `project.json` 文件中找到 `"autoAtlas"` 参数,并将其设置为 true: ```json { "autoAtlas": true, "maxWidth": 2048, "maxHeight": 2048 } ``` 上述代码片段中的参数分别表示开启自动图集生成功能以及设定最大宽高等属性值范围[^1]。 2. **合理规划资源目录结构** 建议将同类别的图片存放在同一个文件夹下以便更好地被识别归类成单独的一个 sprite frame atlas 。例如 UI 组件、角色动画序列等应各自独立存储。 3. **利用动态加载技术缓解运行时压力** 对于大型项目而言,即使采用了高效的纹理合批手段仍可能存在启动时间过长或者帧率下降等问题。此时可考虑引入异步资源加载框架 Aswallow 来进一步改善体验效果[^2]: ```javascript cc.resources.load('prefabs/myPrefab', function (err, prefab) { var node = cc.instantiate(prefab); scene.addChild(node); }); ``` 通过上述措施结合运用,能够有效提高基于 Cocos Creator 构建的游戏应用的整体表现水平。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值