Unityにはデフォルトでマスク機能(マスク画像と重なる部分のみ他のイメージを表示する)はありますが、逆マスク(マスク画像と重なる部分のみイメージを透過させる)はありません。しかしそれを実現可能にするアセットが存在します。
それがUnmaskForUGUIです。
プロジェクト内のUnmaskForUGUI/Assets/Coffee/UIExtensions/UnmaskForUGUIを自プロジェクトのAssets以下に保存して使います。
逆マスクの設定方法
階層構造が独特なので注意します。
まず、CanvasにMaskコンポーネントとImageを追加したゲームオブジェクトAを配置します。更にその直下にUnMaskとImageをアタッチしたゲームオブジェクトBを配置し、その同階層の下に逆マスクされるImageをアタッチしたゲームオブジェクトCを配置します。
全画面表示の画像からくり抜きたい場合は、AのRectTransformはStretch-Stretchにしてマージンは全て0にします。クリックされる必要は無いのでRaycastTargetはOFFにします。
BのUnMaskコンポーネントはImageコンポーネントよりも下に設定してください。そうでないと何故かUnMask画像が表示されなくなります。Cの下がクリックできるようにRaycastTargetはOFFにします。
Cの画像はCの下がクリックされないようにRaycastTargetをONにします。
注意点
Umidigiだと問題なく動きましたが、Pocophone f1だと逆マスク部分が異常な表示になってしまいました。
February 23, 2020
これはカメラのclear flagsがDon’t clearになっていると起こる現象の様です。DOTweenのDOFade()でも同様の現象が起こりました。clear flagsはsolid colorにしておきましょう。
読み込み中...
コメント