ShoeBoxでLive2Dのドローコールを減らす

Live2Dのドローコール（SetPass calls）はパーツ数に依存します。
サンプルのハルモデルならドローコールが12です。
![01.png](https://qiita-image-store.s3.amazonaws.com/0/15028/b510a17d-c661-d18c-b333-79f4d1b2b395.png)

Unity SDK2.1 betaで[TexturePacker](https://www.codeandweb.com/texturepacker)使ったサンプルが追加されています。
なんとドローコールが1にっ！
![02.png](https://qiita-image-store.s3.amazonaws.com/0/15028/6379f4ea-e2fd-bfda-b210-1acf93591b9d.png)

TexturePackerを持ってないので、ShoeBoxでやり方を調べたら意外と簡単にできました。
ShoeBoxはWindows/Macで使えるAdobe AIR製のフリーツールです。
→　[これぞ神ツール！ゲーム制作に役立つShoeBoxというフリーツールが便利すぎる](http://cocoabu.com/shobox)

**2015/05/05追記　texturePacker無料版あったのでそちらの使い方も書きました**

# ShoeBoxのスプライトシート作成手順
１）shoeBoxを起動する

２）複数のテクスチャをドラッグ＆ドロップする
![04.png](https://qiita-image-store.s3.amazonaws.com/0/15028/302dbc0c-bd26-264c-7828-a881b0c32540.png)

３）Settings押下する
![05.png](https://qiita-image-store.s3.amazonaws.com/0/15028/9e1d7412-ebc1-6d64-e423-f1c632f8e94d.png)

４）AdvancedタブでTemplateをUIToolkit, NGUI(Unity3D)にする
→　BasicだとXMLファイルが出力される
![06.png](https://qiita-image-store.s3.amazonaws.com/0/15028/04835ef6-d3fb-e126-0f2d-c7872046cb37.png)

５）Advancedタブで以下の値を修正(Ctrl + Aで選択し、Ctrl + Vで貼り付ける)

【File Format Loop】　→　File Format Outerで指定した@loop部分
>{\n\t"filename": "@id",\n\t"frame": {"x":@x,"y":@y,"w":@w,"h":@h},\n\t"rotated": false,"trimmed": true,\n\t"spriteSourceSize": {"x":@fx,"y":@fy,"w":@fw,"h":@fh},\n\t"sourceSize": {"w":@fw,"h":@fh}\n}@,\n

【File Format Outer】　→　出力する形式
>{"frames": [\n\n@loop],\n"meta": {\n\t"app": "ShoeBox",\n\t"image": "@TexName",\n\t"size": {"w":@W,"h":@H}\n}\n}

【File Name】　→　出力ファイル名
>sprites.json

【Tex Max Size】　→　2048 x 2048で出力
>4096

【Tex Padding】　→　幅を調整する
>4

出力されたjsonファイルはこんな感じになります。

```json:sprites.json
{"frames": [

{
	"filename": "texture_00.png",
	"frame": {"x":0,"y":0,"w":1014,"h":1004},
	"rotated": false,"trimmed": true,
	"spriteSourceSize": {"x":3,"y":13,"w":1024,"h":1024},
	"sourceSize": {"w":1024,"h":1024}
},
{
	"filename": "texture_01.png",
	"frame": {"x":1011,"y":1008,"w":978,"h":1011},
	"rotated": false,"trimmed": true,
	"spriteSourceSize": {"x":23,"y":4,"w":1024,"h":1024},
	"sourceSize": {"w":1024,"h":1024}
},
{
	"filename": "texture_02.png",
	"frame": {"x":0,"y":1008,"w":1007,"h":1022},
	"rotated": false,"trimmed": true,
	"spriteSourceSize": {"x":12,"y":2,"w":1024,"h":1024},
	"sourceSize": {"w":1024,"h":1024}
}
],
"meta": {
	"app": "ShoeBox",
	"image": "sprites.png",
	"size": {"w":2048,"h":2048}
}
}
```
またAdvancedで設定した内容は、Export .sbxボタン押下し保存するとsbxをダブルクリックで内容が呼び出せます。
　→　[shoeBox - Sbx configuration files](http://renderhjs.net/shoebox/manual.htm)

６）Applyボタン押下し、Saveボタン押下で出力されます
![07.png](https://qiita-image-store.s3.amazonaws.com/0/15028/eaa8d851-46ad-3008-02f1-4f7ec94450f9.png)

７）SDKサンプルのTextureAtlasプロジェクトを開き、テクスチャをドラッグ＆ドロップ。
　　テクスチャはAlpha Is transpencyにチェックし、4096でTrueColorでApplyします。
![08.png](https://qiita-image-store.s3.amazonaws.com/0/15028/664fb4ee-79e8-687c-3545-f5cec3625d8a.png)

でもUnityで実行すると透明部分にふちが表示される...。
![09.png](https://qiita-image-store.s3.amazonaws.com/0/15028/499f1b65-8e2f-fa97-9c9f-527628778053.png)

８）これは[テクスチャごみ取りツール](http://sites.cybernoids.jp/cubism2/tools/texture)で解決できます。
　　pngファイルを開き、色モレ防止（自動）を押し保存すればOK！
　→　[テクスチャごみ取りツールの使い方](http://sites.cybernoids.jp/cubism2/modeler/tips/noise-removal-tool)
![10.png](https://qiita-image-store.s3.amazonaws.com/0/15028/1df85794-cc65-efaf-37ce-7d355069542f.png)

# TexturePackerのスプライトシート作成手順
TexturePackerの無料版でも十分でした（無料版があるって知らなかった...）
[Pro版](https://www.codeandweb.com/store/texturepacker-single)は¥4974ですが、TexturePackerをブログで宣伝すると1年間無料で使う事もできるっぽい。

一応、TexturePackerの使い方も簡単に書いておきます。

１）TexturePackerを起動し、複数のpngをドラッグ＆ドロップ

２）Settingsを詳細設定する
![001_1.png](https://qiita-image-store.s3.amazonaws.com/0/15028/de33973b-91de-ef48-74b6-a18bc3744b3b.png)

３）Publish Sprite Sheetすると出力されます
![003.png](https://qiita-image-store.s3.amazonaws.com/0/15028/101ecdb9-7e9b-980e-96c1-d94d6aef8f01.png)

しかもTexturePackerの場合、フルカラー画像(RGBA8888)で出力してるのでごみ取りツールも不要でした
![002.gif](https://qiita-image-store.s3.amazonaws.com/0/15028/62b5a882-ee0f-6d30-c804-2471dfbee90c.gif)