ActionScript
TypeScript
JavaScript

用LayaAirIDE制作图集

发布时间:2017-01-04

 

图集资源

        图集(Atlas)也称作 Sprite Sheet, 是游戏开发中常见的一种美术资源。图集是通过专门的工具将多张图片合并成一张大图,并通过Json 等格式的文件存放原始图片资源信息。使用 LayaAIr IDE 的图集打包工具生成的图集资源由 JSON 文件 和 PNG 图像文件组成。下面就是一张图集图片文件。

图片1.png

 

 

为什么要使用图集资源

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

            1.合成图集时会去除每张图片周围的空白区域,加上可以再整体上实施各种优化算法,合成图集后可以大大减少游戏包体和内存占用。

            2.多个Sprite如果渲染的是来自同一张图集的图片时,这些Sprite可以使用同一个渲染批次来处理,大大的减少CPU的运算时间,提高运行效率。

 

制作图集资源

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

图片1.png

 

        接下来我们可以使用LayaAirIDE自带的图集打包工具来制作图集。我们可以在 LayaAirIDE 中选择主菜单 工具/图集打包 来打开图集打包工具窗口。

        图集打包工具支持打包的原始图片格式有:png和jpg。  


1.png

         

        1.设置资源根目录。为打包图片的文件夹目录。

(需要注意的是,资源文件夹外部需要再套一层文件夹,否则打包出来的资源路径会是空的)

blob.png

blob.png

blob.png

blob.png


        2.设置输出目录。用于存放打包后的图集文件。

        3.设置图集最大宽高值。默认值为2048*2048。此值决定了打包好的图集的最大尺寸,如果选择打包的资源根目录中的原始图片太多,则会在打包时生成多个图片。

        4.设置单图最大宽高值。默认为512*512。此值决定原始图像大于此尺寸的将不会被打包在图集中。

        5.选择性的勾选2的整次幂选项。如果勾选,则生成的图集图片的宽高将会是2的整数此幂。

        6.选择性的勾选空白裁剪选项。如果勾选,则生成的图集图片将会去掉原始图片中的空白区域。

        7.以上设置操作都完成后,点击确定按钮,进行打包。