はなちるのマイノート

Unityをメインとした技術ブログ。自分らしくまったりやっていきたいと思いますー!

【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
f:id:hanaaaaaachiru:20210502174020p:plain
できるもの

ボタンを使った使い方

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

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

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

f:id:hanaaaaaachiru:20210502181711p:plain
くりぬくButton

次にMaskコンポーネントをアタッチしたImageUnmaskRaycastFilterをアタッチします。

f:id:hanaaaaaachiru:20210502181941p:plain
UnmaskRaycastFilterをアタッチ

UnmaskRaycastFilterコンポーネントのTarget UnmaskにはRayを透過するUIを指定します。

最後にUnmaskがアタッチされたUI elementを作成すれば完成です。

f:id:hanaaaaaachiru:20210502182250p:plain
Unmask作成
f:id:hanaaaaaachiru:20210502182644p:plain
できるもの

またUnmaskコンポーネントにはFit TargetFit On Late Updateというプロパティがあると思いますが,ここにButtonを指定すると,自動的にButtonの大きさに合わせてくれます。(アニメーションしても大丈夫)

f:id:hanaaaaaachiru:20210502182440p:plain
ButtonにFitさせる

さいごに

詳しいことはGitHubに書かれているdescriptionをみるのが一番です。

github.com

ではまた。