D日記

モーションアーティストの技術ブログだよ。日常も書くよ。

MENU

【Unity】uGUIで逆マスクを使ってチュートリアルに使えそうなUIを作る【UnMask】

f:id:ponta565:20190801155636p:plain

皆さんUnityでゲームを作った時に、特定箇所のUI以外は触らせたくないって事ありませんか?
私はチュートリアル画面を作る時に必要でした。

普通に調べると、Maskコンポーネントが出てくるんですが、あれでは実現できません。
f:id:ponta565:20190310144101p:plain

完成図

f:id:ponta565:20190310144016p:plain

必要なスクリプトをDL

実はUnityの標準機能ではできないっぽいです。
かといってシェーダーで拡張するのも慣れていない人には大変!
そこで「UnmaskForUGUI」という神UI拡張機能を利用させていただきます!
github.com

Download ZIP より
f:id:ponta565:20190310144755p:plain

zipファイル内の下記2つのファイルを、Assetsフォルダ以下にコピペしましょう。
f:id:ponta565:20190310144957p:plain

作っていこう

最終的な階層はこんな感じ
f:id:ponta565:20190310154240p:plain

Mask には、Maskコンポーネントを追加。Maskコンポーネントは必須っぽいです。
f:id:ponta565:20190310154443p:plain

Image_UnMask には、Unmaskコンポーネントを追加。位置・サイズを指定。
f:id:ponta565:20190310155053p:plain

Image_Black は少し説明します。
①Image_Unmaskと同階層のヒエラルキー下側にいるオブジェクトが逆マスクされます。なので、マスクオブジェクトを動かしても暗い部分は動かないです(重要)
②Raycast Target はTrue。Falseだと暗い部分にあるUIを触れてしまいます。
③Unmask Raycast Filter。ここ重要。UnmaskコンポーネントをD&Dすることで、その領域内のUIだけを触れるようになります。
f:id:ponta565:20190310155651p:plain

完成です!

f:id:ponta565:20190310160440g:plain

あとは、逆マスク領域の位置・大きさをチュートリアル中に変更できる仕組みを作ればいいですね!