見出し画像

Unity UI入門⑩ | Dropdownの使い方｜選択した項目に合わせて色を変更する方法

ファイブボックス

UnityのUIには、複数の選択肢から1つを選べる「Dropdown」というパーツがあります。

Dropdownは、クリックすると選択肢の一覧が開き、その中から1つを選択できるUIです。

たとえば、ゲームでは次のような場面で使われます。

  • 難易度の選択

  • 言語の選択

  • 解像度の選択

  • キャラクターやアイテムの選択

前回は、Toggle Groupを使って、複数の選択肢から1つだけを選ぶラジオボタンを作成しました。

Dropdownも複数の選択肢から1つを選ぶUIですが、普段は選択肢を閉じておけるため、画面をコンパクトにまとめられるのが特徴です。

今回はDropdownに「赤」「青」「緑」の選択肢を登録し、選択した項目に合わせてImageの色を変更してみます。


1．今回作成するもの

今回は、次のようなUIを作成します。

Dropdownには、次の3つの選択肢を登録します。

  • 赤

  • 青

  • 緑

Dropdownから項目を選ぶと、画面上に配置したImageの色が選択した色に切り替わります。
選択した結果がすぐに見た目へ反映されるため、Dropdownの動作を確認しやすいサンプルです。

2．Dropdownを作成する

まずは、Hierarchyウィンドウを右クリック、表示されたメニューから、UI → Legacy → Dropdown を作成します。
Unityのバージョンや表示設定によってメニューの表記は異なることがありますが、今回のサンプルでは、Lecacy Text のDropdown を選択しました。
※TextMeshPro の DropDown でも大丈夫です。

Dropdownを作成すると、Canvasがない場合はCanvasも自動的に作成されます。
また、EventSystemがない場合は、EventSystemも作成されます。

作成したDropdownは、Gameビューで確認しやすい位置へ移動しておきましょう。
今回は、画面の左上付近へ配置します。

Dropdownを少し大きくしておくと、文字が見やすくなります。

3．Dropdownのオブジェクト構成

HierarchyウィンドウでDropdownの左側にある三角形をクリックすると、子オブジェクトを確認できます。

Dropdownは、次のような構造になっています。

Dropdown
├─ Label
├─ Arrow
└─ Template
   ├─ Viewport
   │  └─ Content
   │     └─ Item
   │        ├─ Item Background
   │        ├─ Item Checkmark
   │        └─ Item Label
   └─ Scrollbar

一見すると複雑ですが、最初からすべての役割を覚える必要はありません。今回は、主に次の部分を確認します。

  • Label

  • Arrow

  • Template

  • Item Checkmark

  • Item Label

Label

Labelは、現在選択されている項目を表示するTextです。
たとえば、Dropdownで「赤」を選択している場合は、Labelに「赤」と表示されます。

Arrow

Arrowは、Dropdownの右側に表示される矢印です。
クリックすると選択肢が開くことを、見た目で分かりやすくするために使われています。

Template

Templateは、Dropdownを開いたときに表示される選択肢一覧のひな型です。
通常時のTemplateは非表示になっており、Dropdownをクリックすると、このTemplateをもとに選択肢の一覧が作成されます。

Item Label

Item Labelは、開いた一覧の各項目に文字を表示するためのTextです。
Optionsに登録した「赤」「青」「緑」などの文字が、Item Labelへ表示されます。

Item Checkmark

Item Checkmarkは、現在選択されている項目を分かりやすくするためのチェック画像です。
選択中の項目にはチェックマークが表示されます。

Scrollbar

選択肢が多く、Templateの中にすべて表示しきれない場合は、Scrollbarを使って一覧をスクロールできます。
Unityの標準的なDropdownにはスクロール用の構造が含まれており、項目が多い場合にも対応できます。

今回は選択肢が3つだけなので、Scrollbarの細かい設定は扱いません。

4．Dropdownコンポーネント

HierarchyウィンドウでDropdownを選択し、Inspectorウィンドウを確認します。
Dropdownオブジェクトには、ImageコンポーネントやDropdownコンポーネントなどが設定されています。

Dropdownコンポーネントの主な項目を確認します。

Interactable

Interactableでは、ユーザーがDropdownを操作できるかを設定します。
チェックが入っている場合は操作できます。
チェックを外すと、クリックしても選択肢が開かなくなります。
ゲームの状態によって設定を変更できないようにしたい場合などに使用します。

今回は操作する必要があるため、チェックを入れたままにしておきます。

Template

Templateには、選択肢を開いたときに表示するオブジェクトが設定されています。
通常は、子オブジェクトのTemplateが登録されています。
Templateの設定を外すと、選択肢を正しく表示できなくなるため、基本的には変更しません。

Caption Text

Caption Textには、現在選択されている項目を表示するTextが設定されています。
通常は、子オブジェクトのLabelが登録されています。

たとえば「青」を選択している場合、Dropdownを閉じた状態ではLabelに「青」と表示されます。

Item Text

Item Textには、Dropdownを開いたときに表示される、選択肢1件分のTextを設定します。
通常は、Templateの中にあるItem Labelが登録されています。
Item Textの登録欄は1つだけですが、このTextに1つの選択肢だけを表示するわけではありません。
Dropdownを開くと、UnityがItem Labelを選択肢の数だけ複製し、Optionsに登録されている文字をそれぞれ表示します。

Value

Valueは、現在選択されている項目の番号です。
Dropdownの項目番号は、0から始まります。
今回、次の順番で項目を登録した場合を考えてみましょう。

  • 0：赤

  • 1：青

  • 2：緑

「赤」を選択している場合、Valueは0です。
「青」を選択している場合、Valueは1です。
「緑」を選択している場合、Valueは2です。

Options

Optionsには、Dropdownで表示する選択肢を登録します。
初期状態では、いくつかのサンプル項目が登録されています。
今回は、これらを「赤」「青」「緑」へ変更します。

5．選択肢を設定する

DropdownコンポーネントのOptionsを確認します。
初期状態で3つの選択肢を入れる枠が用意されています。
※UnityEditorのバージョンによって違う場合もあります。

それぞれの項目には、TextとImageを設定できます。
今回は文字だけを使うため、Imageは設定しません。Optionsを次のように変更してください。

  • Element 0：赤

  • Element 1：青

  • Element 2：緑

項目が3つより多い場合は、マイナスボタンで不要な項目を削除します。
項目が足りない場合は、プラスボタンで追加します。

設定が終わったら、Unityを実行してDropdownをクリックしてみましょう。
一覧に次の3項目が表示されれば成功です。

項目を選択すると、Dropdownに表示される文字が切り替わります。
この時点では、まだImageの色は変わりませんが、次は色を表示するためのImageを作成します。

6．色を表示するImageを作成

HierarchyウィンドウでCanvasを右クリックし、UIのImageを作成します。
作成したImageの名前を、ColorImage に変更します。

ColorImageは、Dropdownと重ならない場所へ配置します。
色の変化が分かりやすいように、少し大きめのサイズにしておきましょう。

ImageコンポーネントのColorは、最初は白のままで構いません。
実行後にDropdownを操作すると、このImageの色が赤、青、緑へ切り替わるようにします。

7．スクリプトを作成

Projectウィンドウで右クリックし、新しいC#スクリプト：DropdownController を作成します。

作成したDropdownController を開き、次のように記述します。

using UnityEngine;
using UnityEngine.UI;

public class DropdownController : MonoBehaviour
{
    [SerializeField] Image targetImage; // 色変更の対象となるImage

    public void ChangeColor(int value) // 色変更のメソッド
    {
        Debug.Log("選択された番号：" + value); // 選択された番号をログに出力
    }
}

コードの内容を順番に確認していきましょう。

using UnityEngine.UI

using UnityEngine.UI;

今回は、UnityのUIであるImageをスクリプトから操作します。
そのため、UnityEngine.UIを追加しています。

ChangeColor

public void ChangeColor(int value)

ChangeColorは、Dropdownで選択されている項目が変わったときに呼び出すメソッドです。
引数のvalueには、選択された項目の番号が入ります。
今回の場合は、次のいずれかが入ります。

  • 赤：0

  • 青：1

  • 緑：2

まずは、受け取った番号をConsoleウィンドウへ表示するだけにしています。

8．スクリプトをGameObjectへ設定する

Hierarchyウィンドウを右クリックし、空のGameObjectを作成し、名前を「DropdownController」など任意の名前に変更します。

DropdownControllerへ、先ほど作成した DropdownController スクリプトをドラッグ＆ドロップします。
※最新のUnityEditorでは、スクリプトファイル：DropDownController をhierarchyにドラッグ＆ドロップすると、同じ結果が得られます。

コンポーネントには、Target Imageという欄があります。
HierarchyウィンドウのColorImageを、Target Imageへドラッグ＆ドロップしてください。

これで、スクリプトからColorImageを操作できるようになります。

9．On Value Changedを設定する

次に、Dropdownで選択した項目が変わったときに、ChangeColorメソッドを実行するように設定します。

HierarchyウィンドウでDropdownを選択します。
次の手順で、InspectorウィンドウのDropdownコンポーネントにある On Value Changedに、作成したメソッドをセットします。

  1. 右下の「＋」ボタンをクリックして、イベントを1つ追加

  2. 追加された欄の左下に、Hierarchyの DropdownController をドラッグ＆ドロップ。

  3. 右上「No Function」と表示されている部分をクリックし、関数の一覧から、次のメソッドを選択。
    　　DropdownSample → ChangeColor（上段のDynamicのほう）
    　    　※ ここで引数付きメソッド：ChangeCorot(int) を選ばないように。

Dynamic intを選択すると、Dropdownが現在選択している項目番号を、ChangeColorメソッドのvalueへ渡せます。

DropdownのOn Value Changedは、ユーザーが別の項目を選択したときに呼び出されるイベントです。

10．選択された番号を確認する

設定が完了したら、Unityを実行します。

Dropdown をクリックし、任意の色を選択してみましょう。
Console に選択した色に対応する番号が表示されます。

このように、Dropdownでは選択された文字そのものではなく、項目の番号を受け取って処理を分けられます。

11．選択した項目に合わせて色を変更する

選択された番号を受け取れることが確認できたので、Imageの色を変更します。

DropdownController の ChangeColor() を次のように書き換えてください。

public void ChangeColor(int value) // 色変更のメソッド
    {
        switch (value)
        {
            case 0:
                targetImage.color = Color.red;  // 赤色に変更
                break;
            case 1:
                targetImage.color = Color.blue;  // 青色に変更
                break;
            case 2:
                targetImage.color = Color.green;  // 緑色に変更
                break;
        }
    }

今回は、switch文を使って選択された番号ごとに処理を分けています。

Unity をPlay をしてが変わるのを確認します。

今回のように、選択された番号ごとに1つの処理だけを実行したい場合に使用します。

12．最初からImageの色を合わせる

現在のスクリプトでは、Dropdownの項目を変更したときにだけChangeColorが実行されます。
そのため、ゲーム開始時のDropdownが「赤」になっていても、ColorImageは最初に設定した白のままです。

最初からDropdownとImageの色を合わせたい場合は、いくつかの方法がありますが、今回はStart関数でChangeCorot() を呼び出す方法を使ってみます。

DropdownController に以下のコードを追記します。

[SerializeField] Dropdown dropdown; // 色変更のためのDropdown

void Start()
{
    ChangeColor(dropdown.value); // 初期状態での色変更
}

定義した変数 doropdown hierarchy上のDropdownを登録します。DropdownControllerを選択すると、DropdownSampleコンポーネントにDropdown欄が追加されます。
HierarchyウィンドウのDropdownを、この欄へドラッグ＆ドロップしてください。

private void Start()
{
    ChangeColor(dropdown.value);
}

Start関数は、ゲーム開始時に一度実行されます。
dropdown.valueで、現在選択されている項目番号を取得しています。

その番号をChangeColorへ渡すことで、ゲーム開始時にも現在の選択項目に合った色を設定できます。

13．選択された文字を取得する

Dropdownから受け取れるValueは、選択された項目の番号です。

しかし、場合によっては「赤」や「青」といった、選択肢に設定されている文字を取得したいこともあります。

選択された文字は、次のコードで取得できます。

dropdown.options[value].text

ChangeColorメソッドへ、次の処理を追加してみましょう。

public void ChangeColor(int value) // 色変更のメソッド
{
    string selectedText = dropdown.options[value].text;// 選択された項目のテキストを取得
    Debug.Log("選択された項目：" + selectedText); // 選択された項目　をログに出力
    
　  //以下記述済み
    switch (value)
    {
        case 0:
            targetImage.color = Color.red;  // 赤色に変更
            break;
        case 1:
            targetImage.color = Color.blue;  // 青色に変更
            break;
        case 2:
            targetImage.color = Color.green;  // 緑色に変更
            break;
    }
}

ゲームを実行して「青」を選択すると、Consoleウィンドウに次のように表示されます。

選択された項目：青

コードの解説

dropdown.options[value].text

このコードを分けて考えてみましょう。

■ dropdown

画面上のDropdownコンポーネントです。

■ options

Dropdownに登録されている選択肢の一覧です。
今回の場合は、「赤」「青」「緑」の3項目が登録されています。
UnityのDropdownでは、利用可能な項目が options のリストに保存されています。

■ [value]

選択肢の一覧から、value番目の項目を取得します。
たとえば、valueが1なら2番目の「青」を取得します。

■ text

取得した項目に設定されている文字を取り出します。
そのため、「青」が選択されている場合は、selectedTextへ「青」が代入されます。

今回は色の切り替えに番号を使っていますが、選択された項目名を画面に表示したり、選択内容を保存したりするときには、文字の取得も利用できます。

14．Dropdownの見た目を変更する

Dropdownの見た目は、子オブジェクトやImageコンポーネントを変更することで調整できます。
ただし、Dropdownは複数のオブジェクトで構成されているため、変更する場所によって反映される部分が異なります。

閉じているときの背景

Dropdown本体のImageコンポーネントを変更します。
Colorを変更すると、閉じている状態の背景色を変更できます。

現在選択中の文字

子オブジェクトのLabelを選択します。
TextコンポーネントのFont、Font Size、Colorなどを変更すると、現在選択中の文字の見た目を変更できます。

右側の矢印

子オブジェクトのArrowを選択します。
ImageコンポーネントのSource ImageやColorを変更すると、矢印の見た目を変更できます。
また、Rect Transformコンポーネントで矢印の大きさや向きを変更することもできます。

開いた一覧の文字、背景

Templateの中にある Item Label や Item backGround などをを選択します。
Item LabelのTextコンポーネントを変更すると、一覧に表示される各項目の文字サイズや色を調整できます。
Item backGround の Imageコンポーネントを変更すると、背景の画像や色を調整することができます。

選択中のチェックマーク

Templateの中にあるItem Checkmarkを選択します。
Imageコンポーネントを変更すると、選択中の項目に表示されるチェックマークの見た目を変更できます。
Rect Transformコンポーネントで大きさや向きを調整することができます。

今回はDropdownの動作を確認することが目的なので、見た目の調整は必要最低限で問題ありません。

15．今回のまとめ

今回は、UnityのDropdownを使い、選択した項目に合わせてImageの色を変更しました。

今回のポイントは次のとおりです。

次回は、Dropdownの選択肢一覧にも使われている、Scroll Viewについて確認します。

Scroll Viewを使うと、画面内に収まらない文章や項目を、スクロールして表示できるUIを作成できます。

▼ Unity初心者向け記事まとめはこちら

こちらのマガジン「ミニゲーム作成講座　全8回セット」でもシーンの切り替えなどを活用して、初心者でも知識ゼロから作れるミニゲーム作成講座を紹介しています。

さらにステップアップの「スマホで遊ぶジャンプゲーム　8回セット」のマガジンもぜひご活用ください。

ファイブボックスでは、スクラッチやUnityの個別指導のオンラインレッスンを行っています。
ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。

いいなと思ったら応援しよう！

ファイブボックス よろしければ応援お願いします！ いただいたチップはクリエイターとしての活動費に使わせていただきます！