Unity3D
NGUI

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

More than 5 years have passed since last update.

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

NGUIで読み込ませてみます。

t.png

(絵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)
    3.png
    (絵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にドラック&ドロップする

    4.png



確認


  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のようになる
    5.png
    (絵3-1)