本隨筆記錄TextureMerger來制作動畫,並在Egret中使用。
參考官網教程:http://bbs.egret.com/forum.php?mod=viewthread&tid=918&highlight=texturemerger
http://developer.egret.com/cn/github/egret-docs/tools/TextureMerger/manual/index.html
MovieClip主要是用於游戲中的動畫制作和播放。支持swf、gif、序列圖等。
目錄:
一 swf制作MovieClip
二 gif制作MoveliClip
三 序列圖制作MovieClip
一 swf制作MovieClip
1 打開TextureMerger,選擇Egret MovieClip

2 Egret MovieClip制作界面說明

新建項目:新建一個Egret MovieClip項目
打開項目:打開一個.tmc文件
保存項目:項目會保存為一個后綴為.tmc的文件
創建動畫:在當前項目下創建一個動畫,通常用於自定義動畫使用,比如使用多張序列圖制作動畫,並自定義動作action。
創建轉換動畫:直接使用gif或swf創建動畫
導出:將動畫導出為json+png,以備在egret中加載使用
附加拓展名:這里無效,對movieClip無效的
布局:圖片的擺放位置布局 (這里選擇布局后,可直觀的在右邊看到圖片是怎么擺放的)
畫布:Power2合適的2的冪的尺寸,FreeSize合適的自由尺寸。百度為什么需要2的N次冪。
間隙:圖片與圖片之間的間隙。感覺沒什么大用,就是圖片分得開點,好辨認...
3 新建項目,取名為walk

4 用Flash制作swf(不會Flash?那幫不了你)
我這里用Flash制作了一個loli行走的動畫。分別為正面行走和向右行走,並增加標簽"front"和"right"。導出swf為walk.swf。
PS:Flash的動畫必須在主舞台的時間軸制作。如果制作在影片剪輯里再放到舞台,那么TextureMerger無法使用,只會導出一幀。


5 創建轉換動畫
可以使用swf或gif,我們這里僅用swf測試。
這里有個bug,拖動swf到下圖指定區域無效...

選擇walk.swf,導入后,可以看到有了一個名為walk的動畫,該動畫有2個action,分別是"front"和"right"。
可以選擇"front"后的
按鈕預覽動畫效果。

6 導出movieclip
選擇導出

選擇縮放比例

選擇保存位置,保存為walk

最終導出了一個walk.json和walk.png文件

7 將json和png放到egret資源目錄下

8 在代碼中使用MovieClip
首先加載walk_json和walk_png到影片剪輯工廠
然后生成一個walk影片剪輯
最后將影片剪輯添加到舞台,並且循環播放right動作

運行效果

二 Gif制作MovieClip
和swf同理。
三 序列圖制作MovieClip
序列圖4張如下 (如果是一整張的序列圖,此方法無效)

1 選擇創建動畫

命名動畫為walk,24幀

2 walk動畫上右鍵,選擇添加動作

動畫名為walk_front

3 動作walk_front上右鍵,選擇添加幀

選擇剛才的4張序列圖添加進去

動作添加完畢

后面的導出和使用流程同swf,就不再贅述了。
