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

2021年07月12日

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

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

画像データの準備

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

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

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

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

UI → 画像を作成します。

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

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

ドロップダウンを作成

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

位置を変更します。

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

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

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

SelectItem.csを記述します。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class SelectItem : MonoBehaviour
{
    public Sprite imageA;
    public Sprite imageB;
    public Sprite imageC;
    private Image myPhoto;
    
    void Start () {
        myPhoto = GameObject.Find("Image").GetComponent<Image>();
        myPhoto.sprite = imageA;
    }
 
    public void DropDownItem (Dropdown Item)
    {
        switch (Item.value) { 
            case 0:
                myPhoto.sprite = imageA;
                break;
            case 1:
                myPhoto.sprite = imageB;
                break;
            case 2:
                myPhoto.sprite = imageC;
                break;
            default:
                break;
        }
    }
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.UI;

public class SelectItem : MonoBehaviour

{

public Sprite imageA;

public Sprite imageB;

public Sprite imageC;

private Image myPhoto;

void Start () {

myPhoto = GameObject.Find("Image").GetComponent<Image>();

myPhoto.sprite = imageA;

}

public void DropDownItem (Dropdown Item)

{

switch (Item.value) {

case 0:

myPhoto.sprite = imageA;

break;

case 1:

myPhoto.sprite = imageB;

break;

case 2:

myPhoto.sprite = imageC;

break;

default:

break;

}

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

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

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

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

< 前の記事次の記事 >

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

画像データの準備

ドロップダウンを作成

SCHOOL教室案内

枚方くずは校

神戸芦屋校

京都南教室

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

画像データの準備

ドロップダウンを作成

関連記事

SCHOOL教室案内

枚方くずは校

神戸芦屋校

京都南教室