目录
图集制作·理论介绍
官网参考地址：https://ldc.layabox.com/doc/?language=zh&nav=zh-js-2-2-0
1、图集(Atlas)是游戏开发中常见的一种美术资源，通过工具将多张图片合并成一张大图，并通过 atlas 与 json 等格式的文件存放原始图片资源信息。下图就是采用 LayaAirIDE 打包好的一张 png 图集资源：
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、图片资源文件的命名可以没有规律，但是建议有规律的命名。
IDE 图集打包工具打包图集
IDE 导航的工具菜单中，点击图集打包打开图集打包工具面板。本文使用的是 LayaAir IDE 2.0.0beta5 版本。
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 文件以原来的资源目录进行命名。
9、打开上面的 .png 文件可以发现，其实就是将原来的多张 .png 图片合成到了这一张， 而 .atlas 文件中就是记录了 对应的 .png 中的图像信息。
10、有了 .atlas 与 .png 文件就可以开发图集动画了，图集动画部分可以参考《 LayaAir 图集动画2—图集动画》，本文不再过多累述。
资源管理器内自动打包图集
再说明一次，本文使用的是 LayaAir IDE 2.0.0beta 5 版本。
1、 "代码模式"下，在 assets(资产)目录下新建一个 girs 目录，然后将准备的图片资源放置进去，同理如果还有其它的资源照样可以新建目录，然后放进去即可。
2、如何如下所示，进入“编辑模式”。
3、在资源管理器目录(Assets)内的全部资源，当按 F12 或者 Ctrl+F12 发布项目时，会自动打包为图集。如下所示打包好之后自动放入到了 bin/res/atlas 目录下，而图集动画开发的图集资源本身就是需要放入到此处的，所以非常方便。
4、打包好的 .atlas、.png 文件的名称同样是以图片资源的目录名称进行命名。
其它更多详细内容可以参考官网：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));
图集动画预览
然后在应用的入口 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();
}
官网参考地址：https://ldc.layabox.com/doc/?language=zh&nav=zh-js-1-5-0
需要动画图片资源的可以下载：https://download.csdn.net/download/wangmx1993328/10852378