[Unity] Panel を使って fadein を実装する

前回 OnCollisionEnter2D を使って物体の衝突を検知する実装 を行いました。

blog.bestinarix.studio

今回はその続きとして、物体が衝突時に Panel を使って fadein の実装を行います。

実装方法

最終イメージは上手くキャプチャできませんでしたが、実装方法こんな感じです。

まず Panel Object の Image Component はこのように設定します。

ポイントは、A (アルファ) を 0 に設定し透明度を0にしておく。
Image Component を disable にしておく。

そして script を以下のように書き換えます。

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

public class TriggerController : MonoBehaviour
{
    public GameObject Panel;

    private bool isPanel = false;
    private float red, green, blue;
    private float alpha;
    private float speed = 0.001f;

    public void Awake()
    {
        red = Panel.GetComponent<Image>().color.r;
        green = Panel.GetComponent<Image>().color.g;
        blue = Panel.GetComponent<Image>().color.b;
    }

    public void Update()
    {
        if (isPanel)
        {
            Panel.GetComponent<Image>().color = new Color(red, green, blue, alpha);
            if (alpha < 150)
            {
                alpha += speed;
            }
        }
    }

    public void OnCollisionEnter2D(Collision2D collision)
    {
        if (collision.gameObject.tag == "block")
        {
            gameObject.GetComponent<Renderer>().material.color = Color.red;
            Panel.GetComponent<Image>().enabled = true;
            isPanel = true;
        }
    }
}

Awake メソッドで初期値を r, g, b の取得しておきます。

OnCollisionEnter2D で物体が衝突したときに Panel を enabled に isPanel フラグを true にします。
こうすることで Update メソッドのでアルファ値を増加させることで fadein を実現しています。