【v2.x OGE教程 11】 動畫編輯器幫助文檔

【v2.x OGE教程 11】

動畫編輯器幫助文檔

版本	日期	作者	說明
1.0	2014-9-3	橙子游戲	文檔創建

一、簡介

動畫編輯器用於遊戲動畫的可視化編輯,支持序列幀動畫和關鍵幀動畫。通過解析生成的數據文件即可獲取動畫信息，並能隨時調整，以減少開發工作量，提高開發效率。

二、相關概念

1. 幀

幀是動畫在某個時間點的狀態；一系列的幀組成了動畫的時間線，動畫播放時，通過幀的切換，實現動畫效果

2. 序列幀

序列幀組成序列幀動畫，這種動畫中，僅通過靜態圖片的切換來實現動畫效果

3. 關鍵幀

關鍵幀記錄某幀的狀態，包括要繪製的圖片資源，圖片的位置、旋轉、縮放和顏色設置等；播放動畫時，通過當前幀的位置結合關鍵幀數據即可計算出當前幀的屬性，而無需逐幀存儲其屬性

4. 座標系

動畫編輯器採用一個二維平面座標系；橫軸向左爲正，向右爲負，縱軸向上爲正，向下爲負

5. 節點

1) 定義

節點是動畫的基本組成部分，是一個圖片或者一組序列幀

2) 位移

節點相對於第一幀的位移

3) 旋轉\縮放中心

節點旋轉或縮放時的中心點；在動畫編輯器中，是在資源中定義的

4) 旋轉

節點繞旋轉中心的旋轉角度；正數表示順時針旋轉，負數表示逆時針旋轉

5) 資源

節點在當前幀所繪製的資源

6) 縮放

節點相對於縮放中心點的縮放比例，分橫向和縱向

7) 透明度

節點的透明度，取值區間爲0-255；0表示完全透明，255表示不透明

8) 顏色

節點的顏色增量，R,G,B格式，三個數字分別表示紅綠藍三種顏色的增量，取值區間爲 0-255

 

三、主界面

 

圖01_主界面

 

 

 

 

1. 畫布

1) 簡介

畫布用於動畫預覽，動畫元素的選擇和移動

圖02_畫布

2) 選擇節點

鼠標左鍵單擊節點對應的圖片即可選中節點，選中後，節點中心會繪製一個灰色圓圈，表示已經被選中

3) 移動節點

用鼠標左鍵拖動節點圖片即可移動節點，移動之後，關鍵幀的“位移”屬性將同步更新

注意：僅當所選中的節點在當前幀上添加了關鍵幀時，才能對節點調整節點的位移、縮放、旋轉等屬性

4) 移動座標系

用鼠標左鍵按住畫布的空白區域並拖動，鬆開鼠標後即完成座標系的移動

5) 縮放

按住Ctrl鍵，然後滾動鼠標滾輪即可縮放畫布，畫布左上角的文字顯示當前的縮放百分比

2. 菜單欄

 

1) 簡介

菜單欄是編輯器常用操作的集合，包括“文件”、“設置”、“預覽”和“幫助”菜單

2) 文件菜單

①　新建項目

用於打開“新建項目”窗口，在該窗口中輸入新項目名稱後點擊確定按鈕即可創建一個新項目

 

圖03_新建項目

 

注意：新項目名稱不能與已有項目的名稱重複

②　打開項目

用於打開已有項目。

點擊菜單按鈕，在彈出窗口中選擇要打開的項目配置文件（xml格式的）即可打開項目(目前僅支持從程序安裝目錄下讀取項目)

 

圖04_打開項目

③　保存項目 

用於保存對項目的修改

④　導出項目

用於導出項目所生成的動畫數據文件。

點擊菜單,在彈出窗口中選擇要導出的目標文件夾，再點擊確定後將在指定目錄下 生成動畫數據文件

 

 

圖05_導出項目

3) 設置菜單

①　循環播放 

用於設置是否循環預覽動畫，勾選時表示循環

②　播放速度 

用於設置預覽時的播放速度，單位是“幀/秒”

③　設置背景 

² 選擇背景圖片

用於設置畫布的背景圖片

注意：背景圖片自動與畫布座標系的第二象限對齊；背景圖片僅用於預覽，並不導出到動畫數據文件中

² 刪除背景

用於刪除畫布的背景圖片

3. 預覽菜單

1) 預覽 

從當前幀開始預覽動畫；單擊後，“預覽”菜單的文字變爲“停止”，如果未設置循環播放，則當播放到動畫末尾時即停止預覽，菜單的文字將變爲“預覽”

2) 停止

開始預覽後，“預覽”菜單的文字將變爲“停止”，點擊即停止播放，動畫將定格在當前正在繪製的幀

4. 幫助菜單

用於打開幫助菜單

 

5. 資源列表

1) 簡介

資源列表是動畫素材的集合，用於動畫素材的導入、序列幀的編輯等

 

圖06_資源列表

資源列表是一個樹狀結構，第一級表示皮膚或者序列幀，第二級是序列幀的幀列表；資源列表的操作主要藉助右鍵彈出菜單完成

2) 導入皮膚

用於導入動畫素材，點擊後在彈出的對話框中選擇要導入的圖片再點擊確定即可完成導 入（可多選），支持bmp、jpg和png等常用圖片格式

3) 導入序列幀

用於導入序列幀的素材，點擊後在彈出的對話框中選擇要導入的圖片（可多選），再點擊確定，這些圖片將組合成一個序列幀動畫；序列幀的播放順序按文件名升序排列

4) 重命名

用於重命名皮膚，應避免使用中文

注意：導入資源後，編輯器會自動將對應的皮膚命名爲資源的文件名（如果是序列幀則取序號左邊不包含下劃線的部分），一般情況下不要重命名皮膚名稱，，否則動畫素材將無法解析

5) 編輯序列幀

用於編輯序列幀，點擊後彈出“序列幀編輯”窗口

 

圖07_序列幀編輯窗口

窗口左側是按播放順序排列的序列幀列表，右側是各幀的播放時長

①　調整序列幀播放順序

點擊要調整的序列幀所在的單元格，選擇當前幀要播放的圖片素材即可

注意：不能重複選擇同一個圖片素材，即一個圖片素材只能在一個序列幀動畫中播放一次

②　調整序列幀播放時長

點擊要調整的序列幀對應的“播放時長”單元格，輸入合適的時長即可，播放時長的單位是“幀”，與動畫中兩個時間切片之間的間隔對應

注意：當動畫的總時長和序列幀動畫的總時長不相等時，通過計算當前的時刻與序列幀總時長的模餘來獲取當前應繪製的序列幀

6) 插入幀

用於在當前選中的序列幀前面插入一個序列幀，單擊後打開一個對話框，在對話框中選 擇要插入的圖片素材，再點擊確定即可插入一個序列幀

7) 追加幀

用於在當前序列幀末尾追加一個序列幀，單擊後打開一個對話框，在對話框中選擇要插 入的圖片素材，再點擊確定即可追加一個關鍵幀

8) 刪除幀

用於刪除選中的序列幀，如果是僅有的一個序列幀則不可刪除

 

6. 預覽區域

1) 簡介

預覽區域用於顯示和編輯動畫素材

 

圖08_預覽區域

 

2) 縮放

①　縮放比例

預覽區域左上角顯示當前的縮放比例

②　縮放

按住Ctrl鍵,再滾動鼠標滾輪即可縮放圖片

3) 碰撞區域

碰撞區域用於物理引擎檢測碰撞，動畫編輯器可支持多個矩形碰撞區域

①　添加碰撞區域

在合適的位置按住鼠標左鍵，再拖動鼠標到合適的位置，鬆開鼠標後即可在圖片上繪製一個碰撞區域

②　移動碰撞區域

用鼠標拖動表示碰撞區域的透明矩形框即可移動碰撞區域

③　調整碰撞區域大小

讓鼠標懸浮在碰撞區域邊緣，待鼠標樣式改變時，按住並拖動鼠標即可調整碰撞區域的寬和高

④　刪除碰撞區域

右鍵單擊碰撞區域，在彈出菜單中單擊“刪除碰撞區域”菜單即可刪除碰撞區域

4) 設置縮放和旋轉中心

①　通過菜單設置

右鍵單擊預覽區域的空白區域，在彈出菜單中點擊“設置XX中心”，打開設置窗口

 

圖09_設置座標

依次輸入X、Y座標，再點擊確定即可修改旋轉和縮放中心的位置

②　通過鼠標設置

直接拖動旋轉中心（紅色的圓點）和縮放中心（藍色的圓點）即可調整

7. 節點列表

1) 簡介

節點列表顯示項目中的所有節點，這些節點按照繪製順序由下往上排列，即繪製時，先繪製靠上的節點，再繪製後面的節點，如果重合則遮擋先繪製的節點；節點列表的主要操作通過右鍵彈出菜單完成

 

 

2) 新建節點

在節點列表的右鍵彈出菜單中展開“新建節點”，然後選擇要添加的圖片或者序列幀，即可新建一個節點，同一個資源可以被多次添加到節點列表中

3) 添加到動畫

在節點列表中選中要添加的節點，點擊鼠標右鍵，在彈出菜單中選擇“添加到動畫”即可把該節點添加到當前動畫的第一幀中；同一個動畫中，節點不能重複添加

4) 刪除節點

在節點列表中選中要刪除的節點，點擊鼠標右鍵，在彈出菜單中選擇“刪除節點”即可把該節點從項目中刪除，與之關聯的動畫中相應節點都將被刪除

5) 重命名節點

在節點列表中選中要重命名的節點，點擊鼠標右鍵，在彈出菜單中選擇“重命名”，然後輸入新的名稱即可重命名該節點；新輸入的名稱不能與已有的節點重複，否則會重命名失敗；應避免使用中文

6) 調整繪製順序

直接上下拖拽節點到合適的位置即可調整節點的繪製順序

8. 動作列表

1) 簡介

動作列表顯示項目中的動畫列表，即用相同的節點列表可創建多個動畫，其主要操作通過右鍵菜單完成

2) 切換當前動畫

選中要操作的動畫即可切換，畫布和幀列表將同步更新顯示

3) 添加動畫

在動作列表的右鍵菜單中選擇“添加動畫”即可添加一個新的動畫到項目中

4) 重命名動畫

選擇要重命名的動畫，然後在右鍵菜單中選擇“重命名”，輸入新的名稱即可重命名該動畫；新的名稱不能與已有的動畫重名，否則會重命名失敗；應避免使用中文

5) 刪除動畫

選擇要刪除的動畫，然後在右鍵菜單中選擇“刪除動畫”即可刪除該動畫

 

9. 幀列表

1) 簡介

幀列表顯示動畫的各個節點的關鍵幀及時間線，提供幀切換、關鍵幀編輯等功能

 

圖10_幀列表

 

 

2) 幀標尺

幀標尺用於標識當前所在的幀位置,點擊幀標尺可以切換當前幀位置

3) 關鍵幀控件

關鍵幀控件標識節點關鍵幀的位置;點擊控件可將其選中,被選中後顏色變爲藍色

4) 時間線控件

時間線控件顯示某個節點在動畫播放時,顯示的時間片段;點擊控件可將其選中,被選中後顏色變爲淺藍色;

注意:一個節點的時間線可能是連續的,也可能是間斷的,且不一定從動畫播放時開始,也不一定到動畫結束時截止,視節點的顯示時間而定

5) 幀切換器

用於顯示和切換當前幀位置,拖動控件以切換當前幀

6) 右鍵菜單

對幀列表的操作主要藉助右鍵菜單來完成

 

 

①　添加關鍵幀

² 點擊選中要添加關鍵幀的節點（如果節點尚未添加到動畫中,可在節點列表中通過“添加到動畫”右鍵菜單來添加）對應的時間線，此時該時間線控件變爲淺藍色

² 拖動幀切換器，或者點擊幀標尺，將當前幀切換到要添加關鍵幀的位置

² 右鍵單擊幀列表區域，在彈出菜單中選擇“添加關鍵幀”

說明：

1. 關鍵幀不能重複添加

2. 如果新添加的關鍵幀之後沒有關鍵幀，則新關鍵幀的位移、旋轉等屬性將默認從前一幀複製

3. 如果新添加的關鍵幀位於兩個關鍵幀之間，則新關鍵幀的屬性的默認值將通過其前後兩幀及幀索引計算得出

②　複製關鍵幀

² 點擊選中要複製的關鍵幀控件，此時該控件變爲藍色

² 右鍵單擊幀列表區域，在彈出菜單中選擇“複製關鍵幀”即可複製該關鍵幀的數據

③　粘貼關鍵幀

² 拖動幀切換器，或者點擊幀標尺，將當前幀切換到要粘貼關鍵幀的位置

² 右鍵單擊幀列表區域，在彈出菜單中選擇“粘貼關鍵幀”即可添加一個關鍵幀，該關鍵幀的數據複製自上一次被複制的關鍵幀

說明：

1. 僅能在同一個節點內複製粘貼關鍵幀數據

2. 如果指定幀索引處已存在關鍵幀，則不能再粘貼

④　刪除關鍵幀

² 點擊選中要刪除的關鍵幀控件，此時該控件變爲藍色

² 右鍵單擊幀列表區域，在彈出菜單中選擇“刪除關鍵幀”即可刪除該關鍵幀

⑤　移除節點

² 點擊選中要移除的節點對應的時間線控件，此時該時間線控件變爲淺藍色

² 右鍵單擊幀列表區域，在彈出菜單中選擇“移除節點”即可將該節點從動畫中移除

 

 

10. 屬性列表

1) 簡介

屬性列表用於顯示和設置關鍵幀的各項屬性

 

圖11_屬性列表

2) 位置

用於顯示節點在畫布中的座標，該值僅用於動畫預覽，與動畫的實際位置無關

3) 位移

用於顯示和設置節點相對於其起始位置的位移

4) 旋轉

用於顯示和設置節點在當前幀的旋轉角度，分爲x、y、z三種，分別對應節點在右手座標系的x、y、z軸方向上的旋轉角度；正值爲順時針旋轉，負值爲逆時針旋轉

5) 資源

用於顯示節點在當前幀所繪製的資源名稱（圖片資源或者序列幀）

6) 縮放

用於顯示和設置節點的縮放比例，依次爲橫向和縱向

7) 透明度

用於顯示和設置節點的透明度

8) 顏色

用於顯示和設置節點的顏色增量，依次爲紅、綠、藍

9) “隱藏”複選框

用於暫時隱藏選中的節點，以方便編輯其它的節點

四、序列幀動畫示例

1. 創建項目

1) 點擊文件菜單，選擇新建項目

2) 在彈出的對話框中輸入項目名稱，點擊確定

2. 導入序列幀

1) 右鍵單擊“資源列表”區域，在彈出菜單中選擇“導入序列幀”

2) 在彈出的對話框中依次選擇要導入的序列幀圖片，再點擊“打開”按鈕

 

圖12_序列幀示例_導入序列幀

3) 在彈出的“序列幀編輯”對話框中設置序列幀的播放順序和播放時長，然後點擊“確定”按鈕

 

圖13_序列幀示例_設置序列幀播放時長

4) 修改資源名稱爲合適的文本

3. 創建節點

1) 右鍵單擊“節點列表”區域，在彈出菜單中選擇“新建節點”，再選擇合適的資源

 

圖14_序列幀示例_新建節點

2) 修改節點名稱爲合適的文本

 

4. 創建動畫

1) 右鍵單擊“動作列表”區域，在彈出菜單中選擇“添加動畫”

 

圖15_序列幀示例_添加動畫

2) 修改動畫名稱爲合適的文本，並選中該動畫

5. 將節點添加到動畫中

1) 在“節點列表”中選擇要添加的節點

2) 右鍵單擊“節點列表”區域，在彈出菜單中選擇“添加到動畫”

 

圖16_序列幀示例_添加到動畫

6. 設置序列幀動畫時長

1) 將節點添加到動畫中時，程序會自動在第0幀添加一個關鍵幀

2) 計算序列幀動畫的總時長的幀數

3) 拖動“幀列表”區域的“幀切換器”或者點擊“幀標尺”，將當前幀切換到與序列幀動畫“總時長幀數”相同的地方

4) 右鍵單擊“幀列表”區域，在彈出菜單中選擇“添加關鍵幀”，爲節點添加一個關鍵幀

 

圖17_序列幀示例_添加關鍵幀

五、關鍵幀動畫示例

1. 創建項目

新建一個項目

2. 導入圖片素材和序列幀

1) 右鍵單擊“資源列表”區域，在彈出菜單中選擇“導入皮膚”或“導入序列幀”

2) 在彈出的對話框中依次選擇要導入的圖片，再點擊“打開”按鈕

3) 修改資源名稱爲合適的文本，並設置序列幀播放信息

3. 創建節點

依次爲圖片資源和序列幀創建相應的節點

 

4. 創建動畫

創建動畫，並選中，將其設置爲當前動畫

 

5. 將節點添加到動畫中

1) 在“節點列表”中選擇要添加的節點

2) 右鍵單擊“節點列表”區域，在彈出菜單中選擇“添加到動畫”

3) 重複上述步驟，直到所需的節點都添加到了動畫中

6. 添加關鍵幀

1) 點擊選中要添加關鍵幀的節點對應的時間線

2) 拖動“幀列表”區域的“幀切換器”或者點擊“幀標尺”，將當前幀切換到要添加關鍵幀的索引處

3) 右鍵單擊“幀列表”區域，在彈出菜單中選擇“添加關鍵幀”，爲節點添加一個關鍵幀

4) 在“屬性列表”中修改關鍵幀的各項屬性爲合適的值

5) 重複上述步驟，直到生成需要的動畫爲止

六、在項目中使用

1. 導出爲數據文件

在動畫編輯器中將動畫導出，生成相應的xml數據文件，然後將數據文件拷貝到項目的合適位置

 

2. 將紋理資源打包並加載到項目中

1) 用TexturePacker將動畫中所使用的紋理打包成pvr包

2) 在加載資源時，添加加載pvr包的代碼

RegionRes.loadTexturesFromAssets(Res.XML_GFX_BALLOON);

RegionRes.loadTexturesFromAssets(Res.XML_GFX_FIREWORKS);

 

3. 加載動畫數據文件並使用

//加載動畫數據

AnimationLoader.getInstance().loadAnimation(Res.XML_GFX_ANIMATION_1);

 

//通過動作名稱查找獲取數據(AnimationInfo)對象

final AnimationInfo animationData =  AnimationMgr.getInstance().getAnimationData(Res.Animation_1);

 

//初始化動畫對象

final Animation animation = new Animation(this,animationData,"FrameByFrame");

 

//設置動畫屬性

animation.setX(120); 

animation.setY(120);

animation.setScale(0.5f);

 

//設置當前顯示第幾幀

animation.setCurrentIndex(22);

 

//添加到Layer中

layer.attachChild(animation);

 

//播放動畫

int speed = 10, 

loopCount = Animation.LOOP_CONTINUOUS,

startIndex = 5;

animation.startPlaying(speed, loopCount, null, startIndex);

 

//停止播放

animation.stopPlaying();