2013年11月3日日曜日

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

ステージセレクトとかで1画面に25個とかボタンが並んでることありますよね。
どーやるのか調べてみたら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
適当に画像を選んでサイズを調整。
これを横5列、縦5列に並べてみようと思います。

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(横5列)
・Cell Width = 65
・Cell Height = 65
ここでReposition Nowを押すと…
Gridの座標から右へ5個、改行されながら計25個。
綺麗に並びました。あー楽ちん。

まとめ

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

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

Unity系記事まとめ

スポンサーリンク

Related Posts Plugin for WordPress, Blogger...