[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秒