NGUI基礎@masayuki5160

14年3月2日日曜日

はじめに

NGUIの基礎についてまとめます。

けっこう癖がありますが、UnityでUIを開発するにはいまのところNGUIがらく。使いながら覚えてください～

14年3月2日日曜日

環境について• Mac OSX 10.9

• Unity 4.3.4f1

• NGUI 3.4.9

※資料内の手順等は上記環境で検証済みです。もしうまくいかない場合はとくにNGUIのバージョンを確認頂くといいかもしれません。

14年3月2日日曜日

アジェンダ

• NGUIとは

• ボタン作成

• スクロールビュー作成

• その他

14年3月2日日曜日

NGUIとは• Unity標準のGUIツールより優れた有料アセット

• Unityの中で働いている人も使用を勧めたりする

• 現在uGUIというUnity標準ツールを開発中。でもしばらくはNGUIでのUI開発がお勧め。

14年3月2日日曜日

ボタン作成(準備)

• 準備

右図のようにベースとなるパーツを作成する。

14年3月2日日曜日

ボタン作成 (準備)

• ヒエラルキービュー

右上図のとおりになる。

• UI Rootのインスペクター

ポイントはUI RootコンポーネントとUIPanelコンポーネントの2

つ。

14年3月2日日曜日

ボタン作成 (準備)

• UIRootコンポーネント

各端末の画面サイズに対応するためにはこのパーツのパラメータを調整する。

端末サイズに応じて自動で画像のサイズ調整をするよう設定が可能。

14年3月2日日曜日

ボタン作成 (準備)

• UIPanelコンポーネント

NGUIのパーツをグループ化したいときなどに使用。子オブジェクトに対してまとめて各種設定ができる。

よく使うのはDepth(レイヤー),

Anchors(パーツの配置)あたり。

14年3月2日日曜日

ボタン作成 (準備)

• Cameraのインスペクター

ポイントはUI Cameraコンポーネント。

CameraにうつっているオブジェクトのUIイベント(クリックとか)を取得します。イベントを取得するにはColliderが必要なので注意。

UI CameraでUIイベントを取得している、ということだけ把握しておくこと。

14年3月2日日曜日

ボタン作成• ボタン作成

右上図よりボタンパーツ作成用の画面を開く。

右下画面上で設定するのは”Atlas”,

“Template”,”Background”あたり。

※今回は通常のボタンを説明するのでTemplateはButtonとしてます

14年3月2日日曜日

ボタン作成• AtlasとBackgroundについて

Atlasは必要なテクスチャをまとめて管理できる機能、といった感じ。今回はNGUIで用意されているAtlasを使用していきます。

Atlasについてはこちらが参考になります。Atlasの機能をうまく活用しておくことでUIパーツの管理は楽にすることができそうです。

14年3月2日日曜日

ボタン作成• ボタン作成

Widget ToolでAdd Toを押下でSceneへボタンが追加される。

14年3月2日日曜日

ボタン作成• ボタン内のパーツ説明(Button)

ボタン自体の主要なパーツは”BoxCollider”,

“UIButton(Script)”, “UI Play Sound(Script)”あたり。

それぞれの役割はみたままなのでいじってみるとすぐわかるはず。

14年3月2日日曜日

ボタン作成• ボタン内のパーツ説明

(Background)

Backgroud内のメインはUI

Sprite。

Atlasで指定したテクスチャをUI

Sprite内で指定している。

14年3月2日日曜日

ボタン作成• UIButton Messageについて

Target:ボタン押下時にメッセージを送信するオブジェクト

Function Name:ボタン押下時に呼び出すTargetで指定したオブジェクト内のメソッド名

14年3月2日日曜日

ボタン作成• ボタン押下時の処理実装例

UIButtonMessageを使用した実装をします。下記の流れで説明します。

①ボタン押下時の処理管理用のUIManager.csを作成

②空のGameObjectを作成し、UIManager.csをアタッチ

③UIButtonMessageの設定変更

14年3月2日日曜日

ボタン作成• ボタン押下時の処理実装例 ①

ボタン押下時にログがでるように実装。押されたオブジェクトを識別するためGameObjectを引数としてUIButtonMessageから受け取っておく。

14年3月2日日曜日

ボタン作成• ボタン押下時の処理実装例 ②

空のGameObjectを作成し、UIManager.csをアタッチしたらおわり。

14年3月2日日曜日

ボタン作成• ボタン押下時の処理実装例 ③

右図の通りUIButtonMessageに設定をする。

UIButtonManagerオブジェクト内のPushedButtonメソッドを呼ぶように設定。

14年3月2日日曜日

ボタン作成• ボタン完成

ボタンを押して想定しているとおりのログがでればおわり。

UIManagerをうまく拡張していくことでパーツが増えたときにも対応しやすい。

14年3月2日日曜日

スクロールビュー作成(準備)

• 準備

右図のようにベースとなるパーツを作成する。これはボタンつくるときと一緒。

もちろんすでにあれば不要。

14年3月2日日曜日

スクロールビュー作成• スクロールビュー作成

右図の通り作成。

14年3月2日日曜日

スクロールビュー作成• スクロールビュー作成

作成後の画面は右の通り。

UIScrollViewコンポーネントでスクロールの設定をもろもろする。スクロールを横にするか縦にするかもここで設定可能。

14年3月2日日曜日

スクロールビュー作成• スクロールするパーツ作成

今回はボタンをスクロールする。ボタンを右図の通り配置する。

※手順はボタン作成の手順の通りのため割愛。

14年3月2日日曜日

スクロールビュー作成• スクロールするパーツ作成

ボタンにUIDragScrollView(Script)

を追加。（右上図参照）

追加後は右下図のようになる。

14年3月2日日曜日

スクロールビュー作成• スクロールするパーツ作成

作成したボタンをDuplicateして複製。（右上図参照）

複製してできたボタンのX座標を調整。（右下図参照。座標はどこでもいいですが、1つ目のボタンと重ならないようにしておいてください）

14年3月2日日曜日

スクロールビュー作成• スクロールビュー完成

横スクロールができることを確認できれば完成。

14年3月2日日曜日

スクロールビュー作成• 縦スクロールビューの作成

UIScrollViewのMovementをVertical

へ変更。

もちろん配置したボタン等の位置も変更必要。

14年3月2日日曜日

スクロールビュー作成• スクロールビューのサイズ等

UIPanelの調整をすることで可能。単純に表示範囲だけならSize

のX,Yの値調整で可能。

14年3月2日日曜日

その他• NGUIのバージョンアップ

2.xと3.xではけっこう違うことがあります。Webで調べるときはNGUIのバージョンを確認しながら参考にするといいです。

• Unity2DとNGUIの併用

Unity2DのSpriteはGUI用にはなっていません。UIのパーツはかならずNGUIで作成するようにしてください。

• uGUI

uGUIはUnity社で現在開発中です。しばらくはNGUIを使用していく、ということで問題はないかと思います。が、uGUIのリリース後、使いやすそうであればNGUIからuGUIに乗り換えるのもありだと思います。そのあたりはまた考えましょう。

14年3月2日日曜日