今回はウェブでたくさん存在している2D Sprite画像(絵1-1)ようなアニメーション画像を
NGUIで読み込ませてみます。
背景
ここで問題はそもそも画像が分かれている場合はNGUIのAtlas Makerで作ればいいんですけど
既に作られている場合は画像と画像の間隔座標(NGUIのDimensions)を手動で作ることになります。(もし自動や手軽にできる方法があれば教えてください)
下準備
Unity4
NGUI(ここでは最新の2.6.3を使う)
Windows
2D Sprite画像(絵1-1)をタウンロード
手順
Atlasを作る
- 「GameObejct」->「Create Empty」(Ctrl + Shift + N)で空オブジェクトを作る
- 上の空オブジェクトに「Component」->「NGUI」->「UI」->「Atas」を選択(絵2-1) (絵2-1)
- Project Viewにドラック&ドロップしてプレハブ化する ### Materialを作る
- Project Viewでマウス右クリックして「Create」-> 「Material」をクリック
- Materialの四角に2D Sprite画像(絵1-1)をドラック&ドロップする
- Shaderは「Unit/Transparent Colored」を選択
AtlasにMaterialを結びつける
- AtlasにMaterialをドラック&ドロップする
TP Import
予め用意した2D Sprite画像の場合は手動で画像の位置座標を指定する必要があります。
例の2D Sprite画像(絵2-1)は画像の開始位置が「4,4」で広さと高さが「33,43」です。
-
テキストエディタを開き、以下のように書く
{
"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} 上記のテキストファイルの拡張子をtxtで保存