Categories: Unity

Unity:UIオブジェクトのImageコンポーネントのSource Imageを変更する

今回は、UIオブジェクトでスプライトを表示するための Image コンポーネントを制御してゲーム実行中にスプライトを切り替える処理を試しました。

UIオブジェクトの作成

[Hierarchy]ウィンドウ > Createボタン > UI > Image を選択。
オブジェクト Image がシーンに追加されます。[Inspector]ウィンドウを確認すると Image (Script) コンポーネントがあり、Source Image フィールドにスプライト画像を割り当てます。

スプライトを変更する処理のスクリプト

スペースキーを押すたびにスプライトが切り替わる処理のスクリプトを作成しました。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
// UI処理のクラスを使用する宣言
using UnityEngine.UI;

public class SpriteChange : MonoBehaviour
{
    // Image コンポーネントを格納する変数
    private Image m_Image;
    // スプライトオブジェクトを格納する配列
    public Sprite[] m_Sprite;
    // スプライトオブジェクトを変更するためのフラグ
    bool Change;

    // ゲーム開始時に実行する処理
    void Start()
    {
        // スプライトオブジェクトを変更するためのフラグを false に設定
        Change = false;
        // Image コンポーネントを取得して変数 m_Image に格納
        m_Image = GetComponent<Image>();
    }

    // ゲーム実行中に毎フレーム実行する処理
    void Update()
    {
        // スペースキーが押された場合
        if (Input.GetKeyDown(KeyCode.Space))
        {
            // スプライトオブジェクトの変更フラグが true の場合
            if (Change)
            {
                // スプライトオブジェクトの変更
                //（配列 m_Sprite[0] に格納したスプライトオブジェクトを変数 m_Image に格納したImage コンポーネントに割り当て）
                m_Image.sprite = m_Sprite[0];
                Change = false;
            }
            // スプライトオブジェクトの変更フラグが false の場合
            else
            {
                // スプライトオブジェクトの変更
                //（配列 m_Sprite[1] に格納したスプライトオブジェクトを変数 m_Image に格納したImage コンポーネントに割り当て）
                m_Image.sprite = m_Sprite[1];
                Change = true;
            }
        }
    }
}

スクリプトコンポーネントの設定

[Hierarchy]ウィンドウでオブジェクトImage を選択。

[Inspector]ウィンドウ > Image (Script) コンポーネント > Source Image フィールドにスタート時のスプライト image01 を割り当て。
作成したスクリプトSpriteChange (Script) コンポーネントの配列フィールドに2つのスプライトオブジェクト（image01と02）を割り当てます。