【Unity,NGUI3.x】Gridを使って等間隔に配置

ステージセレクトとかで１画面に２５個とかボタンが並んでることありますよね。
どーやるのか調べてみたらNGUIに便利なクラスがありました。

Gridっていうものを使うらしいです。

試してみたので残しておきます。

作ったサンプル

適当なSpriteを等間隔に配置してみた。

環境

・Mac
・Unity 4.2.2.f1
・NGUI 3.0.3g

作り方

プロジェクトを用意

・NGUI3.0をインポート
　　Examplesは使わないので削除
・以下の素材をインポート
　　http://www.tasharen.com/ngui/tutorial3assets.unitypackage
・ProjectビューのMain Cameraも使わないので削除

パネルを用意

・NGUI->Create->Panel
　設定は規定のまま。

Spriteを追加

・NGUI->Create->Sprite
適当に画像を選んでサイズを調整。
これを横５列、縦５列に並べてみようと思います。

Gridを配置

・Game Object->Create Empty
・Panel直下に移動
・Transform.Scaleを1,1,1に変更←忘れがち！
　X,Y,Zの左にある[S]を押すだけで1,1,1になります。

・名前をGridに変更
・Gridを選んだ状態で、Component->NGUI->Interaction->Grid

これでUIGridコンポーネントを持ったオブジェクトができました。
こいつが綺麗に並べてくれるらしい。

並べるSpriteの準備

SpriteをGrid直下に移動し、25個コピーします。
当然まだ重なってますね。

Gridの設定

・Arrangement = Horizontal(水平)
・Max Per Line = 5(横５列)
・Cell Width = 65
・Cell Height = 65

ここでReposition Nowを押すと…

Gridの座標から右へ５個、改行されながら計25個。
綺麗に並びました。あー楽ちん。

まとめ

・等間隔に配置するにはUIGridコンポーネントを使う。
・直下に色々置いてRepositionNowするだけ。

Gridの座標から右(下)に向かって伸びてくみたい。
並んだ数の中心にPivotが欲しいけどそこは仕方ないのかな。
あと空のGameObjectを追加するところ、一発でPanel直下に生成できないのかな？
ショートカットとかありそうなものだけど。

→Unity系記事まとめ