【コピペでUnity】ドロップダウンリストは超簡単に作れます!

Unity
Unity

ドロップダウンリストを実装したい人

Unityでドロップダウンリストの機能ってあったっけ?
ドロップダウンリストで何が選択されているかを取得したい!

こういった疑問に答えます。

 

本記事の内容

●ドロップダウン用コード
●ドロップダウンの設定方法
●ドロップダウンのカスタマイズ
●ドロップダウンのコード解説

 

この記事を書いている私は12才からフルスクラッチでゲームを作っています。
またコンパイラを専門として情報理工学の博士まで進学、中退をしており、プログラミング言語の文法にも関わる論文を書いていました。

 

本記事ではコピペで使える実行済みのコードと設定方法を紹介しつつ、細かい理解を深めるための詳細も解説します。

※実行環境
Unity2021.3.1f1
Windows 10

 

ドロップダウン用コード

ドロップダウンリストで、選択している値を取得するコードです。
ゲームでは生年月日の入力や難易度の切り替えなどで活用できるでしょう。

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.Events;

public class DropdownListener : MonoBehaviour {
    private Dropdown _dropdown;

    void Start() {
        //ドロップダウンリストのコンポーネントを取得
        _dropdown = GetComponent<Dropdown>();

        //値を変更した時に実行したい関数をUnityAction型で準備
        UnityAction<int> action = OnValueChanged;
    }

    //ドロップダウンの値が変更された時、選択肢の番号が引数に与えられ呼び出される
    public void OnValueChanged(int value) {
        //選択肢の番号を出力
        Debug.Log(value);
        
        //選択肢の番号からテキストを取得して出力
        Debug.Log(_dropdown.options[value].text);
    }
}

 

●_dropdown
Dropdownコンポーネントを扱うための変数
選択肢の番号やテキスト、値の変更時に実行する関数などを管理できる

●action
自分で作った関数を、関数AddLisnerの引数に渡すためのUnityAction型変数
ラムダ式で書くことが多いが、理解を深めるため厳密に記述した

●value
ドロップダウンで選択肢が変更された際、新しく選択された番号
最初の選択肢は1番ではなく0番

 

ドロップダウンの設定方法

以下でドロップダウンリストを作っていきます。
Unityの標準機能に無い、と見せかけて有る、という親切設計です。

 

1.「Hierarchy」ウィンドウの余白で「右クリック > UI > Legacy > Dropdown」
2.「Scene」ビュー右上のボタンから、2Dビューに切り替える
3.「Scene」ビュー内を「ホイール」や「Alt+右クリック」で縮小する

 

4.「Project」ウィンドウの余白で「右クリック > Create > C#スクリプト」
5.名前を「DropdownListener」に変更
6.サンプルコードをコピーペーストして保存

 

6.「Hierarchy」ウィンドウで追加した「Cube」をクリック
7.「Inspector」ウィンドウ最下部の「Add Component」ボタンをクリック
8.「dropdownlistener」と入力すると先ほどの「DropdownListener」が出てくるのでクリック

 

以上で実行するとドロップダウンリストで値を変更した時、

●選択肢の番号
●選択肢のテキスト

がConsoleウィンドウに出力されます。

 

ドロップダウンのカスタマイズ

もちろんですが、選択肢は追加したりテキストを書きかえることが出来ます。
試しに選択肢を1つ追加してみましょう。

 

1.「Hierarchy」ウィンドウで追加した「Dropdown」をクリック
2.「Inspector」ウインドウの「Dropdown」コンポーネント、「Options」の「+」をクリック
3.2つめの「Option C」が作られるので、クリックして「Option D」に書き換え

 

同様に実行すると、番号の「3」と「Option D」の出力が確認できると思います。

 

似たような考え方で選択肢を減らすときは「-」をクリック、テキストは直接クリックして書きかえることが出来ます。
こういった選択肢の追加、編集はスクリプトでも可能ですが、初めのうちはGUIで設定しておけば十分かと思います。

 

ドロップダウンのコード解説

今回のスクリプトはコンソールに選択肢を表示する仕様です。
この選択肢をどう取得しているかを掘り下げてみましょう。

山場は大きく分けて2つあります。

 

onValueChangedの引数から選択肢を取得する

ドロップダウンを操作した際は、Dropdownの「onValueChanged」を使ってAddListenerで登録した、「OnValueChanged」が呼ばれます。

public void OnValueChanged(int value) {
    //選択肢の番号を出力
    Debug.Log(value);
    
    //選択肢の番号からテキストを取得して出力
    Debug.Log(_dropdown.options[value].text);
}

 

このvalueこそが選択されている値で、今回であれば

●0…Option A
●1…Option B
●2…Option C
●3…Option D

のように対応します。

 

valueはもちろん数字なので、選択肢の文字列を取得したい場合は、

①Dropdownコンポーネントの配列optionsに、インデックスであるvalueを与える
②options[value]で文字列を格納しているtextを参照する

ことで実現しています。

 

AddListenerでドロップダウンの操作を設定する

サンプルでは下記のようにドロップダウン時の操作を設定しています。

//値を変更した時に実行したい関数をUnityAction型で準備
UnityAction action = OnValueChanged;
//値を変更した時に関数が実行されるよう登録
_dropdown.onValueChanged.AddListener(action);

 

AddListenerの引数にはラムダ式を書いているコードを多く見かけますし、それでよいと思います。
ただ今回はここから1歩踏み込むために、UnityActionという型を使っています。

 

UnityAction型は以下の特徴を持ちます。

●引数はint型
●返り値はvoid型
●関数型

引数をint型に限定している部分は<int>で、C#のジェネリックという記法です。

 

このようにAddListenerをしっかり理解しておくことで、いざ自力で実装する場合も不具合に対処しやすくなるかと思います。

 

まだまだ色々な操作が出来ますが、その辺りに挑戦する方々はもはや入門向けのブログ記事で学ぶレベルを超えているかと思います。
とはいえご希望次第では複雑な実装の記事なども作っていこうと思いますので、お気軽にご連絡ください。

 

今回は以上です。

Unityはいいぞ。

コメント

  1. Caribou4352 より:

    指定したフォルダ内にあるすべての画像をドロップダウンリストで表示し、選択したものがオブジェクトに反映するようにしたいと考えています。

    色々検索してみたのですが、それらしいページが見つからずで。。。
    自分の力量の無さが大きいですが💦
    もし可能でしたらご教授いただけると幸いです。

    • satoshi satoshi より:

      コメントありがとうございます!

      「Asset/Resources/images」フォルダに画像があることを想定した記述を下記にまとめます。
      適宜環境に合わせて書きかえていただければと思います!

      using UnityEngine;
      using UnityEngine.UI;
      using UnityEngine.Events;
      
      public class DropdownImage : MonoBehaviour {
          //画像を反映したいオブジェクトを管理
          public Image image;
      
          //フォルダ内にある全てのスプライトを管理
          private Sprite[] _sprites;
      
          void Start() {
              //フォルダ内にある全てのスプライトを取得
              _sprites = Resources.LoadAll<Sprite>("images/");
      
              //ドロップダウンコンポーネントを取得
              Dropdown _dropdown = GetComponent<Dropdown>();
              //選択肢をすべて消去
              _dropdown.ClearOptions();
      
              //ドロップダウンリストにスプライト名で選択肢を追加
              for (int i = 0; i < _sprites.Length; i++) {
                  _dropdown.options.Add(new Dropdown.OptionData { text = _sprites[i].name });
              }
              
              //呼び出しの登録
              UnityAction<int> action = OnValueChanged;
              //値を変更した時に関数が実行されるよう登録
              _dropdown.onValueChanged.AddListener(action);
          }
      
          //ドロップダウンの値が変更された時、選択肢の番号が引数に与えられ呼び出される
          public void OnValueChanged(int value) {
              //選択肢の番号からスプライトを指定して差し替え
              image.sprite = _sprites[value];
          }
      }
      • Caribou4352 より:

        こんなにも早くお返事いただけるなんて思ってもみず、嬉しい限りです!
        ご回答いただきましたコードでうまく動作させることができました!
        大変助かりました。ありがとうございます!
        コード内のコメントも分かりやすく、参考になります。

タイトルとURLをコピーしました