Unity事例ノート

UNITY

ドロップダウンで画像表示を切り替え

ドロップダウンの選択によって、表示させる写真を変えられるようにしましょう。

3つのメニューを作成し、選択するとそれぞれの写真に切り替わります。

関連記事:
【Unity C#】画像(UI.Image)の設定項目
【Unity C#】Panelを使ってUIの表示を切り替える
【Unity C#】条件によって画像表示を切り替える

画像データの準備

プロジェクトビューに、Imageフォルダを作成し、ここに画像データを読み込みます。

Imageフォルダ内で右クリック→新しいアセットをインポート。

3つのjpeg画像をインポートしました。

3つ画像すべて、テクスチャタイプを「スプライト(2DとUI)」に変更します。

UI → 画像を作成します。

Imageのサイズ、位置を変更します。

Canvasを選択し、UIスケールモードを「画像サイズに拡大」にします。

ドロップダウンを作成

UI → ドロップダウンを作成。

位置を変更します。

Optionsというフィールドの名前を変更します。

ドロップダウンメニューの名前が変わります。

SelectItem.csを作成し、DropDownに追加します。

SelectItem.csを記述します。

ImageA~Cのフィールドが出来ますので、ボタンの順番になるように写真を入れましょう。

ドロップダウン選択時のアクションを、以下の手順で設定します。

プレイして、動きを確認してみましょう。

ドロップダウンを選択すれば、該当の画像が表示されるようになりました。

関連記事:
【Unity C#】画像(UI.Image)の設定項目
【Unity C#】Panelを使ってUIの表示を切り替える
【Unity C#】条件によって画像表示を切り替える