LoginSignup
14

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-05-04

Live2Dのドローコール(SetPass calls)はパーツ数に依存します。
サンプルのハルモデルならドローコールが12です。
01.png

Unity SDK2.1 betaでTexturePacker使ったサンプルが追加されています。
なんとドローコールが1にっ!
02.png

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

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

ShoeBoxのスプライトシート作成手順

1)shoeBoxを起動する

2)複数のテクスチャをドラッグ&ドロップする
04.png

3)Settings押下する
05.png

4)AdvancedタブでTemplateをUIToolkit, NGUI(Unity3D)にする
→ BasicだとXMLファイルが出力される
06.png

5)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ファイルはこんな感じになります。

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

6)Applyボタン押下し、Saveボタン押下で出力されます
07.png

7)SDKサンプルのTextureAtlasプロジェクトを開き、テクスチャをドラッグ&ドロップ。
  テクスチャはAlpha Is transpencyにチェックし、4096でTrueColorでApplyします。
08.png

でもUnityで実行すると透明部分にふちが表示される...。
09.png

8)これはテクスチャごみ取りツールで解決できます。
  pngファイルを開き、色モレ防止(自動)を押し保存すればOK!
 → テクスチャごみ取りツールの使い方
10.png

TexturePackerのスプライトシート作成手順

TexturePackerの無料版でも十分でした(無料版があるって知らなかった...)
Pro版は¥4974ですが、TexturePackerをブログで宣伝すると1年間無料で使う事もできるっぽい。

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

1)TexturePackerを起動し、複数のpngをドラッグ&ドロップ

2)Settingsを詳細設定する
001_1.png

3)Publish Sprite Sheetすると出力されます
003.png

しかもTexturePackerの場合、フルカラー画像(RGBA8888)で出力してるのでごみ取りツールも不要でした
002.gif

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14