跳到正文

精灵图集打包

拖入一个装满精灵的文件夹,得到一张紧凑打包的纹理,以及告诉引擎每个精灵位置的数据文件。任何内容都不会离开你的设备。

在你的设备上生成。你的图片绝不会被上传。

  • 绝不上传
  • PNG 和数据文件
  • 一次处理整个文件夹

工作原理

如何把精灵打包成图集

  1. 第 1 步: 添加你的精灵

    选择、拖入或粘贴图片,或拖入它们所在的文件夹。它们的尺寸可以各不相同。

  2. 第 2 步: 设置打包方式

    设置间隙、裁掉空白边缘,并选择引擎能读取的数据文件。图集会随着调整即时更新。

  3. 第 3 步: 下载 ZIP

    其中包含图集 PNG 和记录每个精灵位置的文件。

精灵图集打包

一张纹理代替一百个文件

  • 紧凑打包

    各种尺寸的精灵被紧密排在一起,几乎不浪费空间,不旋转,也不缩放。

  • 裁掉空白边缘

    每个精灵周围的空白被去掉并记录下来,图集更小,位置也不会变。

  • 引擎能读取的数据

    供 Phaser、PixiJS 和各引擎导入插件使用的 JSON,或能自动切分纹理的 Unity .meta。

  • 绝不上传

    一切都在你的浏览器中完成,因此你的图片留在你的设备上。

详细说明

精灵图集的实际用法

图集有什么用

游戏每绘制一张单独的图片,显卡就要切换一次纹理。把许多精灵打包进一张图片,也就是图集,引擎就能一起绘制它们,比一百个小文件运行更快、加载更快。

打包工具像拼图一样把不同尺寸的精灵拼在一起,从最大的开始,并记下每个精灵的位置。精灵不会被旋转或缩放,所以看起来和你画的完全一样。

重要的设置

  • 间隙:精灵之间留 1 或 2 个空白像素,纹理被缩放或过滤时,一个精灵的边缘就不会出现在相邻精灵上。
  • “裁掉空白边缘”:去掉每个精灵四周的空白边框。数据文件会记录去掉了多少,所以精灵仍在原来的位置。
  • “二的幂尺寸”:把图集向上取整到 256、512、1024 等。现代引擎很少需要;部分移动端和网页平台仍然偏好这样。
  • 名称:每个精灵以其文件名(不含扩展名)命名,所以请按你想在代码中引用的方式给文件命名。

数据文件

“JSON,按名称索引帧”是 TexturePacker 普及的格式。Phaser 和 PixiJS 可直接加载,Godot、GameMaker 和大多数其他引擎也有导入插件。“JSON,帧列表”以有序列表保存同样的数据。

“Godot (.tres)”为每个精灵生成一个同名的 AtlasTexture 文件。把它们和 PNG 放在项目的同一个文件夹里,任意一个都可以直接当作纹理使用,例如用在 Sprite2D 上。不需要导入插件,裁剪过的精灵也保持原来的尺寸。

“Unity (.png.meta)”是 Unity 自己的导入文件。把它和 PNG 一起复制进项目,纹理导入后就已切成带名称的精灵,采用点过滤且不压缩,正合像素画的需要。

精灵图集打包

常见问题

我的图片会被上传到哪里吗?

不会。一切都在你的浏览器中、在你自己的设备上运行。你的图片绝不会发送给 Moriqa 或其他任何人,关闭页面后也不会保留任何内容。

如何制作精灵图集?

添加精灵,选择间隙和数据文件,然后下载 ZIP。其中包含图集图片及其数据。

图集最大可以有多大?

最大 4096 × 4096 像素(目前所有设备都能加载的尺寸),最多 1000 个精灵。如果精灵放不下,工具会提示。

这和精灵表有什么不同?

精灵表通常是一个动画的等大帧组成的网格。图集则把任意尺寸的图片放到能放下的位置,并且需要数据文件才能读取。

为什么不旋转精灵来节省空间?

旋转后的精灵排得更紧一些,但很多导入插件不支持。让每个精灵保持正向,图集在哪里都能读取。

可以打包一个动画的各帧吗?

可以。按顺序给文件命名,例如 walk_01 和 walk_02,它们在数据文件中会保留这些名称。如果只是等大帧的简单网格,请改用“精灵表转 GIF”并保存为精灵表。

还在画精灵?

打开 Moriqa 的像素画编辑器绘制并制作动画,然后导出用于 Godot、Unity 和 GameMaker 的精灵表。在浏览器中免费使用。