【Unity】Imageの色・透明度(Alpha)をスクリプトで変更する方法

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

この記事について

この記事ではImageの色・透明度をスクリプトで制御する方法が学べます。

この記事で分かること

Image.color で色や透明度を変更できる
Color.red や Color.green などの定義済み色を指定可能
new Color(r, g, b, a) でRGBAを細かく設定できる
color.a を操作するとフェードイン・フェードアウトを実装できる

Imageとは？

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

ImageのColor・Alphaをスクリプトで変更する

Imageをスクリプトから参照する準備

まずはヒエラルキーで右クリックをしてImageを1つ用意します。
・「右クリック」→「UI」→「Image」
・SourceImageにSprite画像をアタッチ

次に以下のスクリプトを作成して、先ほどのImageにアタッチしてください。
※スクリプト名とクラス名は同じにしてください。

using UnityEngine;

public class Image_ColorChange : MonoBehaviour
{
    [SerializeField] private UnityEngine.UI.Image testImage;

    void Start()
    {
        // 同じGameObjectにアタッチされているButtonを取得
        testImage = GetComponent<UnityEngine.UI.Image>();
    }
}

ここまで出来たら準備完了です！

単色に変更する方法

Unityには「定義済みカラー」が用意されています（Color.red, Color.blueなど）。

using UnityEngine;

public class Image_ColorChange : MonoBehaviour
{
    [SerializeField] private UnityEngine.UI.Image testImage;

    void Start()
    {
        // 同じGameObjectにアタッチされているButtonを取得
        testImage = GetComponent<UnityEngine.UI.Image>();
        
        //単色の赤に変更
        testImage.color = Color.red;
    }
}

実行するとこのようにスタート時に定義済みのColorに切り替わります。

RGBAで細かく指定する方法

Colorは「new Color(r, g, b, a)」で 任意の色 を作れます。
0〜1の範囲で指定する点に注意（0=最小、1=最大）。

using UnityEngine;

public class Image_ColorChange : MonoBehaviour
{
    [SerializeField] private UnityEngine.UI.Image testImage;

    void Start()
    {
        // 同じGameObjectにアタッチされているButtonを取得
        testImage = GetComponent<UnityEngine.UI.Image>();

        // R, G, B, A は 0~1 の範囲で指定
        testImage.color = new Color(0.5f, 0.8f, 1f, 1f);
    }
}

実行するとこのようにスタート時にnew Colorで指定したColorに切り替わります。

定義済みカラーの透明度（Alpha）を変更する方法

Colorは「値型」なので、そのまま「testImage.color.a = 0.5f」と書いても反映されません。変数にコピーして「Color.a」を変更し、最後に代入し直すのが正しい方法です。
※RGBAで指定する場合は「A」を指定するだけで問題ありません。

using UnityEngine;

public class Image_ColorChange : MonoBehaviour
{
    [SerializeField] private UnityEngine.UI.Image testImage;

    void Start()
    {
        // 同じGameObjectにアタッチされているButtonを取得
        testImage = GetComponent<UnityEngine.UI.Image>();
        
        //単色の赤に変更
        testImage.color = Color.red;

        //Alphaを変更
        Color c = testImage.color;
        c.a = 0.5f;       // 50% 透明
        testImage.color = c;
    }
}

実行するとこのようにスタート時にAlphaで指定した透明度に切り替わります。

フェードイン・フェードアウト処理

ゲームではタイトル画面で「フェードイン・フェードアウト」を繰り返す演出を使用します。例えばタイトル画面の「Press Start」などに応用可能です。

実行するとImageが現れたり、消えたりを繰り返します。今回は0~1を反復する「Mathf.PingPong」と時間の「Time.time」を使用しました。

using System.Collections;
using UnityEngine;

public class Image_ColorChange : MonoBehaviour
{
    [SerializeField] private UnityEngine.UI.Image testImage;
    [SerializeField] private float speed = 0.6f;

    void Start()
    {
        // 同じGameObjectにアタッチされているButtonを取得
        testImage = GetComponent<UnityEngine.UI.Image>();
        
        //単色の赤に変更
        //testImage.color = Color.red;

        // R, G, B, A は 0~1 の範囲で指定
        //testImage.color = new Color(0.5f, 0.8f, 1f, 1f);

        //Alphaを変更
        //Color c = testImage.color;
        //c.a = 0.5f;       // 50% 透明
        //testImage.color = c;
    }

    private void Update()
    {
        // アルファを変化
        Color c = testImage.color;
        c.a = Mathf.PingPong(Time.time * speed, 1f);　// 0~1を往復
        testImage.color = c;
    }
}