Laya Atlas

图集Atlas是游戏开发中常用的一种美术资源，通过工具将多张图片合并成一张大图，并通过.atlas或.json等格式的文件存放原始图片资源信息。

游戏中使用多张图片合成的图集资源作为美术资源的优势

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

图集格式

LayaAir IDE支持对PNG和JPG两种资源格式打包为图集，图集打包的原始资源推荐使用PNG，因为JPG的体积会较大。需要注意的是，PNG原始资源的位深度不能超过32，否则打包出来的图集会出现花屏。另外，PNG与JPG资源不能是其它格式资源重命名所产生的PNG和JPG格式。

Laya图集文件区别

.atlas和.json文件都是PNG图集的配置信息文件，最早期LayaAir引擎默认使用JSON作为图集配置信息的格式，后来为了优化引擎的使用，默认修改为了.atlas，为了兼容旧版本，生成图集的时候可选择两种格式。使用时这两种后缀的区别在于：

.atlas是Laya特有的图集格式，仅用于图集，在加载.atlas时无需填写类型和加载普通单图方式一样，更为方方便，是推荐的图集加载方式。

Laya.loader.load("./res/atlas/ui.atlas", Laya.Handler.create(this, onLoaded)
);

.json是一种兼容第三方的图集配置方式，由于.json文件应用广泛，不仅可以用于图集，所以为了是被是否为图集配置信息，在加载.json文件的图集配置时，需要填写类型以进行区分。

Laya.loader.load([{url:"./res/atlas/ui.json", type:Laya.Loader.ATLAS}],Laya.Handler.create(this, this.onLoaded)
);

图集打包

LayaAir IDE中打包图集的方式有两种，分别是使用LayaAir IDE的图集打包工具和资源管理器内自动打包图集。

手动打包图集

LayaAir IDE中的【图集打包工具】会将每个目录打包为一个图集，特效类动画因为每个特效帧数量不多可以将多个特效组合到一张图集资源并存放在一个目录内。通过LayaAir IDE对图集打包后，会生成三个文件分别是.atlas、.json、.png文件。动画类Animation通过加载.atlas或.json文件获取图像资源，建议使用.atlas文件，因为在使用时无需加入类型设置。对于动画图集资源需要注意的是，针对帧数较多的动画建议一套图片一个资源在命名上根据动作名称_帧序号的方式命名。

【图集打包工具】位于设计模式 > 菜单 > 工具 > 图集打包。

图集打包工具

如何手动打包图集呢？

存放在资源管理器目录laya/assets目录下的所有图片资源，在使用快捷键F12或Ctrl+F12导出时，会自动根据当前目录名打包为图集。

进入设计模式，按F12导出，此时IDE会将资源Assets（对应laya/assets目录）中的图片打包成图集，打包后的图集会保存到发布目录的bin/res/atlas目录下，图集会同时生成.png和.atlas（JSON）文件。

当用户手动删除了图集文件但并未删除原始资源文件时，如果原始资源文件没有发生改变，直接使用F12是无法重新导出图集文件的。此时，可以通过Ctrl+F12清理并导出。或者直接将图集文件删除后再使用F12导出，即可正常导出图集。

如何修改默认的图集打包后的导出位置呢？

如果想要修改图集默认的导出目录，可以在【设计模式】下按快捷键F9进入【项目设置】，在【项目设置】面板的【图集设置】的【资源发布目录】选项中修改图集导出路径。同时可以设置图集的最大宽高，以及不准备打包的单图宽高限制等。

进入设计模式，按F9弹出项目设置，选中图集设置。

图集设置

如何将未使用的图片资源不打包到图集内呢？

在【资源管理器】中如果存在没有在项目场景中使用的图片，可以通过【菜单】中的【导出】选择-发布（不打包未使用的资源）】功能。将未使用的资源不打包到图集中，以减少图集的大小。这种打包方式由于需要遍历所有资源的使用状态，会导致打包速度缓慢，因此只有在发布线上版本的时候才会使用到。

导出

如何将单张图片资源不打包到图集内呢？

在【设计模式】的【资源管理器】中选中目标图片资源，左键双击或右键选择【设置默认属性】。

设置默认属性

在弹出的【资源属性设置】面板中选择下方的【打包类型】中的【不打包】选项，选中的图片资源就不i会被打包到图集中。

不打包

如何使用图集资源中指定的图片呢？

例如：项目中如果用到图集中的资源则需要预加载图集资源，然后设置图片的皮肤skin属性值为 [原小图目录名称/原小图资源名.png]，从图集中取出小图资源其实就是图集打包前对应的目录与资源名称和路径。

class Test {constructor() {Laya.init(Laya.Browser.width, Laya.Browser.height, Laya.WebGL);this.onInit();}initStage(){Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;Laya.stage.bgColor = "#000000";}onInit(){this.ATLAS_PATH = "./res/atlas/avatar.atlas";Laya.loader.load(this.ATLAS_PATH, Laya.Handler.create(this, function(){let image = new Laya.Image();image.skin = "avatar/avatar1.png";Laya.stage.addChild(image);}));}
}
//启动
new Test();

自动打包图集

Laya会将小于512*512的图片打入自动大图集中，如果图片被打入自动图集中，图片的内存就会交由Laya自动处理，开发者不能手工删除。
Laya最多能生成6张2048*2048的自动图集，3D为2张，可通过AtlasResourceManager.maxTextureCount设置。
使用自动图集可以减少drawcall，缺点是部分资源释放不了，只有当自动图集全部被占满时才能释放部分资源。

若不想将图片打入自动图集，有三种方法实现：

获取到图片的纹理 texture 关闭合并到图集的开关

let texture = Laya.loader.getRes(url);//获取图片的纹理
texture.bitmap.enableMergeInAtlas = false;//关闭合并到图集

关闭自动图集功能

Config.atlasEnable = false;

laya.webgl.atlas.AtlasResourceManagerAtlasResourceManager._disable();

设置图集限制大小

//大图合计管理器
// laya.webgl.atlas.AtlasResourceManager
//设置进入大图合集的最大尺寸
laya.webgl.atlas.AtlasResourceManager.atlasLimitWidth = 256;
laya.webgl.atlas.AtlasResourceManager.atlasLimitHeight = 256;

动画基类

Laya提供的Animation动画类使用多种动画资源生成游戏动画，使用LayaAir IDE创建时间轴动画的方式生成文件后缀名为.ani的动画资源，也可以使用图集打包动画帧图片的方式，创建文件名为.atlas的图集资源，然后赋给动画类去加载使用。

结构	描述
Package	`laya.display.Animation`
Class	`Laya.Animation`
Hierarchy	`Animation / AnimationBase`

Animation动画类继承自AnimationBase动画基类，动画基类提供了基础的动画播放控制方法和帧标签事件等相关功能。动画基类可以被继承，但不能直接被实例化，因为动画基类中的部分方法需要子类去实现。

结构	描述
Package	`laya.display.AnimationBase`
Hierarchy	`AnimationBase / Sprite`

动画基类AnimationBase提供了两个子类，分别是Animation动画类和FrameAnimation帧动画类。

属性	描述
`loop:boolean`	是否循环播放，当调用`play()`播放动画方法时，可以设置`loop`属性为指定的参数。
`wrapMode:Number = 0`	动画的播放顺序

动画播放顺序wrapMode分为三种

AnimationBase.POSITIVE:number = 0 默认正序播放
AnimationBase.WRAP_REVERSE:number = 1 倒序或逆序播放
AnimationBase.WRAP_PINGPONG:number = 2 pingpong播放即按指定顺序播放完结尾后，若要继续播放则会改变播放顺序。

存取器	描述
`count`	动画帧的总数
`index`	动画帧当前的索引
`interval`	动画帧播放的间隔毫秒数
`isPlaying`	动画是否正在播放中

动画播放的帧间隔毫秒时间interval默认值依赖于Config.animationInterval = 50选项，通过配置Config.animationInterval选项可以修改默认动画帧的间隔毫秒数。如果想要为某动画设置独立的帧间隔时间，可以使用set interval。需要注意的是如果动画正在播放，设置interval后会重置帧循环定时器的起始时间为当前时间，也就是说，如果频繁的设置interval将会导致动画帧更新的时间间隔比预想的要慢，甚至会不更新。

方法	描述
`addLabel`	增加帧标签到指定索引的帧上
`removeLabel`	删除指定帧标签
`gotoAndStop`	将动画切换到指定帧并停留在那里
`play`	开始播放动画
`stop`	停止播放动画
`clear`	停止播放动画并清理对象属性

动画类

创建动画Animation类的实例

let ani = new Laya.Animation();

Animation类是Graphics动画类，其实现是基于Graphics的动画创建、播放和控制的接口。Animation类使用了动画模板缓存池，以一定的内存开销来节省CPU开销。当相同的动画模板被多次重复使用时，相比每次都创建新的动画模板，使用动画模板池只需创建一次，缓存之后可以多次使用，从而节省了动画模板创建的开销。动画模板缓存池是以key-value键值对的形式进行存储，键名key可以自定义，也可以从指定的配置文件中读取。键值value是对应的动画模板，是一个Graphics对象数组，每个Graphics对象对应着一个帧图像，动画的播放实际上是定时切换Graphics对象。

Laya Atlas相关推荐

稻盛和夫　泥泞的路_计算的未来可能是泥泞的
稻盛和夫泥泞的路煤泥的美好生活 (The wonderful life of slime) Let me introduce you to slime molds: a group - actua ...
laya zip更新方案
1.将要打包的的资源和layaairfiles.txt文件一起打成zip. 2.预加载阶段,先将zip包通过downfile下载并解压到缓存目录. 3.设置baseurl,开始预加载所有资源. 4.下 ...
Laya自动图集原理
关于Laya自动图集 Laya会把size小于512*512的图片打入自动大图集中.如果图片被打入自动图集中,图片的内存就交由Laya自动处理,开发者不能手动删除. Laya最多生成6张2048*20 ...
LAYA和TypeScript制作H5入门——页面制作
上一篇: LAYA和TypeScript制作H5入门--准备工作一般情况下,一个H5是由多个相互关联的ui页面串联组成.遵循的大致逻辑一般是加载页面,开始页面,内容页面和结束页面.这些界面承担了用户 ...
Laya微信排行榜基于TypeScript脚本详细步骤
Laya 微信排行榜功能实现(ts脚本) Demo在最下面 Laya的微信排行榜分为主域和子域两个部分,主域就是游戏的包,子域是排行榜. 主域新建view场景,命名Ranking(命名随意)添加WX ...
Laya中贴图实时合并
策划同学想在游戏内增加投显子弹数量的功能,看了下Laya中并没有提供3d文本相关的组件,所以先去百度下看了下并没有相关的轮子可以直接使用,只能自己写下了首先分析下需求子弹数量投显只需要显示0-9 ...
Laya 笔记-LayaAir基础篇
屏幕适配获取浏览器DPR (Device Pixel Ratio)设备像素比:Laya.Browser.pixelRatio 逻辑宽高(逻辑分辨率的宽高):Laya.Browser.clientWi ...
Laya动画，整图动画，序列图动画，时间轴动画，龙骨动画
Laya动画基础 Egret帧动画工具类版本:2.1.1.1 序列图动画白鹭的序列图动画,使用TexureMerger合图,然后使用MovieClip类播放. Laya的话,使用图集打包工具合图, ...
Laya的动画制作，整图动画，序列图动画，时间轴动画，龙骨动画
参考: Laya动画基础 Egret帧动画工具类序列图动画白鹭的序列图动画,使用TexureMerger合图,然后使用MovieClip类播放. Laya的话,使用图集打包工具合图,然后使用Ani ...