はじめに
UnityにはTextMeshProを使用したDropdownを簡単に実装することができます。
しかし、そのままだと下記のような見た目になるため、通常は制作中のゲームの雰囲気に合わせて、背景などを調整するかと思います。
自作でも他のUIに合わせて下記のように見た目を調整しました。
その際にどこをいじると何が変わるのかが分かりづらかったのでここにまとめておきます。
余談ですがC#のフォームアプリ等ではこのような形式のUIをComboboxと呼んだりすることもありますが、ここではUnityでの名称のDropdownと呼称します。
※正確にはユーザの入力も受け付けるものをComboxと呼ぶらしいです。
Dropdownのオブジェクト構成
Dropdownの標準のオブジェクト構成は下記のようになっています。
デフォルトでは選択肢展開部分のTemplete以下は非アクティブになっていますが、再生すると勝手に非アクティブになってくれるので編集時にはアクティブにしておいても大丈夫だと思います。
ベース部分の見た目
ベース部分の構成は下図のようになっています。
背景はDropdownオブジェクトのImageコンポーネントで画像を指定できます。
ImageコンポーネントでColorも操作できます。ただ、ここのColorはDropdownコンポーネント（下図）の方の影響も受けます。Imageコンポーネントの方でベースカラーを決めて、Dropdownコンポーネントの方は補正量を調整する形にするのが良いと思います。
またLabelのテキストは選択肢の中から設定されるため、ここで書き換えても再生時に上書きされるため注意が必要です。
選択肢展開部分
選択肢展開部分の構成は下記のようになっています。
展開するとItemというオブジェクトがありますが、再生時にはこのオブジェクトが選択肢の数だけ複製されるイメージになります。
（正確にはDropdownListというオブジェクトが別途生成され、そこに複製されます）
ここからは少し分かりづらくなっていくので色を変えながら見ていきます。
■選択肢展開部分の背景
TemplateオブジェクトのImageで設定します。
選択肢が多い場合Itemで埋もれるので、目立たない場合もあるかもしれません。
またここのHeightを調整することで、選択肢展開部分のサイズを調整できます。
多くの選択肢を表示して一覧性を良くしたい場合は大きめのHeightを指定すると良いです。
Heightサイズに選択肢が収まらない場合は自動でスクロールバーが表示されます。
■スクロールバーのスライドするエリアの背景
Scrollbarオブジェクトでスクロールバーの移動エリアの背景部分を調整できます。
デフォルトだとスクロールバー自体で覆われていて見えないと思うので、一度再生すると（なぜか）数のような見た目になって確認できると思います。
■スクロールバーのハンドル
スクロールバーのハンドルはHandleオブジェクトのImageコンポーネントで設定できます。
色もここで設定できますが、ベース部分と同様にScrollbarオブジェクトにアタッチされているScrollbarコンポーネント（下図）で補正することができます。
ここでの色指定はHandleオブジェクトで指定した色に「加算」される形になります。
（色関係に詳しくないのですみませんが、「乗算」・・・かも？）
各アイテム部分
選択肢を展開したときの表示される各アイテム部分はItemオブジェクト配下の下記を調整することで見た目を変更できます。
・ItemBackgorund
・ItemCheckmark
・ItemLabel
基本的にはベース部分の同じ構成になっており、背景カラーもItemBackgorundのImageコンポーネントでベースを指定してItemオブジェクトにアタッチされているToggleコンポーネントで補正することができます。
ここで指定した設定が再生時には全ての選択肢に反映されます（下図）。
アイテムに対するイメージの使用
ここからは余談ですが、Dropdownでは選択肢に画像を使用することもできます。
が、デフォルトだとOptions（選択肢）にSpriteを指定する項目はあるものの、ここに画像を指定しても何も表示されません（なんでやねん）。
表示するためには少し自分で調整する必要があります。
１．オブジェクトを用意する
DropdownオブジェクトとItemオブジェクト配下に画像を表示するためのImageオブジェクトをそれぞれ追加してやります。
ここではImageとItem Imageというオブジェクト名にしました。
その際、位置、サイズは良い感じに自身で調整してやる必要があります。
※下図ではわかりやすく黄色く塗っています。
２．Imageの参照を設定する
オブジェクトを作成したらDropdownオブジェクト > DropdownコンポーネントのCaption ImageとItem Imageにそれぞれ下図のように先ほど追加したImageの参照を設定してやります。
３．Options（選択肢）に画像（Sprite）を設定する
最後に画像を準備してOptionsのSpriteに参照を設定します。
ここでは「きのこ」「もも」「さくらんぼ」の画像を用意しました。
設定したあとで再生すると下図のように画像が表示されるようになっています。
さいごに
Dropdownはオプション画面などで使えると思うので、好きなようにカスタマイズして使ってみてください！
コメント