みなさん、こんにちは。見ていただきありがとうございます。
シリーズ「ARサイコロをつくろう！」Part.4です。
今回は、Unityの設定画面のDropdownについて開発をしていきます。
ARサイコロのきっかけなどは、「ARサイコロをつくろう！ AR Dice まとめ」に詳しく書いてありますので見てください。
Contents
設定画面のDropdown
Dropdownとは？
Dropdownは、項目の設定を決められた選択肢の中で行う時に便利なUIです。
AR Diceでは、Diceの各面にあたりとはずれを用意し、今後あたりの種類も増やす予定のため設定のUIは、ドロップダウンを使用しました。右の矢印をクリックすると画像のように選択肢が現れます。
完成のイメージ
こちらが、作成する設定画面のゴールです。各面に対応したあたりやはずれのDropdownを設置します。
あたりやはずれに対してDiceの面のDropdownがあった方が良いように見えますが、今後あたりが複数の面になることも考えているため、Diceの面に対してあたりやはずれのDropdownを設置します。
UnityのDropdown UI
Unityで利用するUIには、「Canvas」という特殊なオブジェクトの下に構築していきます。
名前の由来は定かではありませんが、UnityのGUIなのか「uGUI」と呼ばれています。
uGUIの基本的な説明は、「uGUIチュートリアル – Metal Brage」で詳しく説明されています。とてもわかりやすいです。
Dropdown uGUIの構成
Dropdownの中には、いくつかの要素が入っています。
基本的な編集は、下の項目だけで良いと思います。
- Dropdown・・・選択肢の追加・削除
- Label・・・選択肢の文字のスタイルと選択前に表示されている文字の設定
- Arrow・・・選択肢の横にある矢印の設定
今回は、Dropdownをそのまま使い、選択肢として「はずれ」「あたり」「あたり２」の３つを設定することにしました。
Dropdownの選択肢
Dropdownの「Inspector」→「Dropdown(Script)」を編集します。
Optionsの部分にある「+」や「-」を使うことで選択肢の増減を行います。
スクリプトとして以下のような動きを想定しました。
- 設定画面に移動した時に、現在の各面を評価する値「dicesurface」を読み取る
- 読み取った「dicesurface」の値と同じDropdownのリスト表示にする
- 設定画面で各面を評価する値「dicesurface」をDropdownが選択された時に更新する
スクリプト
作成したスクリプトはこちらです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class diceSurfaceChange : MonoBehaviour { titlestart titlestart1; //Part.3で作成したダイスの値を読み取るstatic変数用 private int[] dicesurface = new int[6]; //ダイスの値が入る配列 private Dropdown dropdown; //Dropdownの値を取得したり更新するため用 // Use this for initialization void Start () { //1.設定画面に移動した時に、現在の各面を評価する値「dicesurface」を読み取る dropdown = GetComponent<UnityEngine.UI.Dropdown>(); dicesurface = titlestart.getSurfaceState(); //2.読み取った「dicesurface」の値と同じDropdownのリスト表示にする if(transform.name == "Dropdown"){ dropdown.value = dicesurface[0]; } else if(transform.name == "Dropdown (1)"){ dropdown.value = dicesurface[1]; } else if(transform.name == "Dropdown (2)"){ dropdown.value = dicesurface[2]; } else if(transform.name == "Dropdown (3)"){ dropdown.value = dicesurface[3]; } else if(transform.name == "Dropdown (4)"){ dropdown.value = dicesurface[4]; } else if(transform.name == "Dropdown (5)"){ dropdown.value = dicesurface[5]; } } // Update is called once per frame void Update () { } //設定画面で各面を評価する値「dicesurface」をDropdownが選択された時に更新する public void ChangeDropdown(Dropdown dropdown){ SurfaceStateUpdate(dropdown.name, dropdown.value); } public void SurfaceStateUpdate(string name, int value){ dicesurface = titlestart.getSurfaceState(); if(name == "Dropdown"){ dicesurface[0] = value; } else if(name == "Dropdown (1)"){ dicesurface[1] = value; } else if(name == "Dropdown (2)"){ dicesurface[2] = value; } else if(name == "Dropdown (3)"){ dicesurface[3] = value; } else if(name == "Dropdown (4)"){ dicesurface[4] = value; } else if(name == "Dropdown (5)"){ dicesurface[5] = value; } } } |
Dropdownにスクリプトを紐づける
uGUIであるDropdownと動かすためのプログラムを作成したので、次にそれぞれを紐付けます。
まず、作成したプログラムをDropdownの中入れます。
Dropdownの「Inspector」→「Add Compooent」ボタンを押して、作成したプログラムの名前(今回はdiceSurfaceChange)を検索すると出てくるはずです。
その後、Dropdownの「Inspector」→「On Value Changed(Int32)」の部分にある「+」を押すとDropdownの値が変わった時などに、どのプログラムを使うかを設定することができます。
Dropdownの「Inspector」→「On Value Changed(Int32)」→「None (Object)」の部分にuGUI自身ををドラッグ&ドロップします。
すると、Dropdownの「Inspector」→「On Value Changed(Int32)」→「No Function」の部分を入れたプログラムの関数に変更できるので行います。
最後に、新しく現れたDropdownの「Inspector」→「On Value Changed(Int32)」→「None (Dropdown)」に、再度自分自身を入れて終了です。
詰まったところ
プログラムとしては、そんなに難しくないです。
コツとしては、すべてのDropdownに同じプログラムをいれるためtransform.nameでプログラムが入っているDropdownの名前取得した後、それに対応した配列番号に値を更新しています。
この時にDropdownをコピペして量産していたので量産された名前が「Dropdown (数字)」と全角のスペースが間に入ってしまい名前取得ができず、詰まりました。
名前の付け方大事ですね…あとで修正します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
dropdown = GetComponent<UnityEngine.UI.Dropdown>(); dicesurface = titlestart.getSurfaceState(); if(transform.name == "Dropdown"){ dropdown.value = dicesurface[0]; } else if(transform.name == "Dropdown (1)"){ dropdown.value = dicesurface[1]; } else if(transform.name == "Dropdown (2)"){ dropdown.value = dicesurface[2]; } else if(transform.name == "Dropdown (3)"){ dropdown.value = dicesurface[3]; } else if(transform.name == "Dropdown (4)"){ dropdown.value = dicesurface[4]; } else if(transform.name == "Dropdown (5)"){ dropdown.value = dicesurface[5]; } |
まとめ
最後までみていただきありがとうございます。
今回は、uGUIのDropdownの使い方について説明しました。
ARの部分も書きたかったのですが、一番ボリュームがありそうだったため、分けることにします。
次回もみていただけると嬉しいです。
