Your SlideShare is downloading. ×
0
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
NGUI基礎
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

NGUI基礎

22,161

Published on

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

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

Published in: Technology
0 Comments
40 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
22,161
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
162
Comments
0
Likes
40
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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日日曜日

×