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

サイトは更新されていませんがWeChatには送られてきていた技術ブログについて

[初心者|テクスチャセットパッケージとアニメーション変換ツール TextureMergeのチュートリアル](https://mp.weixin.qq.com/s/O_d2eymKz9P-ztriUe_kVQ) 2018/11/16配信

Texture Mergerというのは、[Egretの製品群](https://qiita.com/motoyasu-yamada/items/ef2aa6fcabc06df89984)の一つです。

- 画像全体に散在したテクスチャを組み合わせ
- SWFやGIFアニメーションを解析して
- Egretのビットマップテキストを作成しEgretの設定ファイルを書き出す

# Texture Mergerでできること

1. アニメーション Egret MovieClipを作成

2. テクスチャコレクションSpriteSheetを作成

3. Bitmap Fontを作成

# Egret MovieClipを作成してみる
Egret MovieClipは、主にアニメーションやゲームの再生、swf、gifなどのサポートに使われます

こちらのアニメーションGIFをお試しにつかってみます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/48a579a5-4140-84fd-82f8-910500afe849.png)


MotionelEments: https://www.motionelements.com/ja/stock-image-11454719-business-woman-and-corporate-infographics

## 0. Egret LauncherからTextureMergerを起動する

Egret Launcherを起動して「Toolsタブ」からTextureManagerを起動します。インストールしていない場合はまずインストールしてください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/437153a3-4bee-f7fe-f1d9-e0c856846234.png)


## 1. Egret MovieClipインターフェースを開く

Egret MovieClipを選択してください
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/efc9879a-3028-13cb-1ef4-1794da61ba55.png)

起動したらアニメーションGIFをドラッグ＆ドロップする
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/dcd46b4c-64ca-353f-b1d1-bf3d6a86a58d.png)

適当なプロジェクト名をつける
今回は「Test」にしました
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/58c7acb0-56bb-4e91-4e49-f1b737faccaa.png)

このようにフレームに分解されます

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/a86dca68-862e-0e30-d26d-ef1c7bc10df7.png)

## 2. プレビューする

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/e58d8d8f-f9d8-fafe-1465-6aa08c1febb0.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/dfdb6308-0b98-fc3e-a195-10c3b2f820f7.png)

## 3. ムービークリップの書き出し
  [Export] 
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/934c3925-59aa-7383-31c8-1bf94588bea0.png)

- > [スケールを選択] 
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/8cd492b2-a7ab-6860-5e80-64acce160a0d.png)

- > [保存場所を選択]を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/99936a7d-67fd-85b5-dce3-e7f1ff957fa7.png)

このように.jsonファイルと.pngファイルがエクスポートされました
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/d2d8f5be-74e5-58ef-9c1f-d52b2f2fc95f.png)

書き出されたpng
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/8daf0d11-6557-7a73-2a3f-8303bd652f8b.png)

書き出されたJSON

```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をプロジェクトのリソースフォルダに取り込んでください。

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