1分間 Unity講座 Dropdown の活用3 スクリプトファイルでDropdownリストに画像ファイルをセットする方法 - ファイブボックス

• Facebook
• X(旧:Twitter)
• LINE

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

前回の記事、Dropdownツールの活用方法第２弾　ではDropdown の Optionsプロパティに配列で用意した選択肢をセットしました。Optionsプロパティにはテキストだけではなく、画像も指定することができます。

今回はスクリプトファイルから、Optionsプロパティの画像を指定してみたいと思います。

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

素材の用意

事前にDropdownで指定した画像を表示するImageオブジェクトを用意します。

Canvas の配下に、UI ⇒ Image を選択し、Imageオブジェクトを作詞し、Inspectorで任意の場所に指定します。

サンプルでは下のようにテキストの左側に表示されるように配置しています。

今回は Dropdown の Options プロパティに画像（Sprite）をセットします。

下の図のように、Optionsプロパティには、テキスト、画像の両方、または一方を指定することができます。

Assetsフォルダ内に「Resources」というフォルダを作成します。

スクリプトファイルから画像やテキストデータを取得する際は、このフォルダから取り込みます。フォルダ名をキーにデータを取得するので、名前は間違えないようにしてください。

「Resources」フォルダ内に事前に用意した任意の画像を格納します。

サンプルではトランプのマークを用意してみました。名前を先の動画で作成した 配列：option と同じ名前にしておくことで、配列テキストをOptionsプロパティにAssignしたときと同じタイミング（同じ繰り返し文内）でOptionsプロパティの画像保管部分に渡すことができます。

■ 画像ファイルの拡張子は？

「Resources」フォルダ内に格納する画像ファイルの拡張子は、jpg でも png でも構いません。Unityでファイルを参照する際は、拡張子なしの名前解決になります。

スクリプトファイルの作成

前の記事で用意したDropdownManager.csというスクリプトファイルに追記します。

変数と配列

今回、新たに変数を1つ、配列を一つ用意します

• 変数：mage　Image型の変数で選択されたリストの画像を表示（上で作成したもの）
• 配列：sprits　Sprits型の配列、配列:optionsに対応する画像

Image image;            //画像を表示するためのImageを管理
Sprite[] sprits;        //imageに表示する画像

Start関数で初期値を取得します。（※動画と一部違う部分があります）

void Start()
{
    image = transform.Find("Image").GetComponent<Image>(); //imageを取得
    image.gameObject.SetActive(false);                     //画像を隠す
    sprits = new Sprite[option.Length];               //spritsの初期化
    for (int i = 0; i < option.Length; i++)           //配列の数だけ繰り返す
    {
         dropdown.options[i].text = option[i];   //リストを取得(記述済み）
         sprits[i] = Resources.Load<Sprite>(option[i]);  //画像を取得
    }
}

配列を使用するには、初期化が必要です。今回は配列：option の要素数（スペード、ハート、ダイヤ、クラブの4つ）で初期化しています。

「Resources」フォルダから素材を取得するには Resources.Load()メソッドを使用します。

Resources.Load<素材の種類>(素材のパス・名前)

画像のセット

Dropdown で任意の選択肢が選ばれたタイミングで、上で作成した配列の画像がセットされるようにします。

作成済みの関数：ChangeText() に次のようにコードを追加します。

public void ChangeText()
 {
     text.text = dropdown.options[dropdown.value].text;  //記述済み
     image.gameObject.SetActive(true);                   //画像を表示
     //imageにspritsのdropdown.value番目の画像を指定
     image.sprite = sprits[dropdown.value];
 }

これで選択するたびにトランプの画像が変化するのを確認できたと思います。

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

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

• Facebook
• X(旧:Twitter)
• LINE