1分間 Unity講座 Dropdown の活用１ 選択されたリスト内容を取得する方法 - ファイブボックス

• Facebook
• X(旧:Twitter)
• LINE

このブログはUnityの初心者向けに、Untiyの機能の使い方、基本のスクリプトファイルの使い方から応用までをご説明しています。中級以上の方に読んでいただきたい内容も随時更新していますので、お時間がある方、検索でここにアクセスされた方はぜひ立ち寄っていってください。
過去のブログはUnity講座まとめのページにまとめていますので、こちらも併せてご参照ください！

今回から数回にわたり、UIのDropdownツールの活用方法についてご説明していきます。Dropdownルールは複数の子要素とそれぞれが持つ各種ンポーネントで構成されています。機能が多くて使いこなすのが難しいですが、まずは最低限の使い方のみご紹介していきます。 初回の今回は、選択されたドロップダウンリストをTextに表示する方法のご説明。

下の動画は、その詰め込みすぎた「ファイブボックス　一分間Unity講座　Dropdownの活用方法１」 のショート動画です。ご興味がございましたら、こちらの動画もご参照ください。

Dropdown

オブジェクトの挙動

DropdownツールはUI ⇒ Legacy ⇒ Dropdown　またはUI ⇒ Dropdown (Text Mesh Pro) で生成します。LegacyでもTextMeshProでも基本的な動きや機能は同じなので、今回はLegacyで説明を行います。

生成すると左下の図のように、配下に複数のオブジェクトをもつDropdownのツールが配置されます。

【通常時】

• Dropdown – Dropdown の本体で、展開したときのリストはこの optionsプロパティに登録（詳細は後述）
  • Label： 最初の選択状態のText、または選択されたリストのTextを表示
  • Arrow：初期状態で下向きの矢印（DropdownArrow）が表示され、クリックして展開することを促します
  • Template（非表示）：展開時に表示されるリストのテンプレートとなる部分で、初期状態では非アクティブ状態です。複数の子要素を持ちますが、全て展開されるリストテンプレートとなるものです。展開するリストの色、形状を変更したい場合はここを編集します。

【展開時】

• Dropdown
  • Label：選択するまでは初期値、選択後は選択されたLabelを表示
  • Arrow：通常時と同様
  • Template（非表示）：テンプレートは非表示のまま
  • Dropdown List ：Template をもとに複製されたもので、展開されたリスト全体位の親要素となる部分
    • ViewPort：選択リストのスクロールできる範囲
      • Content：選択リストのコンテンツ部分
        • Item：選択リストのテンプレートとなるオブジェクト
        • Item0：1つ目の選択肢をまとめる親オブジェクト◆ Item BackGround：itemリストの背景 ◆ Item Checkmark：選択されたときに左側につくレ点◆ item Label：選択肢のテキスト部分
        • Item1、Item2・・・（アイテム数だけ続く）
• Blocker：選択肢エリアの背景にある透明なオブジェクトで、ユーザー操作の完了や重複などを制御する役割をもつ

それぞれのオブジェクト、コンポーネントに対し、もう少し詳しく説明します

Dropdownオブジェクトの基本構造

1. Dropdown　DropdownコンポーネントがアタッチされているオブジェクトDropdownコンポーネントには以下のプロパティがあります。
   • Interactable：ユーザーの操作（選択）の有効、無効を管理
   • Alpha Fade Speed：リストがFadeIn FadeOut するのにかかる時間
   • Options：リスト形式で表示したいオプションを指定。各オプションはDropdown.OptionData型で、textやimageをセットして表示内容を決定
   • Value：現在選択されているオプションのインデックス（int型）を表示
   • On Value Changed：リストを選択したタイミングで呼び出される関数を登録
     
2. Template　Dropdownのオプションが表示されるリスト部分のUIを格納するオブジェクトで、初期状態では非アクティブです。Dropdownが展開されるとTemplateから複製された Dropdown List がアクティブになり、DropdownコンポーネントのOptionsで設定した項目がリストに生成されて表示されます。Templateには、リストを構成する以下の要素が含まれています：
   • Viewport：スクロールできる範囲を設定します。
   • Content：オプションのリスト全体を格納するオブジェクトです。
   • Item：各オプションのボタンのテンプレートです。Optionsで指定した各オプションがここに複製されて表示されます。

オブジェクトの作成

このサンプルではDropdownに4つのリストを作成し、選択したリストがTextに表示される仕組みを作ってみます。

UIの配下に Text、および DropDown を追加、座標を調整して任意の場所に配置します。

Dropdownの Dropdownコンポーネントを以下のように変更します。

1. Valueプロパティ：-1 を指定（0～3以外の数字であればOK） この後、値が変更した際に呼ばれる関数を作成しますが、初期値の0を使用した場合、最初に0番目のアイテムが選択された場合、変更なしとみなされ、関数が発動しません。
2. Optionsプロパティ：TextとSpriteのセットになっていますが、まずはText部分を使用します。各リストのText部分に任意の選択肢を指定してください。サンプルでは「あいうえお」「かきくけこ」「さしすせそ」「たちつてと」と入力しました。

続いてDropdownの子要素のLabelのTextコンポーネント、TextプロパティにDropdownに最初に表示される文字を指定します。

サンプルでは「選択してください」の文字を指定しました。

選択プログラム

任意の名前（サンプルではDropDownManager）でスクリプトファイルを作成し、NameSpaceに UnityEngine.UIを指定します。

using UnityEngine.UI;

今回のサンプルでは変数を2つ使用します

• Text型の変数「text」：TextオブジェクトのText（文字列）を更新するために使用
• Dropdown型の変数「dropdown」：Dropdown を操作するために使用

ともに[SerializeField]を指定し、inspectorからオブジェクトを指定できるようにしておきます。

[SerializeField] Text text;                           //Textを管理
[SerializeField] Dropdown dropdown;     //Dropdownを管理

Dropdown の On Value Changedプロパティ に登録する関数を作成します。アクセス修飾子を public にしておきましょう。

public void ChangeText()
{
    //textの文字をdropdownのoptionsの選択された番号番目にする
    text.text = dropdown.options[dropdown.value].text;
}

options はリストとして扱われます。選択した番号は Dropdownコンポーネントのvalueプロパティになるので、選択したリストの文字は dropdown.options[dropdown.value].textとして表すことができます。

変数と関数の登録

作成した変数、および関数をInspectorからオブジェクトに登録します。

まずは作成したスクリプトファイルをCanvasにアタッチします。

[SerializeField]で宣言した変数が Canvas の Inspector に表示されるので、それぞれText、およびDropdownのオブジェクトをAssignしておきます。

続いて DropdownコンポーネントのOn Value Changedのイベントに作成した関数をAssignします。

1. 右下の＋ボタンを押してイベントを追加
2. 左下のオブジェクト登録部分に、Canvasを指定
3. 右上のClass、Method登録部分に、DropDownManager ⇒ ChanveText()メソッドを指定

ではこれで起動させてみましょう。

正しく選択した項目がテキストに表示されるようになったと思います。

ファイブボックスでは、スクラッチやUnityの個別指導のオンラインレッスンを行っています。

ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。

• Facebook
• X(旧:Twitter)
• LINE