laya龙骨换装_Laya的动画制作，整图动画，序列图动画，时间轴动画，龙骨动画...

序列图动画

白鹭的序列图动画，使用TexureMerger合图，然后使用MovieClip类播放。

Laya的话，使用图集打包工具合图，然后使用Animation类播放。

一个泡泡爆炸的序列图

laya右上角选择工具，图集打包。

选择动画的父文件夹，后缀选择atlas，点击确定。

打包生成pao0.atlas和pao0.png

将动画文件atlas和png放入laya项目assets/anim文件夹下，并在代码中加载使用

public pao0:Laya.Animation;

onEnable(){

//加载动画资源

this.pao0 = new Laya.Animation();

this.pao0.loadAtlas("anim/pao0.atlas",Laya.Handler.create(this, this.onAnimLoaded));

}

private onAnimLoaded(){

//循环播放动画

Laya.stage.addChild(this.pao0);

this.pao0.play(0,true,"");

}

实际效果

动画模块来播放图集中的动画

白鹭中的话，这类需求也是TextureMerger来实现的。

laya中封装了这个工具类。

比如一个人物动画，有站立，跑步，攻击，死亡等动画，则打包到一个图集里，一次只play其中一个动画。

我们这里还是用泡泡来表示，泡泡分别有两个动画，一个蓝色爆炸，一个黄色爆炸。

两个泡泡打包到一个图集中

代码中使用

1. 这里是Laya.loader加载资源，而不是this.pao加载资源

2. aniUrls里的图片路径 "pao0/" 是图集名字，而不是图集的assets路径

public pao0:Laya.Animation;

onEnable(): void {

this.pao0 = new Laya.Animation();

//加载图集资源

Laya.loader.load("anim/pao0.atlas",Laya.Handler.create(this, this.onAnimLoaded));

}

private onAnimLoaded(){

Laya.stage.addChild(this.pao0);

//创建动画模板

Laya.Animation.createFrames(this.aniUrls("blue",5),"blue");

Laya.Animation.createFrames(this.aniUrls("yellow",5),"yellow");

//播放黄色泡泡爆炸

this.pao0.play(0,true,"yellow");

}

//获取动画图片地址的数组

private aniUrls(aniName:string,length:number):any{

var urls:any = [];

for(var i:number = 0;i

//动画资源路径要和动画图集打包前的资源命名对应起来

urls.push("pao0/" + aniName+i+".png");

}

return urls;

}

运行，效果如下。

整图动画

egret和laya都没有播放整图动画的。如果需要播放整图动画，则需要自己实现。

比如我在egret实现的可以播放序列图和整图动画的工具类

原文：https://www.cnblogs.com/gamedaybyday/p/11503104.html