Unityで逆マスクを使用して円形状にフェードイン、フェードアウトするトランジションの作り方を紹介します。2Dのみならず3Dゲームでも利用できます。
逆マスクとは？
通常のマスクは、マスクされた部分の画像のみを表示するものですが、逆マスクは、これとは逆に、マスクされた部分の画像のみを非表示にするものです。 下のUnmaskForUGUというアセット(MITライセンス)を利用します。
動作環境
下記エディターバージョンで動作確認済みです。
- Unity2021.3.15f1
- Unity2020.3.8f1
作成手順
黒背景画像と逆マスク用の円形画像を用意して、円形逆マスクを黒背景中央から徐々に拡大することで、黒背景を徐々に非表示にして、フェードインするトランジションを作ることができます（フェードアウトはこの逆のやり方で作れます）。具体的な手順は下記の通りです。-
UnmaskForUGUの追加
Package Manager > Add package from git URLから下記URLを入力します。
https://github.com/mob-sakai/UnmaskForUGUI.git -
Maskオブジェクトの作成
Canvasを作成して、その配下にMaskという名称の空のGameObjectを作成します。MaskオブジェクトにMaskコンポーネントとImageコンポーネントをアタッチします。ImageのColorは何でも良いです。Rect TransformをStretchに変えて、下の画像内のパラメータに設定します。
-
Blackオブジェクト（黒背景）の作成
Maskオブジェクト配下に空のGameObject(Blackという名称にします)を生成してColorが黒のImageコンポーネントをアタッチします。下の画像のようにRect TransformをStretchに変えて、この黒背景が画面全体を埋め尽くすようにします。ImageコンポーネントのMaskableにチェックを入れます。
-
UnMaskオブジェクト(逆マスク)の作成
Maskオブジェクト配下のBlackオブジェクトの上に空のGameObject(UnMaskという名称にします)を生成して、Image、Unmaskコンポーネントをアタッチします。ImageコンポーネントのSource imageに円形画像を指定して、Maskableのチェックを外します(Colorは何でも良いです)。
-
UnMaskオブジェクトのScaleを変更するアニメーションの作成
UnMaskオブジェクトのScaleをいろいろ変更してみてください。黒背景画像のUnMaskに相当する部分が（円形状に）切り取られていることが分かると思います。つまり、UnMaskのScaleを0から徐々に増加（あるいは0に徐々に減少）させるアニメーションを作成することで冒頭動画のような円形状にフェードイン（フェードアウト）するトランジションを作ることができます。
配布
本トランジションは下記リンクから利用可能です。
MITライセンスとなります。
参考URL
https://github.com/mob-sakai/UnmaskForUGUI
https://kan-kikuchi.hatenablog.com/entry/UnmaskForUGUI
変更履歴
- ver.0.1.0 初稿作成 2023/02/22
- ver.0.2.0 本トランジション配布ページ追加、冗長的な一部の文章（アニメーションの具体的な作成方法）を削除 2023/03/25