はじめに
ゲーム制作で必須のフェードクラスをまた作ったので忘れない用に記事にして残す
実装ソースコードはこちら
要件
- シングルトンなアクセス
- フェードイン
- フェードアウト
- 秒指定
- 色指定
- フェード完了後にコールバック
- フェードアウト後にロードやオブジェクト破棄したいなどのため。
を満たす機能を作成する。
実装
- 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を都度指定してあげればいいかと思っている。
フェードアウトするけどモノローグやセリフを表示させておきたい場合など。