UnityのUGUIでまとめてフェードさせる

Unityでゲームに限らず、何らかのアプリケーションを作成する際にUI作成は避けられません。
UnityでUIを作成するための基本機能であるUGUIを使うのがお手軽ですが、UGUIのオブジェクトを階層立てて配置していく仕様上、非常に煩雑な状態になりがちです。
UGUIの階層化された要素を簡易的にまとめて操作できる「CanvasGroup」コンポーネントをご紹介します。

まずサンプルとしてUGUIで階層化された構造のUIを作成しました。
これらの各要素を表示・非表示などさせたい時に単純にオン・オフを切り替えるだけではなく、フェードイン・フェードアウトするように変化させたい時にはどうすればよいでしょうか。

Unityの仕様上、階層上の親となるオブジェクトの表示・非表示を切り替えると子も同様に操作されますが、フェードするようなアニメーション効果はそれぞれの要素ごとに個別に作成しないといけません。階層構造が複雑になると非常に煩雑な設定を行う必要があって大変ですよね。

ここでCanvasGroupコンポーネントが非常に便利に使えます。

階層構造上で操作したい要素たちの親に当たるオブジェクトにこのCanvasGroupコンポーネントを設定するだけで使用できます。

CanvasGroupコンポーネントは4種のパラメータを持ちます。

・Alpha　階層化のオブジェクトの表示透明度を一律に操作します。
・Interactable　階層化のUGUIオブジェクトが操作可能かどうかを一律に操作します。
・Blocks Raycasts　階層化のUGIオブジェクトにクリック等を検知、遮蔽する当たり判定を付けるかどうかを一律に操作します。
・Ignore Parent Groups　このCanvasGroupコンポーネントよりさらに親に当たる階層にあるCanvasGroupコンポーネントの操作を受け付けるかどうかを設定します。

今回はAlphaパラメーターを操作してみましょう。

Alphaパラメータを操作することで一律で透明度を操作することができました。
簡易的なフェードの演出であれば簡単に表現することができますね。