TextureMerger1.6.6 一:Egret MovieClip的制作和使用


本隨筆記錄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,就不再贅述了。

 

 

 

 

 

 

 

 

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM