Unityでの逆マスクと注意点

スポンサーリンク
Unity
スポンサーリンク
↑管理人が個人でUnity+Live2Dで作成しているスマホゲームです

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だと逆マスク部分が異常な表示になってしまいました。

これはカメラのclear flagsがDon’t clearになっていると起こる現象の様です。DOTweenのDOFade()でも同様の現象が起こりました。clear flagsはsolid colorにしておきましょう。

1 Star2 Stars3 Stars4 Stars5 Stars (まだ投票されていません)
読み込み中...

コメント

広告ブロッカーを無効にしてください。

タイトルとURLをコピーしました