NGUI基礎

43 %
57 %
Information about NGUI基礎
Technology

Published on March 2, 2014

Author: MasayukiTanaka2

Source: slideshare.net

Description

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

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

Add a comment

Related presentations

Related pages

Webデザイナーが覚えるUnity その2 NGUI の基礎知識 | GREE Creators Bl...

Home » Unity » Webデザイナーが覚えるUnity その2 NGUIの基礎知識; Webデザイナーが覚えるUnity その2 NGUIの基礎知識
Read more

NGUI: Next-Gen UI kit – Tasharen Entertainment

NGUI is a powerful UI system and event notification framework for Unity (both Pro and Free) written in C# that closely follows the KISS principle.
Read more

Unity2D+NGUIでゲーム作るよ! その4 さくっとNGUI - Qiita

... /2d-shooting-game/ 今回の記事はNGUIをさくっと覚えたい人向け。多分ラスト いままで Unity2D+NGUIでゲーム作るよ!
Read more

NGUI入門、とりあえず用語やら使い方を調べてみる【Unity】【NGUI】【アセット】 - (:3[kanのメモ帳]

NGUIとは そもそもNGUIってなんぞ?って話ですが、ようはUnityでGUIを良い感じに作れるものらしいです。 ただ、使う ...
Read more

Unity開発ブログ 〜 NGUI その1〜 : Unity ゲーム開発ぶろぐ

NGUIというのは New Generation UI ... 基礎 も固まって ...
Read more

NGUIが凄い - kamemo -いろいろつくる- - memo.scri.me

しかし、噂には聞いていたのですがどう便利なのかピンときていなかったngui ...
Read more

NGUIの使い方に関する記事まとめ - Over&Out その後

NGUIの使い方に関する記事まとめ. Unity, iOS. iOS SDK の UIKit に用意されているような UI を Unity でやるなら NGUI という ...
Read more

【Unity】NGUIの基本操作その1 - ハルシオンシステムの気ままBlog

NGUI ようやく使い ... 「Create Your UI」のボタンを押しNGUIの基礎部分が作成されます。 NGUIタブから「Open the Widget Wizard ...
Read more