layaAir引擎製做遊戲的圖集動畫、時間軸動畫、和骨骼動畫總結一

LayaAir建立動畫的兩種方式

圖集動畫：把多張動畫圖片資源打包成圖集，而後經過引擎的動畫加載圖集資源，並建立動畫模板用於控制。

IDE動畫：IDE建立UI動畫或者動畫模板文件，使用時間軸動畫編輯器製做動畫，動畫文件再經過動畫類加載控制使用。

二者適用範圍：

時間軸動畫編輯器是LayaAir中的核心模塊。，經過對時間軸上的關鍵幀製做，自動生成運動中的動畫幀，

能夠快捷實現遊戲中序列幀切換，alpha透明度漸變，位移，旋轉、縮放等效果。

圖集動畫適合於遊戲程序製做控制動畫

IDE動畫適合美術設計師直觀製做動畫，隨時修改動畫效果。

圖集動畫模塊

1、經過LayaAirIIDE提供的打包工具打包圖集

步驟以下：

1.創建資源管理文件夾，將所須要打包的文件夾放入其中，每一個資源文件夾將產生一個圖集資源

2.IDE菜單中打開圖集打包工具，源路徑設置爲資源管理文件夾。

3.圖集打包參數設置，包括圖片資源的大小，輸出格式設置。

 

 

圖集最大寬度是 2048，不能超過這個限制，單獨也不能超過512。

須要注意的一點打包圖集的文件夾須要再包一層，不然打包不成功。

2的整次冪，若是勾選了，會壓縮可是不必定會成功，通常不勾選。

空白裁剪會把沒有用到的空白區域裁減掉，能夠節省資源。

文件後綴默認atlas，使用atlas預加載不用指定圖集類型，使用json的就須要指定圖集類型，不然報錯

使用拖拽方式或者瀏覽方式均可以。打包生成以下：

 

2、LayaAirIIDE項目自動打包圖集功能

1.打開IDE所創建的項目

2.將動畫資源拷貝到項目資源管理文件夾中，拖拽拷入或者打開目錄拷貝均可以。

3.在項目中設置打包參數，包括導出格式、大小、導出目錄等。

按F9或者選擇文件下面的項目設置就能夠打開。

使用清理和導出 ctrl+F12

或者本身手動刪除bin下面的res從新打包F5，截圖以下：

 

 

 

3、用代碼加載圖集資源來建立動畫和建立圖集動畫模板

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建立動畫的類型

一、在ui界面中製做時間軸動畫，動畫嵌入在ui頁面中，可經過代碼控制其播放

2.建立獨立的.ani格式動畫文件。能夠用於角色動畫，特效動畫等，經過動畫類加載並控制

1、時間軸編輯器功能簡介

1.動效模板的操做

2.時間軸關鍵幀的創建與基本操做

3.關鍵幀的位移、縮放、旋轉、alpha動畫

四、動畫與緩動相結合

2、IDE基礎動畫製做

一、序列幀動畫

直接把一組圖片拖入到時間軸上，能夠 用代碼控制速度，也能夠修改幀率

 

二、透明度變化動畫

 

 

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的一半  能夠達到同樣的效果，設置好中心點

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