layaAir引擎制作游戏的图集动画、时间轴动画、和骨骼动画总结一

LayaAir创建动画的两种方式

图集动画：把多张动画图片资源打包成图集，然后通过引擎的动画加载图集资源，并创建动画模板用于控制。

IDE动画：IDE创建UI动画或者动画模板文件，使用时间轴动画编辑器制作动画，动画文件再通过动画类加载控制使用。

两者适用范围：

时间轴动画编辑器是LayaAir中的核心模块。，通过对时间轴上的关键帧制作，自动生成运动中的动画帧，

可以快捷实现游戏中序列帧切换，alpha透明度渐变，位移，旋转、缩放等效果。

图集动画适合于游戏程序制作控制动画

IDE动画适合美术设计师直观制作动画，随时修改动画效果。

图集动画模块

一、通过LayaAirIIDE提供的打包工具打包图集

步骤如下：

1.建立资源管理文件夹，将所需要打包的文件夹放入其中，每个资源文件夹将产生一个图集资源

2.IDE菜单中打开图集打包工具，源路径设置为资源管理文件夹。

3.图集打包参数设置，包括图片资源的大小，输出格式设置。

 

图集最大宽度是 2048，不能超过这个限制，单独也不能超过512。

需要注意的一点打包图集的文件夹需要再包一层，否则打包不成功。

2的整次幂，如果勾选了，会压缩但是不一定会成功，一般不勾选。

空白裁剪会把没有用到的空白区域裁减掉，可以节省资源。

文件后缀默认atlas，使用atlas预加载不用指定图集类型，使用json的就需要指定图集类型，否则报错

使用拖拽方式或者浏览方式都可以。打包生成如下：

 

二、LayaAirIIDE项目自动打包图集功能

1.打开IDE所建立的项目

2.将动画资源拷贝到项目资源管理文件夹中，拖拽拷入或者打开目录拷贝都可以。

3.在项目中设置打包参数，包括导出格式、大小、导出目录等。

按F9或者选择文件下面的项目设置就可以打开。

使用清理和导出 ctrl+F12

或者自己手动删除bin下面的res重新打包F5，截图如下：

 

三、用代码加载图集资源来创建动画和创建图集动画模板

1.加载图集文件

2.创建动画Animation实例

3.创建动画模板creatFrames()  loadImages()

代码如下，对于动画播放的速度，等参数可以查看官网的API：

https://layaair.ldc.layabox.com/api/?category=Core&class=laya.display.AnimationPlayerBase

Laya.init(600, 400);
/**
 * 加载图集资源
 * 两个参数  执行域  和加载完成后的回调
 */  

Laya.loader.load("res/role.atlas",Laya.Handler.create(this,function(){
    this.roleAni = new Laya.Animation();
    Laya.stage.addChild(this.roleAni);
    this.roleAni.loadAtlas("res/role.atlas");
    //play() 播放  三个参数 从那哪一帧开始  是否自动播放 
    this.roleAni.play();
    //调整时间
    this.roleAni.interval = 100;
    //动画本身大小默认为0，可以自行设置
    this.roleAni.size(96,96);
    //在舞台的位置
    this.roleAni.pos((Laya.stage.width-this.roleAni.width)/2),((Laya.stage.height-this.roleAni.height)/2);
    // 每张图的大小，getBound一直在计算,耗用性能
    // var res = this.roleAni.getBound();
    // 设置中心点，就不需要减去自身宽度的一半
    this.roleAni.pivotX = this.roleAni.pivotY = 48;
    this.roleAni.pos(Laya.stage.width/2,Laya.stage.height/2);
}))

　　

使用loadImage（）和creatFrames方法，方法使用可以查找API；

代码如下：

Laya.init(600, 400);
/**
 * 加载图集资源
 * 两个参数  执行域  和加载完成后的回调
 */  

Laya.loader.load("res/role.atlas",Laya.Handler.create(this,function(){
    this.roleAni = new Laya.Animation();
    Laya.stage.addChild(this.roleAni);
    this.roleAni.loadAtlas("res/role.atlas");
    
    //play() 播放  三个参数 从那哪一帧开始  是否自动播放 动画名字
    // this.roleAni.play();
    //调整时间
    this.roleAni.interval = 100;
    //动画本身大小默认为0，可以自行设置
    this.roleAni.size(96,96);
    //在舞台的位置
    this.roleAni.pos((Laya.stage.width-this.roleAni.width)/2),((Laya.stage.height-this.roleAni.height)/2);
    // 每张图的大小，getBound一直在计算,耗用性能
    // var res = this.roleAni.getBound();
    // 设置中心点，就不需要减去自身宽度的一半
    this.roleAni.pivotX = this.roleAni.pivotY = 48;
    this.roleAni.pos(Laya.stage.width/2,Laya.stage.height/2);


   //使用loadImage()创建模板
    this.roleAni.loadImages(creatUrl(7,"attack","attack"));
    this.roleAni.loadImages(creatUrl(8,"move","move"));
    // this.roleAni.play(0,true,"move");
    Laya.Animation.createFrames(creatUrl(7,"attack","attack"));
    this.roleAni.play(0,true,"attack");
}))
// 减少填写固定的路径
function creatUrl(num,url){
    var arr = [];
    for(var i = 0;i<num;i++){
        arr.push("role/"+url+i+".png");
    }
    return arr;
}

使用IDE制作方式

IDE创建动画的类型

1、在ui界面中制作时间轴动画，动画嵌入在ui页面中，可通过代码控制其播放

2.创建独立的.ani格式动画文件。可以用于角色动画，特效动画等，通过动画类加载并控制

一、时间轴编辑器功能简介

1.动效模板的操作

2.时间轴关键帧的建立与基本操作

3.关键帧的位移、缩放、旋转、alpha动画

4、动画与缓动相结合

二、IDE基础动画制作

1、序列帧动画

直接把一组图片拖入到时间轴上，可以 用代码控制速度，也可以修改帧率

2、透明度变化动画

3.移动动画

可以调整x轴和y轴，控制位置变化

4.缩放动画

设置scaleX和scaleY即可

也可以设置anchorX和anchorY为0.5

5.倾斜角度动画

设置 skewX和skewY

6.旋转动画

设置每一帧的rotation从90 45 0 -45 可以制作旋转摇摆的动画

设置anchorx 和 anchorY 都是0.5 或者pivotX为width的一半  可以达到一样的效果，设置好中心点

三、UI动画的制作步骤

1.选择需要之多动画的组件并且开启动画编辑模式

2.动画关键帧编辑（位移、缩放、旋转、alpha等）

3.设置播放控制（也可以代码控制）

4.标签的添加

选中下面的小星星，选择缓动类型

代码控制如下：

Laya.init(1334, 750);

Laya.loader.load("res/comp.atlas",Laya.Handler.create(this,onload));
function onload(){
    this.tweenui = new ui.tweenuiUI();
    Laya.stage.addChild(this.tweenui);
    this.tweenui.ani.play(0,false);
    //播放完成后事件
    // this.tweenui.ani.on(Laya.Event.COMPLETE,this,oncompelete);
    //对动效模板进行监听
    this.tweenui.ani.on(Laya.Event.LABEL,this,onLabel);
}
function oncompelete(){
        console.log("我完成播放了！！")
}

function onLabel(label){
    console.log(this.tweenui.ani.index)
}