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)
}