トップ 差分 一覧 ソース 検索 ヘルプ RSS ログイン

unity_ngui_first

[NGUI] NGUIでボタンを配置

NGUIを使ってボタンを配置、イベント処理を行うまでを説明します。
なお、NGUI 3.0.9で解説。

 NGUIのAssetをインポート


Asset Storeから、NGUIを購入してプロジェクトにインポートします。
メインメニューに「NGUI」が出ているのを確認。

 2D UIのRootを配置


新規シーンにて、メインメニューの「NGUI」-「Create」-「2D UI」を選択。
これでシーンに「UI Root」というのが配置されます。この中にはGUI用のCameraが配置されています。このUI Rootの子として各種ウィジットを配置していきます。


 ビューを2D表示にする


シーンビューは3Dのパースペクティブ表示になっているため、GUIを確認しやすいように2Dにします。
シーンビューの上の「2D」を選択して、ビューで見やすいようにズーム。


 あらかじめ用意されたウィジットを配置


プロジェクトの「Assets」-「NGUI」-「Examples」-「Atlases」-「Wooden」内に「Control - xxxx」というのがあります。
これが、サンプルとして用意されているウィジットのPrefabです。

「Control - Colored Button」はプッシュボタンになり、これをシーンの「UI Root」にドラッグします。

赤枠に収まるように水平垂直移動させて配置を調整。これを実行すると、マウスオーバーで色が変わるボタンが実装できます。
GameObjectとしての「Control - Colored Button」の子に「Label」があり、ここのUILabelで表示テキストを変更できます。

次に、このボタンが押されたときのイベントをScriptで取得してみましょう。

UI Rootや各種ウィジット/Spriteなどを選択した状態でCtrlキーを押すと、
幅と高さが表示されます。

 ボタンイベントの取得


メインメニューの「GameObject」-「Create Empty」で、シーンにカラのGameObjectを配置します。
GameObject名を「main」という名称に変更し、InepectorのAdd Componentボタンを押して、New Scriptで「UIEvent」というのを作成しました。
これはMonoBehaviour派生クラスである必要があります。
この「UIEnevt.cs」をMonoで開き、イベントを受け取るpublic関数を追加します。

public void MyButtonClick() {
  Debug.Log("Button Pushed!");
}

この「main」GameObjectの「UIEnevt」の「MyButtonClick」関数を、プッシュボタン「Control - Colored Button」のボタンイベントで呼び出すようにします。

「Control - Colored Button」を選択して、Inspectorの「On Click」のNotifyが見えるようにスクロール。
シーンツリーの「main」GameObjectをドラッグしてInspectorの「On Click」のNotifyにドロップ。この間、マウスアップしてはいけません(マウスを離すとmainのGameObjectが選択されてInspectorが切り替わるため)。

これでNotifyの表示の下に「Method」が表示されます。ここで「UIEvent.MyButtonClick」を選択できるので指定。


実行して、ボタンをプッシュするとConsoleに「Button Pushed!」が表示されてイベントが呼ばれるのが確認できます。


最終更新時間:2014年01月30日 22時05分25秒