Unity で NGUI v3.5.6 を使ってボタンを作る

はじめに

• Unity の GUI 作成ツール NGUI の v3.5.6 を使ってボタンを作ったメモ。
• NGUI はバージョンによってUIとかが結構違ったりしているので、How to 記事を参照する際には注意が必要です。

購入

• Unity のメニュー [Window] > [Asset Store] でアセットストアを表示
• NGUI で検索して購入（今日現在で $95）
• 購入後にダウンロード

準備

• Unity で新規プロジェクトを作成
• [Window] > [Asset Store] で、左上の左から4番目、ダウンロードアイコンを選択
• NGUI のインポート
• メニューの [NGUI] > [Create] > [2D UI] で、GUI用のルートオブジェクトとGUI用のカメラを作成

ボタン作成

• NGUI 上でのボタンは以下のような構成で作られる（最小構成の場合）
  • GameObject
    • UISprite (Script) : 画像表示用のスクリプト
    • Box Collider (Physics component) : クリック判定のため必要
    • UIButton (Script) : ボタン押下時の処理呼び出しなどのスクリプト
• ボタン上に文字の表示したい場合や、ボタン押下以外にホバーイベントなどで処理を実行したい場合などは、さらに別のスクリプトなどを組み合わせる
• ボタンの作成はこれらのスクリプトなどを組み合わせる方法と、NGUIが用意しているプレハブをカスタマイズする方法がある
• 最初は、ボタンがいろいろなスクリプトの組み合わせでできているのを認識したうえで、既存のプレハブを使ってNGUIになれていくのがよいと思う

既存のプレハブからボタンを作成する

• プレハブを検索する
  • Assets ビューの検索欄に「Button」と入力
  • 「Control - Simple Button」と「Control - Colored Button」がそれ
  • ついでに Control で検索すると、NGUIが用意しているプレハブの一覧が確認できる
• プレハブのコピーを作成
  • 「Control - Simple Button」を Scene ビューにドラッグアンドドロップしてコピーを作成
  • このときGUI用のカメラから見える場所に配置する必要があるので、Scene ビューを調整しておく

スクリプトの組み合わせでボタンを作成する

• メニューで [NGUI] > [Create] > [Sprite]
• 作成された Sprite オブジェクトをヒエラルキーで選択
• [NGUI] > [Attach] > [Button Script] でボタン用のスクリプト追加
• [NGUI] > [Attach] > [Collider] で当たり判定用のコンポーネント追加

ボタン押下時に処理を実行する

• ボタン押下時の処理は UIButton スクリプトの OnClick 項目の Notify プロパティに GameObject を割り当てることで設定する
• まずはテスト用のオブジェクトの作成
  • [GameObject] > [Create Empty] で空のオブジェクトを作成
  • Assets で [Create] > [C# Script] でスクリプトを作成し、空のオブジェクトにアタッチ
  • 作成したスクリプトのクラス内に以下を追記

	// public じゃないと外部から呼び出せないので注意
	public void myClick () {
		Debug.Log ("Hello NGUI!");
	}

• ヒエラルキー上でボタンを選択し、UIButton の OnClick の Notify に、テスト用のオブジェクトをドラッグアンドドロップ
  • スクリプトに文法エラーがあるなどの場合、ここで正常に登録できない（ドラッグしてもNotify欄がアクティブにならない）。何かおかしかったらスクリプトをビルドしてみること。
• Notify の下に Method フィールドが表示されるので、前述の myClick を選択
  • リストにはpublicメソッドしか表示されないので、目的のメソッドが表示されない場合は公開範囲を確認すること。
• シーンを実行し、Game ビュー上でボタンをクリック、Console ビューに「Hello NGUI!」と表示されるのを確認する