SpriteやImageでMaskを使って画像を任意の形に切り抜いて表示する【Unity】【uGUI】

この記事でのバージョン
Unity 2017.1.0f3

今回はタイトル通り、SpriteやImageでMaskを使ってみようという記事です。

ここで言うMaskとは画像を任意の形に切り抜いて表示するような処理の事です。

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

公式機能より綺麗に切り抜けるアセット(?)もあります

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

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

まず、uGUIでMaskを使う方法ですが、

Image(例だとCharacter)の親にMaskを配置するだけです。

こうする事でMaskについているImage(例だとbackground_2)の形に切り抜く事が出来ます。

また、MaskのShow Mask Graphicのチェックを外せば、

Mask用の画像を表示しないという事も可能です。

なお、矩形に切り取りたいだけであれば、RectMask2Dを使うという方法もあります。

RectMask2DにはImageは必要なく、WidthとHeightで切り取る範囲を指定します。

ちなみにMaskよりRectMask2Dの方がパフォーマンスが良いらしいです。

また、uGUIでは内側を切り抜く逆マスクがデフォルトでは出来ないので、

もし、実装したい場合は以下の記事を参考の事。

次にSpriteでMaskを使う方法ですが、

Sprite Maskを配置し、Mask用の画像をSpriteに設定した後、

MaskしたいSpriteのMask InteractionをNone以外にするだけです。

Visible Inside Mask にするとMaskの内側を切り取り、

Visible Outside Mask にするとMaskの外側を切り取ます。

この時、uGUIの場合とは違い、MaskとSpriteを親子関係にする必要はありません。

また、Sprite MaskのCustomRangeにチェックを入れると

Maskをかける対象をレイヤーで指定する事ができます。

上記の例だと、SortingLayerがDefaultで、

Order in Layerが2~10(Backの1は含まないがFrontの10は含む)にあるSpriteだけをMaskします。

さらにSprite MaskのAlpha Cutoffを調整する事で、

Maskの範囲(どれだけ透明部分を含めるか)を調整する事ができます。

(:3[kanのメモ帳]