はじめに

ゲーム制作で必須のフェードクラスをまた作ったので忘れない用に記事にして残す
実装ソースコードはこちら

要件

• シングルトンなアクセス
• フェードイン
• フェードアウト
• 秒指定
• 色指定
• フェード完了後にコールバック
  • フェードアウト後にロードやオブジェクト破棄したいなどのため。

を満たす機能を作成する。

実装

• Awake内でCanvasを生成
  • CanvasScalerを追加
  • GraphicRayCasterを追加

void CreateCanvas()
    {
        //Canvasコンポーネント
        _canvas = gameObject.AddComponent<Canvas>();
        _canvas.renderMode = RenderMode.ScreenSpaceOverlay;
        _canvas.sortingOrder = sortingOrder;
        //CanvasScaler
        var scaler = gameObject.AddComponent<CanvasScaler>();
        scaler.uiScaleMode = CanvasScaler.ScaleMode.ScaleWithScreenSize;
        scaler.referenceResolution = new Vector2(Screen.width, Screen.height);

        //GraphicsRayCaster
        gameObject.AddComponent<GraphicRaycaster>();
    }

• Imageを追加するGameObjectを生成
  • Imageコンポーネントを追加
  • AnchorをMin(0.0f,0.0f)、Max(1.0f,1.0f)、Positionを(0.0f,0.0f)に設定

void CreateImage()
    {
        _fade = new GameObject("fadeImage", typeof(Image));
        _fade.transform.SetParent(transform);
        var rect = _fade.transform as RectTransform;
        Vector2 min = new Vector2(0.0f, 0.0f);
        Vector2 max = new Vector2(1.0f, 1.0f);
        rect.anchorMin = min;
        rect.anchorMax = max;
        rect.anchoredPosition = new Vector2(0.0f, 0.0f);
        rect.sizeDelta = new Vector2(0.0f, 0.0f);
        _fadeImage = _fade.GetComponent<Image>();
        _fadeImage.color = new Color(1.0f, 1.0f, 1.0f, 0.0f);
    }

• Updateでフェード処理実装
  • Color.Lerpでフェード色を時間指定で補間させて取得
  • 0.0秒以下の時点でフェード終了、コールバックがあれば呼び出し
  • フェードインの場合はCanvas描画させているだけ無駄なのでenabled=falseにする

private void Update()
    {
        switch (_mode)
        {
            case Mode.Idle:
                break;
            case Mode.In:
                _fadeImage.color = Color.Lerp(_toColor, _fromColor, _elaps / _time);
                _elaps -= Time.deltaTime;
                if(_elaps < 0.0f)
                {
                    _fadeImage.color = _toColor;
                    _mode = Mode.Idle;
                    _canvas.enabled = false;
                    _action?.Invoke();
                }
                break;
            case Mode.Out:
                _fadeImage.color = Color.Lerp(_toColor, _fromColor, _elaps / _time);
                _elaps -= Time.deltaTime;
                if (_elaps < 0.0f)
                {
                    _fadeImage.color = _toColor;
                    _mode = Mode.Idle;
                    _action?.Invoke();
                }
                break;
            default:
                break;
        }
    }

おわりに

フェードをレイヤー分けて複数使いたい場合はSortingOrderを都度指定してあげればいいかと思っている。
フェードアウトするけどモノローグやセリフを表示させておきたい場合など。