NGUIの基本的なことについてまとめました。

1. NGUI基礎
@masayuki5160
14年3月2日日曜日

2. はじめに
NGUIの基礎についてまとめます。
けっこう癖がありますが、UnityでUIを開発する
にはいまのところNGUIがらく。使いながら覚
えてください∼
14年3月2日日曜日

3. 環境について
•
•
•
Mac OSX 10.9
Unity 4.3.4f1
NGUI 3.4.9
※資料内の手順等は上記環境で検証済みです。
もしうまくいかない場合はとくにNGUIのバージ
ョンを確認頂くといいかもしれません。
14年3月2日日曜日

4. アジェンダ
•
NGUIとは
•
ボタン作成
•
スクロールビュー作成
•
その他
14年3月2日日曜日

5. NGUIとは
•
Unity標準のGUIツールより優
れた有料アセット
•
Unityの中で働いている人も使
用を勧めたりする
•
現在uGUIというUnity標準ツー
ルを開発中。でもしばらくは
NGUIでのUI開発がお勧め。
14年3月2日日曜日

6. ボタン作成(準備)
•
準備
右図のようにベースとなるパー
ツを作成する。
14年3月2日日曜日

7. ボタン作成 (準備)
•
ヒエラルキービュー
右上図のとおりになる。
•
UI Rootのインスペクター
ポイントはUI Rootコンポーネン
トとUIPanelコンポーネントの2
つ。
14年3月2日日曜日

8. ボタン作成 (準備)
•
UIRootコンポーネント
各端末の画面サイズに対応する
ためにはこのパーツのパラメー
タを調整する。
端末サイズに応じて自動で画像
のサイズ調整をするよう設定が
可能。
14年3月2日日曜日

9. ボタン作成 (準備)
•
UIPanelコンポーネント
NGUIのパーツをグループ化した
いときなどに使用。子オブジェ
クトに対してまとめて各種設定
ができる。
よく使うのはDepth(レイヤー),
Anchors(パーツの配置)あたり。
14年3月2日日曜日

10. ボタン作成 (準備)
•
Cameraのインスペクター
ポイントはUI Cameraコンポーネン
ト。
Cameraにうつっているオブジェクト
のUIイベント(クリックとか)を取得し
ます。イベントを取得するには
Colliderが必要なので注意。
UI CameraでUIイベントを取得してい
る、ということだけ把握しておくこ
と。
14年3月2日日曜日

11. ボタン作成
•
ボタン作成
右上図よりボタンパーツ作成用
の画面を開く。
右下画面上で設定するの
は”Atlas”,
“Template”,”Background”あたり。
※今回は通常のボタンを説明する
のでTemplateはButtonとしてます
14年3月2日日曜日

12. ボタン作成
•
AtlasとBackgroundについて
Atlasは必要なテクスチャをまとめ
て管理できる機能、といった感
じ。今回はNGUIで用意されてい
るAtlasを使用していきます。
Atlasについてはこちらが参考にな
ります。Atlasの機能をうまく活用
しておくことでUIパーツの管理は
楽にすることができそうです。
14年3月2日日曜日

13. ボタン作成
•
ボタン作成
Widget ToolでAdd Toを押下で
Sceneへボタンが追加される。
14年3月2日日曜日

14. ボタン作成
•
ボタン内のパーツ説明(Button)
ボタン自体の主要なパーツ
は”BoxCollider”,
“UIButton(Script)”, “UI Play
Sound(Script)”あたり。
それぞれの役割はみたままなの
でいじってみるとすぐわかるは
ず。
14年3月2日日曜日

15. ボタン作成
•
ボタン内のパーツ説明
(Background)
Backgroud内のメインはUI
Sprite。
Atlasで指定したテクスチャをUI
Sprite内で指定している。
14年3月2日日曜日

16. ボタン作成
•
UIButton Messageについて
Target:ボタン押下時にメッセー
ジを送信するオブジェクト
Function Name:ボタン押下時に呼
び出すTargetで指定したオブジェ
クト内のメソッド名
14年3月2日日曜日

17. ボタン作成
•
ボタン押下時の処理実装例
UIButtonMessageを使用した実装を
します。下記の流れで説明します。
①ボタン押下時の処理管理用の
UIManager.csを作成
②空のGameObjectを作成し、
UIManager.csをアタッチ
③UIButtonMessageの設定変更
14年3月2日日曜日

18. ボタン作成
•
ボタン押下時の処理実装例 ①
ボタン押下時にログがでるよう
に実装。押されたオブジェクト
を識別するためGameObjectを引
数としてUIButtonMessageから受
け取っておく。
14年3月2日日曜日

19. ボタン作成
•
ボタン押下時の処理実装例 ②
空のGameObjectを作成し、
UIManager.csをアタッチしたらお
わり。
14年3月2日日曜日

20. ボタン作成
•
ボタン押下時の処理実装例 ③
右図の通りUIButtonMessageに設
定をする。
UIButtonManagerオブジェクト内
のPushedButtonメソッドを呼ぶ
ように設定。
14年3月2日日曜日

21. ボタン作成
•
ボタン完成
ボタンを押して想定していると
おりのログがでればおわり。
UIManagerをうまく拡張していく
ことでパーツが増えたときにも
対応しやすい。
14年3月2日日曜日

22. スクロールビュー作成(準備)
•
準備
右図のようにベースとなるパー
ツを作成する。これはボタンつ
くるときと一緒。
もちろんすでにあれば不要。
14年3月2日日曜日

23. スクロールビュー作成
•
スクロールビュー作成
右図の通り作成。
14年3月2日日曜日

24. スクロールビュー作成
•
スクロールビュー作成
作成後の画面は右の通り。
UIScrollViewコンポーネントでス
クロールの設定をもろもろす
る。スクロールを横にするか縦
にするかもここで設定可能。
14年3月2日日曜日

25. スクロールビュー作成
•
スクロールするパーツ作成
今回はボタンをスクロールす
る。ボタンを右図の通り配置す
る。
※手順はボタン作成の手順の通
りのため割愛。
14年3月2日日曜日

26. スクロールビュー作成
•
スクロールするパーツ作成
ボタンにUIDragScrollView(Script)
を追加。（右上図参照）
追加後は右下図のようになる。
14年3月2日日曜日

27. スクロールビュー作成
•
スクロールするパーツ作成
作成したボタンをDuplicateして
複製。（右上図参照）
複製してできたボタンのX座標
を調整。（右下図参照。座標は
どこでもいいですが、1つ目のボ
タンと重ならないようにしてお
いてください）
14年3月2日日曜日

28. スクロールビュー作成
•
スクロールビュー完成
横スクロールができることを確
認できれば完成。
14年3月2日日曜日

29. スクロールビュー作成
•
縦スクロールビューの作成
UIScrollViewのMovementをVertical
へ変更。
もちろん配置したボタン等の位
置も変更必要。
14年3月2日日曜日

30. スクロールビュー作成
•
スクロールビューのサイズ等
UIPanelの調整をすることで可
能。単純に表示範囲だけならSize
のX,Yの値調整で可能。
14年3月2日日曜日

31. その他
•
NGUIのバージョンアップ
2.xと3.xではけっこう違うことがあります。Webで調べるときはNGUIのバ
ージョンを確認しながら参考にするといいです。
•
Unity2DとNGUIの併用
Unity2DのSpriteはGUI用にはなっていません。UIのパーツはかならず
NGUIで作成するようにしてください。
•
uGUI
uGUIはUnity社で現在開発中です。しばらくはNGUIを使用していく、とい
うことで問題はないかと思います。が、uGUIのリリース後、使いやすそ
うであればNGUIからuGUIに乗り換えるのもありだと思います。そのあた
りはまた考えましょう。
14年3月2日日曜日