脳汁portal

アメリカ在住(だった)新米エンジニアがその日学んだIT知識を書き綴るブログ

Unityでコントローラを利用したセレクト画面の作り方

Unityでシーンやキャラクターの選択画面を作ろうと思ったのですが、タップやVRの場合の視線を利用する方法は比較的ドキュメントが多いのですが、コントローラ(Gamepad)を利用した時の方法を探すのに少し手間取ったので、メモ代わりに手順を残しておきたいと思います

セレクト(メニュー)シーンの作成

ボタンの作成

まずは選択肢となるボタンを作成します(Hierarchy > Create > UI > Button)
今回は3つボタンを作成し、それぞれTextをCube, Sphere, Cylinderにします
f:id:portaltan:20160509160302p:plain

Standalone Input Moduleの確認

Buttonなど入力に関するUIコンポーネントを作成すると、自動でヒエラルキーにEventSystemというコンポーネントが作成されます。
最初からある程度のInput情報を取得するようになっており、画像では上から4つがアクションの割り当てになります
f:id:portaltan:20160509160658p:plain

色の変更

この時点でマウスのアクションに反応するようにはなっていますが、わかりにくいので状態別に色分けをします
f:id:portaltan:20160509161137p:plain
Button1コンポーネントを選択して、InspectorのButton(Script)のTransitionを変更します。

  • TransitionをColor Tintへ(通常デフォルト)
  • Highlighted Colorに赤色を指定
  • Pressed Colorを青色に指定

変更が完了したらシーンを保存してデモを実行してみます。
マウスオーバー時には赤色に、クリック時には青色になることが確認できます
f:id:portaltan:20160509161450p:plain
f:id:portaltan:20160509161525p:plain
確認ができたら他のボタンも同じように色の設定を行います
キーボードやコントローラ(Xbox360コントローラなど)で選択項目の移動ができるようになります
f:id:portaltan:20160509163217p:plain

スクリプトの作成

次にデフォルトの選択項目を設定します
設定用のスクリプトを用意します

  • 今回はmenu.csという名前にしました
using UnityEngine;
using System.Collections;
using UnityEngine.UI; // UIコンポーネントの使用

public class menu : MonoBehaviour {
	Button cube;
	Button sphere;
	Button cylinder;

	void Start () {
                // ボタンコンポーネントの取得
		cube     = GameObject.Find ("/Canvas/Button1").GetComponent<Button> ();
		sphere   = GameObject.Find ("/Canvas/Button2").GetComponent<Button> ();
		cylinder = GameObject.Find ("/Canvas/Button3").GetComponent<Button> ();

                // 最初に選択状態にしたいボタンの設定
		cube.Select ();
	}
}

スクリプトができたらメインのカメラ(今回はOVRCameraRig)にAttachします
デモを起動すると、何も入力しない段階からCubeボタンが選択状態になっていることが確認できます
f:id:portaltan:20160509163734p:plain

アニメーションの付加

ここまでは選択時のハイライトは赤く色を変えるだけでしたが、次はanimationを設定してみます
Button1のTransitionをColor TintからAnimationへ変更します
f:id:portaltan:20160509164232p:plain

するとAuto generate Animationというボタンが出現するので選択してアニメーションをファイルを保存します。

  • 今回はMyButtonAnimationにしました

Auto generateが完了すると以下のようにanimationファイルとAnimatorという項目が追加されます
f:id:portaltan:20160509164713p:plain

この段階ではなんのアニメーションも設定されていないので、次にアニメーションの設定を行います
ボタンコンポーネントを選択した状態で、「Window > Animation」を選択します
f:id:portaltan:20160509164903p:plain

すると以下のような動画編集っぽいWindowが表示されるので、無心で左上の設定を変更します

  • 対象のモードをnormalからHighlightedへ変更
  • 赤丸のレコードボタンをクリック

f:id:portaltan:20160509165339p:plain

するとデモの時などに使用していた再生ボタンが赤色に変化します
f:id:portaltan:20160509165544p:plain
この状態で変更した操作が、アニメーションの設定となります

試しにScaleを1.2, 1.2, 1.2、色を黄色にしてみます
f:id:portaltan:20160509165709p:plain

設定が終わったらレコードボタンをもう一度クリックします
ScaleとColorの項目が追加されたのがわかります
f:id:portaltan:20160509165741p:plain

デモモードで確認してみると、Cubeボタンが選択されているときは色が黄色に、大きさも少し大きくなるのが確認できます。
f:id:portaltan:20160509165946p:plain

アニメーションの流用

次にCubeボタンで作成したanimationを他の2ボタンへ流用します
それぞれのボタンのTransitionをAnimationへ変更し、AssetsにあるMyButtonAnimationをそれぞれのAnimationのInspectorへD&Dすることで設定を使いまわすことが可能です。

遷移先シーンの作成

次にボタンをクリック後に遷移するシーンを作成します。
ここは移動したことの確認に用いるだけなので適当に名前の通りの3Dオブジェクトが存在するだけのシーンを作成します
f:id:portaltan:20160509170810p:plain

シーンを作成したら、一度Build settingを開き、すべてのシーンをbuild対象に入れます
f:id:portaltan:20160509172503p:plain

各シーンへの遷移処理

スクリプトの作成

ボタンを選択した状態でsubmitボタンを押したときに各シーンへ遷移する処理を作成します
空のGameObjectを作成し、ChangeSceneと名付けます
次にInspectorのAdd componentからC#スクリプトを作成します

  • 今回はButtonFunction.csという名前にしました
using UnityEngine;
using System.Collections;
using UnityEngine.SceneManagement;

public class ButtonFunction : MonoBehaviour {

	public void StringArgFunction(string s){
		SceneManager.LoadScene (s);
	}
}
ボタンコンポーネント側の設定

ボタンでクリックされたときに上記で作成したStringArgFunctionを呼び出すように設定します
ボタンコンポーネントのOn Click()項目右下の「+」ボタンを押し、下記のように設定します

  • None (Object)をChangeSceneに変更(スクリプトを張り付けてある空のGameObject)
  • No Functionを「Button Function > StringArgFunction」へ変更
  • 右下のテキストボックスに遷移させたいシーン名を入力

f:id:portaltan:20160509172228p:plain

確認

以上でセレクト画面の作成の完了です
実際に選択したボタンに対応したシーンに遷移することを確認しましょう
キーボードの場合は矢印キーをEnter、Xboxコントローラーの場合は左スティックとAボタンがそれぞれ移動と決定ボタンに割り当てられています
f:id:portaltan:20160509172759p:plain
f:id:portaltan:20160509172815p:plain