Unity、UnmaskForUGUIで逆マスク

関連ページ 参考URL Unityで例えば四角の画像を丸の中に収めたい場合、uGUI標準のMaskを使うと画像のアウトラインを丸型に切り抜くことができます。
これの逆で、画像の外側でなく内側を切り抜きたい場合、という機能を使います。
このページではを使って実装していきますが、 こちらのページ では自作シェーダーによる実装も解説しています。
お好きな方をどうぞ。 下は通常のマスク機能と逆マスク機能の比較例。


逆マスクは、通常マスクとかなり実装の仕方に違いがあって癖があります。自分は毎回忘れてしまう。
下の方で詳しく解説していきます。 逆マスクはUnity公式ではサポートしていません。なので有志の方が作ったをインポートする必要があります。
サイトを開いたら、「」のボタンからgitのURLをクリップボードにコピーします。
次にUnityの上部メニューからを開きます。
左上の＋ボタンから「」を選択。

次にクリップボードにコピーしたURLを張り付け、右のボタンを押します。
これでUnmaskがパッケージ管理できるようになりました。

逆マスクを実装した結果表示される全ての画像を、MaskコンポーネントをアタッチしたGameObjectの子要素にする必要があります。
下の画像の例で言えば、切り抜かれるUnity仮面の画像、切り抜きに使う丸い画像、切り抜いた先の背景画像を全てMaskの子要素にします。

各GameObjectのコンポーネントのアタッチ状況は次の通りです。
Unmaskコンポーネントをアタッチする必要があるのは、丸い画像のみ。
ポイントとしては、切り抜く画像の方が、切り抜かれる画像よりHierarchyでは上に配置する必要があります。

Tweet

0

0