【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_ColorChange.csを作成し、先ほど用意したImageと同じGameObjectにアタッチしてください。以下の例はGetComponentで同じGameObjectのImageを取得するため、InspectorのTest Imageへ別のImageを指定しても、Startで上書きされます。
※スクリプト名とクラス名は同じにしてください。
別のGameObjectにあるImageを操作したい場合は、Inspectorで参照を設定し、GetComponentによる代入を行わない形に変更します。

using UnityEngine;

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

    void Start()
    {
        // 同じGameObjectにアタッチされているImageを取得
        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にアタッチされているImageを取得
        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にアタッチされているImageを取得
        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は「値型」の構造体で、Image.colorはColorを返すプロパティです。そのため、testImage.color.a = 0.5f;と直接書くと、C#のコンパイルエラーCS1612になります。Image.colorをColor変数へコピーし、その変数のaを変更してからImage.colorへ代入し直してください。下のコードはこの順序で、赤いImageのAlphaを0.5に設定しています。
※RGBAで指定する場合は「A」を指定するだけで問題ありません。

using UnityEngine;

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

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

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

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

Alphaを変更しても見た目が変わらないときは、操作しているImageが正しいか、Animatorや別のスクリプトがColorを上書きしていないかを確認してください。親にCanvasGroupがある場合は、そのAlphaも掛け合わされるため、Image.color.aだけでは最終的な見た目を決められません。

Alphaを0にしても、そのImageのクリック判定が自動で無効になるわけではありません。クリック判定に使わない装飾用ImageならRaycast Targetをオフにし、UI全体の表示・操作をまとめて切り替える場合はCanvasGroupのalpha、interactable、blocksRaycastsを用途に応じて設定します。

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

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

次の例は、ImageのAlphaを0〜1の間で繰り返し往復させるフェードです。「Mathf.PingPong」に「Time.time」とspeedを組み合わせ、Mathf.PingPong(Time.time * speed, 1f)でAlphaを求めます。speedが0.6の場合、Time.timeScaleが1なら計算上は約1.67秒で片道、約3.33秒で1往復します。speedは正の値にしてください。
Time.timeはアプリ開始からの経過時間を使うため、途中でこのコンポーネントを有効にした場合、Alphaが0から始まるとは限りません。また、Time.timeScaleを0にするとこのフェードも止まります。Time.timeScale = 0によるポーズ中も動かしたい場合はTime.unscaledTimeへ置き換えます。ただし、Unity EditorのPause中はTime.unscaledTimeも進みません。

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にアタッチされているImageを取得
        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;
    }
}