uGUIの画像(Image)の内側を逆マスクで切り抜いて、一部分だけ押せるようにする【Unity】【uGUI】

この記事でのバージョン
Unity 2018.4.13f1

今回は以下のような、任意の一部分だけ押せるようなUIを実装する方法の紹介です！

チュートリアル等で押せる場所を限定したい場合に使えると思います。

まず、UnityはSpriteRendererでもuGUIのImageでも、画像一部分だけを表示する

いわゆるマスクを簡単に実装する事出来ます。

ただ、画像の内側を切り抜いて表示する(逆マスク)は、uGUIのImageでは出来ません。

そこで、uGUIもで逆マスクが行えるUnmaskForUGUというアセット(?)を以前紹介しました。

そしてそのUnmaskForUGUにUnmaskRaycastFilterという

逆マスクした部分だけタップ出来るようにするコンポーネントがあったので、

今回はこれを使って、任意の一部分だけ押せるようなUIを実装していきたいと思います。

まずUnmaskForUGUの導入ですが、

これはGitHubからダウンロードしてきて、

UnmaskForUGUIというディレクトリをProjectにドラック＆ドロップするだけ。

次に本題の任意の一部分だけ押せるようなUIの実装ですが、

Maskの子に切り抜きたい形であるUnMaskと

切り抜く対象である(今回は半透明の黒背景BlackBack)を配置します。

これだけだと分かりにくいと思うので、一つずつ解説していきます。

まずMaskはImageと一緒にAddした後、ImageのRaycast Targetのチェックを外し、

WidthとHeightで黒背景以上のサイズを指定します。

次にUnMaskもImageと一緒にAddした後、ImageのRaycast Targetのチェックを外し、

WidthとHeightで切り抜きたいサイズを設定します。

なお、Imageに画像を設定する事でその形にくり抜く事も可能です。

最後にBlackBackもやはりImageをAddしますが、Raycast Targetのチェックを付けて、

WidthとHeightで全体を覆うようなサイズを設定します。

さらにUnmaskRaycastFilterもAddし、そこに先ほど作成したUnMaskをドラック＆ドロップします。

これでBlackBackの部分は基本的に触れないが、UnMaskの部分だけは触られるUIの完成です。

(:3[kanのメモ帳]