(:3[kanのメモ帳]

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

(:3[kanのメモ帳]


本ブログの運営者kan.kikuchiが個人で開発したゲームです!


uGUIの画像(Image)の内側を切り抜いて(逆マスクで)表示【Unity】【uGUI】


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


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


はじめに

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

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


f:id:kan_kikuchi:20170802074348g:plain


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

f:id:kan_kikuchi:20170802081416j:plain


ということで今回は、uGUIのImageで逆マスクを実装する方法の紹介です。

f:id:kan_kikuchi:20190728113617g:plain


なお、記事中の画像は以下のアセットを使っております。

2D Medieval Fantasy Character Pack | 2D Characters | Unity Asset Store


UnmaskForUGUI

今回はuGUIで逆マスクを実装するのに、UnmaskForUGUというアセット(?)を使います。



導入はGitHubからダウンロードしてきて、

f:id:kan_kikuchi:20190728104823j:plain


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

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


次に使い方ですが、

まずマスクをしたいImageの親にImageとMaskを設置します。

f:id:kan_kikuchi:20190728112527j:plain


この時、Maskのサイズが子のImageより小さいと、外側が一部映らなくなるので注意が必要です。

f:id:kan_kikuchi:20190728112535j:plain


その後、Maskの下にImageとUnmaskを配置します。

すると、対象のImage(例だとCharacter)の内側が

Unmaskに合わせて切り抜いて表示されるようになります。

f:id:kan_kikuchi:20190728112714j:plain


もちろん、Unmaskの画像を変えると、それに合わせて切り取る形も変わります。

f:id:kan_kikuchi:20190728112724j:plain


また、Only For Childrenを有効にする事で子に配置したものだけを逆マスクの対象にする事も出来ます。

f:id:kan_kikuchi:20190728113053j:plain


なお、Unmaskより全面に表示されるものだけ逆マスク処理がされます。

(下の例だと、CharacterBackは逆マスク処理されない)

f:id:kan_kikuchi:20190728112944j:plain


ちなみに、ImageだけでなくTextやTextMeshProにUnmaskを付ける事もできます。

(というよりMaskableGraphicを継承してるクラス?)

f:id:kan_kikuchi:20190731135900j:plain



------------追記------------

UnmaskForUGUのUnmaskRaycastFilterを使えば

チュートリアル等で押せる場所を限定したい時に使える、一部だけ押せるUIを作れたりもします。

f:id:kan_kikuchi:20200217192909g:plain


------------追記おわり------------