サイトは更新されていませんがWeChatには送られてきていた技術ブログについて
初心者|テクスチャセットパッケージとアニメーション変換ツール TextureMergeのチュートリアル 2018/11/16配信
Texture Mergerというのは、Egretの製品群の一つです。
- 画像全体に散在したテクスチャを組み合わせ
- SWFやGIFアニメーションを解析して
- Egretのビットマップテキストを作成しEgretの設定ファイルを書き出す
Texture Mergerでできること
-
アニメーション Egret MovieClipを作成
-
テクスチャコレクションSpriteSheetを作成
-
Bitmap Fontを作成
Egret MovieClipを作成してみる
Egret MovieClipは、主にアニメーションやゲームの再生、swf、gifなどのサポートに使われます
こちらのアニメーションGIFをお試しにつかってみます
MotionelEments: https://www.motionelements.com/ja/stock-image-11454719-business-woman-and-corporate-infographics
0. Egret LauncherからTextureMergerを起動する
Egret Launcherを起動して「Toolsタブ」からTextureManagerを起動します。インストールしていない場合はまずインストールしてください。
1. Egret MovieClipインターフェースを開く
Egret MovieClipを選択してください
起動したらアニメーションGIFをドラッグ＆ドロップする
適当なプロジェクト名をつける
今回は「Test」にしました
このようにフレームに分解されます
2. プレビューする
3. ムービークリップの書き出し
[Export]
-
[スケールを選択]
-
[保存場所を選択]を選択します。
このように.jsonファイルと.pngファイルがエクスポートされました
書き出されたpng
書き出されたJSON
{"mc":{
"11454719_MotionElements_business-woman-and_converted_93812-256x144-3s-q2":{
"frameRate":24,
"events":[
],
"frames":[
{
"res":"F1BD78B7",
"x":0,
"y":0
},
:
{
"res":"3EA7FBE2",
"x":0,
"y":0
}
]
}},
"res":{
"F6A1084F":{"x":1,"y":1,"w":256,"h":144},
:
"14B01A4F":{"x":259,"y":585,"w":256,"h":144}
}}
アニメーションの描画
エクスポートされたjson/pngをプロジェクトのリソースフォルダに取り込んでください。
const json= RES.getRes("test_json");
const png= RES.getRes("test_png");
const factory: egret.MovieClipDataFactory = new egret.MovieClipDataFactory(json, png);
const movieClip: egret.MovieClip = new egret.MovieClip(timeFactory.generateMovieClipData("11454719_MotionElements_business-woman-and_converted_93812-256x144-3s-q2"));
movieClip.x=200;
movieClip.y=400;
this.addChild(movieClip);
movieClip.gotoAndPlay(0, -1);
ふりかえり
アニメーションGIFを読み込んだ後にMovieClip名をちゃんとつけたほうがよさそうです。今回はファイル名から自動で名前が付けられて"11454719_MotionElements_business-woman-and_converted_93812-256x144-3s-q2"とむちゃくちゃ冗長になっています。