【Unity】Maskの逆バージョン、内側くりぬきができる「Unmask For UGUI」を初めて使う

はじめに

今回はMaskとは逆に、内側をくりぬくことができるUnmask For UGUIについて紹介したいと思います。

f:id:hanaaaaaachiru:20210502174020p:plain — サンプル1

f:id:hanaaaaaachiru:20210502182644p:plain — サンプル2

github.com

はじめに
インストール方法
基本的な使い方
ボタンを使った使い方
さいごに

インストール方法

Unity2018.3あたり？からGitのURLからPakcageをインストールできるようになりました。
Git URL からのインストール - Unity マニュアル

今回はその方法でUnmask For UGUIをインストールしていきます。

まずはwindows -> Package MangaerからPackageManagerを開いた後、左上の+ボタンを押しAdd package from git URLを選択。

f:id:hanaaaaaachiru:20210502162907p:plain — Add package from git URL

https://github.com/mob-sakai/UnmaskForUGUI.gitと入力をしてください。

f:id:hanaaaaaachiru:20210502162948p:plain — URLを打ち込む

f:id:hanaaaaaachiru:20210502163004p:plain — インストール後の様子

基本的な使い方

Unmaskコンポーネントが動作するには，UnmaskコンポーネントがアタッチされているGameObjectの親にMaskコンポーネントがアタッチされている必要があります。

── MaskコンポーネントがアタッチされたImage
   └── UnmaskコンポーネントがアタッチされたUI element (Image, RawImage, Text, etc...)
   └── その他UI element (Image, RawImage, Text, etc...)

まずはMaskコンポーネントがアタッチされたImageを作ります。アルファ値は0だと動作しないみたいなので注意してください。

f:id:hanaaaaaachiru:20210502174302p:plain — Maskコンポーネント

次にくり抜かれる側のUIを作ります。最初の画像でいう黒いUIの箇所ですね。

f:id:hanaaaaaachiru:20210502174551p:plain — くり抜かれる側のUI

最後にくりぬくUIを作ります。Unmaskというコンポーネントをアタッチすることで実現できます。

f:id:hanaaaaaachiru:20210502174738p:plain — くりぬく側のUI

ボタンを使った使い方

ボタンの箇所だけRayが通るようにしたいといった、マスクされていない箇所にRayを飛ばせるようにするにはUnmaskRaycastFilterコンポーネントを利用します。

Canvas
└─ Button
└─ Maskコンポーネント&UnmaskRaycastFilterコンポーネントがアタッチされたImage
   └── UnmaskコンポーネントがアタッチされたUI element (Image, RawImage, Text, etc...)
   └── その他UI element (Image, RawImage, Text, etc...)

Buttonはいつも通りのボタンです。