INDEX

Unity、UnmaskForUGUIで逆マスク

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


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

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

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

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

Tweet

0

0