LayaAir 图集动画1—图集制作

朱雀 2022-04-04 10:14 694阅读 0赞

**目录**

图集制作·理论介绍

LayaAirIDE 制作图集

IDE 图集打包工具打包图集

资源管理器内自动打包图集

图集文件介绍

图集动画预览

--------------------

# 图集制作·理论介绍 #

官网参考地址：[https://ldc.layabox.com/doc/?language=zh&nav=zh-js-2-2-0][https_ldc.layabox.com_doc_language_zh_nav_zh-js-2-2-0]

1、图集(Atlas)是游戏开发中常见的一种美术资源，通过工具将多张图片合并成一张大图，并通过 atlas 与 json 等格式的文件存放原始图片资源信息。下图就是采用 LayaAirIDE 打包好的一张 png 图集资源：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70][]

2、LayaAir 开发图集动画之前需要掌握制作图集，本文采用 LayaAirIDE 2.0.0beta5 版本进行介绍。

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

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

3、LayaAirIDE 支持对 PNG 与 JPG 两种图片资源格式打包为图集，推荐使用 PNG，因为 JPG 的体积会较大。

4、注意：PNG 原始资源的位深度不能超过 32，否则打包出来的图集会出现花屏，另外 PNG 与 JPG 资源不能是其它格式的资源改名为 PNG 与 JPG 格式后的。

# LayaAirIDE 制作图集 #

1、LayaAirIDE 中打包图集的方式一共有两种，一是 IDE 图集打包工具打包图集，二是 资源管理器内自动打包图集。

2、打包之前先准备好制作好的图片资源，按着要求准备的是 png 格式的，如下所示分别是一只猎豹和一个小女孩，只要获取了动画中的关键帧，然后通过这些关键帧图片连续的切换就是一个动画，关键帧图片越密集，动画越细腻，但是也不要太多，消耗资源。

3、图片资源文件的命名可以没有规律，但是建议有规律的命名。

![20181216153540249.png][]

![20181216153602289.png][]

![20181216154025227.png][]

## IDE 图集打包工具打包图集 ##

IDE 导航的`工具`菜单中，点击`图集打包`打开图集打包工具面板。本文使用的是 LayaAir IDE 2.0.0beta5 版本。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 2][]

1、资源文件父目录：该目录下的每个目录对应一个图集文件，多个目录会生成多个图集文件，打包后的图集文件以资源根目录下的子目录名命名。(这个点一定要注意，选错了目录打包会错误)

2、输出目录：打包后的图集资源存放目录，默认与资源根目录相同，可以点击浏览或手动在输出目录输入框内更改路径。（一般默认即可）

3、图集最大宽度：默认值为2048，该值决定单个图集的最大尺寸，如果原始图片过多，超过单个图集最大宽高时，则会在打包时生成新的图集文件（多个图集）。

4、单图最大宽度：默认值为 512，超过这个尺寸的单图将不会被打包到图集中。（超过512×512的单图不建议打包到图集中，可以单独预加载此图，但是，加载单图也不能超过1024×1024，否则会对性能有影响）

5、2的整次幂：如果勾选，则生成的图集图片宽高将会是2的整次幂，一般默认即可。

6、空白裁剪选项：如果勾选，则生成的图集图片会自动把原始图片中空白区域裁剪掉，一般默认即可。

7、数据文件后缀名：有 atlas 与 json 可选，都是记录图集信息的文件，.atlas 或者 .json 文件会记录打包好的图集上图片信息，编码的时候直接加载 .atlas 或者 .json 即可。一般默认即可。

8、选择好路径之后，点击确定按钮即可生成如下：图集动画开发需要的就是打包好的 .atlas 文件以及  .png 文件，里面的 .rec 文件是供打包工具使用的，开发人员用不着，删除掉也没有关系。.atlas、.png 文件以原来的资源目录进行命名。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 3][]

9、打开上面的 .png 文件可以发现，其实就是将原来的多张 .png 图片合成到了这一张， 而 .atlas 文件中就是记录了 对应的 .png 中的图像信息。

10、有了 .atlas 与 .png 文件就可以开发图集动画了，图集动画部分可以参考《[ LayaAir 图集动画2—图集动画][LayaAir _2]》，本文不再过多累述。

## 资源管理器内自动打包图集 ##

再说明一次，本文使用的是 LayaAir IDE 2.0.0beta 5 版本。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 4][]

1、 "代码模式"下，在 assets(资产)目录下新建一个 girs 目录，然后将准备的图片资源放置进去，同理如果还有其它的资源照样可以新建目录，然后放进去即可。

2、如何如下所示，进入“编辑模式”。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 5][]

3、在资源管理器目录(Assets)内的全部资源，当按 F12 或者 Ctrl+F12 发布项目时，会自动打包为图集。如下所示打包好之后自动放入到了 bin/res/atlas 目录下，而图集动画开发的图集资源本身就是需要放入到此处的，所以非常方便。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 6][]

4、打包好的 .atlas、.png 文件的名称同样是以图片资源的目录名称进行命名。

其它更多详细内容可以参考官网：[https://ldc.layabox.com/doc/?language=zh&nav=zh-js-2-2-0][https_ldc.layabox.com_doc_language_zh_nav_zh-js-2-2-0]

# 图集文件介绍 #

**1）打包生成的文件**

打包后，会生成图集专用资源（同名的.atlas文件或者.json文件、.png文件），以及图集打包程序用的rec文件（这个rec文件打包软件使用，开发者不用管）。

**2）atlas 与 json 的区别**

.atlas 与 .json 文件彼此独立，都是 png 图集的配置信息。

.atlas 是 LayaAirIDE 特有的图集配置信息，仅用于图集，所以在加载 .atlas 时不需要填写类型，和加载普通的单图方式一样，更加方便，是推荐的图集加载方式。  
　  .json 是一种兼容第三方的图集配置方式，由于.json 文件应用广泛，不仅仅用于图集，所以为了识别是否为图集配置信息，在加载.json文件的图集时，需要填写类型进行区分。

> //atlas方式图集使用示例  
> Laya.loader.load("./res/atlas/ui.atlas", Handler.create(this, onLoaded));  
> //json方式图集使用示例  
> Laya.loader.load(\[\{url: "res/atlas/ui.json", type: Loader.ATLAS\}\], Handler.create(this, onLoaded));

# 图集动画预览 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 7][]

然后在应用的入口 Main.js 中编码如下：

//初始化舞台
        Laya.init(1334, 750,Laya.WebGL);
        //设置舞台背景为白色
        Laya.stage.bgColor = "#fff";
        
        //创建猎豹、小女孩动画实例
        let leopardAni = new Laya.Animation();
        let girlAni = new Laya.Animation();
    
        //设置精灵的位置
        leopardAni.pos(100,50);
        girlAni.pos(300,60);
    
        //加载动画图集，加载成功后执行回调方法
        leopardAni.loadAtlas("res/atlas/leopard.atlas",Laya.Handler.create(this,onLoaded));
        function onLoaded(){
            //添加到舞台
            Laya.stage.addChild(leopardAni);
            //设置播放间隔，单位毫秒
            leopardAni.interval = 100;		
            //播放动画
            leopardAni.play();
        }
    
        //与上同理
        girlAni.loadAtlas("res/atlas/girs.atlas",Laya.Handler.create(this,girlOnLoad));
        function girlOnLoad(){
            Laya.stage.addChild(girlAni);
            girlAni.interval = 80;
            girlAni.play();
        }

![20181216164507357.gif][]

官网参考地址：[https://ldc.layabox.com/doc/?language=zh&nav=zh-js-1-5-0][https_ldc.layabox.com_doc_language_zh_nav_zh-js-1-5-0]

需要动画图片资源的可以下载：[https://download.csdn.net/download/wangmx1993328/10852378][https_download.csdn.net_download_wangmx1993328_10852378]

[https_ldc.layabox.com_doc_language_zh_nav_zh-js-2-2-0]: https://ldc.layabox.com/doc/?language=zh&nav=zh-js-2-2-0
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70]: /images/20220404/8610434cd2284a248ffcaf4669dfaca8.png
[20181216153540249.png]: /images/20220404/1688de1725804042b4e6fb19cf3e1b04.png
[20181216153602289.png]: /images/20220404/440f7ad1201245538cd2c44950c35b57.png
[20181216154025227.png]: /images/20220404/9e768e39910f48f487dc163edfc1ea33.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1]: /images/20220404/935d5248c69f4ad3babe5bb7400b571f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 2]: /images/20220404/069bf4515e9345389f3605d7a35ac7f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 3]: /images/20220404/b93a67a8854c47cea51c4d2ea66875b8.png
[LayaAir _2]: https://blog.csdn.net/wangmx1993328/article/details/85037903
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 4]: /images/20220404/b71b66c125594cd0b2a6397991748557.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 5]: /images/20220404/77f9ff2e280b4fea9cf0ec1d75a0db4f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 6]: /images/20220404/440b1f420ea1411ca490978abd9d5eb1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 7]: /images/20220404/b1eae8526cb84265b8e7d598498c71d2.png
[20181216164507357.gif]: /images/20220404/630835b2ffb84aaab646971559ae63af.png
[https_ldc.layabox.com_doc_language_zh_nav_zh-js-1-5-0]: https://ldc.layabox.com/doc/?language=zh&nav=zh-js-1-5-0
[https_download.csdn.net_download_wangmx1993328_10852378]: https://download.csdn.net/download/wangmx1993328/10852378