トップ 一覧 検索 ヘルプ 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の子として各種ウィジットを配置していきます。
{{ref_image unity_ngui_first_01.png}}

!!ビューを2D表示にする

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

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

プロジェクトの「Assets」-「NGUI」-「Examples」-「Atlases」-「Wooden」内に「Control - xxxx」というのがあります。
これが、サンプルとして用意されているウィジットのPrefabです。
{{ref_image unity_ngui_first_03.png}}
「Control - Colored Button」はプッシュボタンになり、これをシーンの「UI Root」にドラッグします。
{{ref_image unity_ngui_first_04.png}}
赤枠に収まるように水平垂直移動させて配置を調整。これを実行すると、マウスオーバーで色が変わるボタンが実装できます。
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が切り替わるため)。
{{ref_image unity_ngui_first_05.png}}
これでNotifyの表示の下に「Method」が表示されます。ここで「UIEvent.MyButtonClick」を選択できるので指定。
{{ref_image unity_ngui_first_06.png}}

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

----
{{lastmodified}}