跳到主要内容

使用纹理打包工具

什么是纹理打包？​

精灵或 UI 图像常以独立图片提供。纹理打包就是将这些图片合并为一张纹理图集。

主要优点有：

  • 将多个网络请求合为一个，缩短加载时间。
  • 使用同一纹理的精灵可以合并为一次绘制调用。

工具​

以下工具兼容 PlayCanvas。

TexturePacker Online（免费）​

（网站）

免费的浏览器工具，支持基础纹理打包。

TexturePacker Online 操作步骤

  1. 清空图集。
  2. 添加精灵或 UI 图像。
  3. 数据格式保持 JSON hash。
  4. 下载图集 .png。
  5. 下载帧数据 .json。

TexturePacker 工具​

（网站）

TexturePacker 是需要下载的付费工具，提供更多功能，包括精灵和 UI 图像布局控制，以及九宫格切片设置。

TexturePacker 工具操作步骤

基本步骤：

  1. 添加精灵或 UI 图像。
  2. 将 Output files -> Framework 设为 PlayCanvas。
  3. 点击 Publish sprite sheet，创建纹理图集和 JSON 帧数据。

在精灵编辑器中创建帧​

将图集文件上传到编辑器并创建纹理图集资源后，打开精灵编辑器。

PlayCanvas 精灵编辑器

点击 Upload Texture Packer JSON，选择 JSON 帧数据文件上传。

这会在图集中创建帧，之后可用来创建精灵资源。

开发后期更新图集时，只要精灵文件名和帧名称不变，上传新帧数据会产生以下效果：

  • 已从图集移除的精灵，其帧也会删除。
  • 新增精灵的帧会追加到列表末尾。
  • 已有精灵的帧会更新。