【Unity】【NGUI】2D Sprite画像1枚で手動で位置座標を入れてみたメモ

今回はウェブでたくさん存在している2D Sprite画像(絵1-1)ようなアニメーション画像を
NGUIで読み込ませてみます。

(絵1-1)

背景

ここで問題はそもそも画像が分かれている場合はNGUIのAtlas Makerで作ればいいんですけど
既に作られている場合は画像と画像の間隔座標(NGUIのDimensions)を手動で作ることになります。(もし自動や手軽にできる方法があれば教えてください)

下準備

Unity4
NGUI(ここでは最新の2.6.3を使う)
Windows
2D Sprite画像(絵1-1)をタウンロード

手順

Atlasを作る

1. 「GameObejct」->「Create Empty」(Ctrl + Shift + N)で空オブジェクトを作る
2. 上の空オブジェクトに「Component」->「NGUI」->「UI」->「Atas」を選択(絵2-1) (絵2-1)
3. Project Viewにドラック&ドロップしてプレハブ化する ### Materialを作る
4. Project Viewでマウス右クリックして「Create」-> 「Material」をクリック
5. Materialの四角に2D Sprite画像(絵1-1)をドラック&ドロップする
6. Shaderは「Unit/Transparent Colored」を選択

AtlasにMaterialを結びつける

1. AtlasにMaterialをドラック&ドロップする

TP Import

予め用意した2D Sprite画像の場合は手動で画像の位置座標を指定する必要があります。
例の2D Sprite画像(絵2-1)は画像の開始位置が「4,4」で広さと高さが「33,43」です。

1. テキストエディタを開き、以下のように書く
   {
   "frames": {

   "1.png":
   {
       "frame": {"x":4,"y":4,"w":33,"h":43},
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {"x":0,"y":0,"w":33,"h":43},
       "sourceSize": {"w":33,"h":43}
   }
   "2.png":
   {
       "frame": {"x":4,"y":48,"w":33,"h":43},
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": {"x":0,"y":0,"w":33,"h":43},
       "sourceSize": {"w":33,"h":43}
   }
   

   }
   }
   1.pngや2.pngは任意でも構いません。
   frameは開始座標"x":4,"y":4 広さと高さ"w":33,"h":43です。
   spriteSourceSizeはframeと同じだから{"x":0,"y":0,"w":33,"h":43}
   sourceSizeもframeと同じだから {"w":33,"h":43}

2. 上記のテキストファイルの拡張子をtxtで保存

3. テキストファイルをAtlasのTP Importにドラック&ドロップする
   

確認

1. 「NGUI」-> 「Open The UI Wizard」-> 「Create UI」を指定
2. Hierarchy Viewの「Panel」を選択し、「NGUI」-> 「Create a Sprite」を選択
3. UISpriteのAtlasに作ったAtlasをドラック&ドロップする
4. UISpriteのSpriteを選択し、1を選択すると絵3-1のようになる (絵3-1)