Unityでコントローラを利用したセレクト画面の作り方
Unityでシーンやキャラクターの選択画面を作ろうと思ったのですが、タップやVRの場合の視線を利用する方法は比較的ドキュメントが多いのですが、コントローラ(Gamepad)を利用した時の方法を探すのに少し手間取ったので、メモ代わりに手順を残しておきたいと思います
セレクト(メニュー)シーンの作成
ボタンの作成
まずは選択肢となるボタンを作成します(Hierarchy > Create > UI > Button)
今回は3つボタンを作成し、それぞれTextをCube, Sphere, Cylinderにします
Standalone Input Moduleの確認
Buttonなど入力に関するUIコンポーネントを作成すると、自動でヒエラルキーにEventSystemというコンポーネントが作成されます。
最初からある程度のInput情報を取得するようになっており、画像では上から4つがアクションの割り当てになります
色の変更
この時点でマウスのアクションに反応するようにはなっていますが、わかりにくいので状態別に色分けをします
Button1コンポーネントを選択して、InspectorのButton(Script)のTransitionを変更します。
- TransitionをColor Tintへ(通常デフォルト)
- Highlighted Colorに赤色を指定
- Pressed Colorを青色に指定
変更が完了したらシーンを保存してデモを実行してみます。
マウスオーバー時には赤色に、クリック時には青色になることが確認できます
確認ができたら他のボタンも同じように色の設定を行います
キーボードやコントローラ(Xbox360コントローラなど)で選択項目の移動ができるようになります
スクリプトの作成
次にデフォルトの選択項目を設定します
設定用のスクリプトを用意します
- 今回は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ボタンが選択状態になっていることが確認できます
アニメーションの付加
ここまでは選択時のハイライトは赤く色を変えるだけでしたが、次はanimationを設定してみます
Button1のTransitionをColor TintからAnimationへ変更します
するとAuto generate Animationというボタンが出現するので選択してアニメーションをファイルを保存します。
- 今回はMyButtonAnimationにしました
Auto generateが完了すると以下のようにanimationファイルとAnimatorという項目が追加されます
この段階ではなんのアニメーションも設定されていないので、次にアニメーションの設定を行います
ボタンコンポーネントを選択した状態で、「Window > Animation」を選択します
すると以下のような動画編集っぽいWindowが表示されるので、無心で左上の設定を変更します
- 対象のモードをnormalからHighlightedへ変更
- 赤丸のレコードボタンをクリック
するとデモの時などに使用していた再生ボタンが赤色に変化します
この状態で変更した操作が、アニメーションの設定となります
試しにScaleを1.2, 1.2, 1.2、色を黄色にしてみます
設定が終わったらレコードボタンをもう一度クリックします
ScaleとColorの項目が追加されたのがわかります
デモモードで確認してみると、Cubeボタンが選択されているときは色が黄色に、大きさも少し大きくなるのが確認できます。
アニメーションの流用
次にCubeボタンで作成したanimationを他の2ボタンへ流用します
それぞれのボタンのTransitionをAnimationへ変更し、AssetsにあるMyButtonAnimationをそれぞれのAnimationのInspectorへD&Dすることで設定を使いまわすことが可能です。
遷移先シーンの作成
次にボタンをクリック後に遷移するシーンを作成します。
ここは移動したことの確認に用いるだけなので適当に名前の通りの3Dオブジェクトが存在するだけのシーンを作成します
シーンを作成したら、一度Build settingを開き、すべてのシーンをbuild対象に入れます
各シーンへの遷移処理
スクリプトの作成
ボタンを選択した状態で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); } }
確認
以上でセレクト画面の作成の完了です
実際に選択したボタンに対応したシーンに遷移することを確認しましょう
キーボードの場合は矢印キーをEnter、Xboxコントローラーの場合は左スティックとAボタンがそれぞれ移動と決定ボタンに割り当てられています