【Unity】Image画像(Sprite)をスクリプトで切り替える方法

この記事について
この記事で分かること
Imageとは？
ImageのSpriteをスクリプトで変更する
まとめ

この記事について

この記事ではImage(Sprite)の切り替えをスクリプトで制御する方法が学べます。

この記事で分かること

Image.sprite に新しいSpriteを代入すると画像を切り替えられる
固定Spriteに差し替える
連続した複数Spriteを切り替える
選択したボタンで複数Spriteを切り替える

Imageとは？

Imageについては以下の記事を参考にしてください。

ImageのSpriteをスクリプトで変更する

Imageコンポーネントを扱う準備

今回必要なものは以下の通りです。
準備ができたら空のGameObjectにスクリプトをアタッチしてください。

スクリプトファイル
空のGameObject（スクリプトをアタッチする用）
Imageコンポーネント ×1
Buttonコンポーネント ×5
適当なSprite画像 ×3

すべての準備が終わり、このようになっていれば準備完了です。

Spriteを変更するコード例

まずは基本のコードを書いてみましょう。

using UnityEngine;
using UnityEngine.UI;

public class Image_SpriteChange : MonoBehaviour
{
    [SerializeField] private UnityEngine.UI.Image targetImage;  // 操作対象のImage
    [SerializeField] private Sprite Sprite_Stage1;   // Stage1の画像

    void Start()
    {
        // 開始時に画像を差し替える
        targetImage.sprite = Sprite_Stage1;
    }
}

コードが書けたらインスペクターでスクリプトにSprite画像をアタッチしましょう。

実行してみるとImageコンポーネントに画像が貼られます。

複数のSprite画像を順番に切り替える

次に、ボタンを押したら画像が連番通りに切り変わるようにしてみます。

using UnityEngine;
using UnityEngine.UI;

public class Image_SpriteChange : MonoBehaviour
{
    [SerializeField] private UnityEngine.UI.Image targetImage;  // 操作対象のImage
    [SerializeField] private Sprite[] Sprite_Stages;            // Stageの画像（配列）

    [SerializeField] private UnityEngine.UI.Button nextButton;  // NextButton
    [SerializeField] private UnityEngine.UI.Button buckButton;  // BuckButton

    [SerializeField] private int index=0;  // 番号

    private void Start()
    {
        // ボタンにイベントを追加
        nextButton.onClick.AddListener(NextImage);
        buckButton.onClick.AddListener(BuckImage);

        // 初期画像
        targetImage.sprite = Sprite_Stages[0];
    }

    //1つ次の画像
    public void NextImage()
    {
        index = (index + 1) % Sprite_Stages.Length;
        targetImage.sprite = Sprite_Stages[index];
    }
    //1つ前の画像
    public void BuckImage()
    {
        index = (index - 1 + Sprite_Stages.Length) % Sprite_Stages.Length;
        targetImage.sprite = Sprite_Stages[index];
    }
}

※Buttonコンポーネントの「AddListener」についてはこの記事を参考にしてください。

コードが書けたらインスペクターでスクリプトにSprite画像をアタッチしましょう。

実行してみるとこのように複数のSprite画像を順番に表示できるかと思います。

複数のSprite画像を選択したボタンで切り替える

次にボタンを複数用意し、それぞれ押したときに異なる画像を表示してみます。

using UnityEngine;
using UnityEngine.UI;

public class Image_SpriteChange : MonoBehaviour
{
    [SerializeField] private UnityEngine.UI.Image targetImage;  // 操作対象のImage
    [SerializeField] private Sprite[] Sprite_Stages;            // Stageの画像（配列）

    [SerializeField] private UnityEngine.UI.Button stage1Button;  // stage1Button
    [SerializeField] private UnityEngine.UI.Button stage2Button;  // stage2Button
    [SerializeField] private UnityEngine.UI.Button stage3Button;  // stage3Button

    [SerializeField] private int index=0;  // 番号

    private void Start()
    {
        // ボタンのイベントに引数を渡す
        stage1Button.onClick.AddListener(() => SelectImage(0));
        stage2Button.onClick.AddListener(() => SelectImage(1));
        stage3Button.onClick.AddListener(() => SelectImage(2));

        // 初期画像
        targetImage.sprite = Sprite_Stages[0];
    }

    //選択した画像を表示する
    public void SelectImage(int select)
    {
        targetImage.sprite = Sprite_Stages[select];
    }
}

コードが書けたらインスペクターでスクリプトにSprite画像をアタッチしましょう。