(:3[kanのメモ帳]

個人ゲーム開発者kan.kikuchiのメモ的技術ブログ。月木更新でUnity関連がメイン。

(:3[kanのメモ帳]



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


このエントリーをはてなブックマークに追加


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


はじめに

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

f:id:kan_kikuchi:20200217192909g:plain


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


uGUIでマスク

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

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

f:id:kan_kikuchi:20170802074348g:plain


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

f:id:kan_kikuchi:20170802081416j:plain


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




そしてそのUnmaskForUGUにUnmaskRaycastFilterという

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

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


UnmaskRaycastFilter

まずUnmaskForUGUの導入ですが、



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

f:id:kan_kikuchi:20190728104823j:plain


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

f:id:kan_kikuchi:20190728110715j:plain
f:id:kan_kikuchi:20190728110722j:plain


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

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

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

f:id:kan_kikuchi:20200218044659j:plain


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

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

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

f:id:kan_kikuchi:20200218044707j:plain


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

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

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

f:id:kan_kikuchi:20200217191943j:plain


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

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

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

f:id:kan_kikuchi:20200218044721j:plain


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

f:id:kan_kikuchi:20200217192909g:plain



参考