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"とむちゃくちゃ冗長になっています。

初心者|テクスチャセットパッケージとアニメーション変換ツール TextureMergeのチュートリアル(1)