(:3[kanのメモ帳]

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

SpriteやImageでMaskを使う【Unity】【uGUI】


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

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


はじめに

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

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


f:id:kan_kikuchi:20170802074348g:plain


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





Image(uGUI)

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

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


f:id:kan_kikuchi:20170802074743j:plain


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


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

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


f:id:kan_kikuchi:20170802074827j:plain


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


f:id:kan_kikuchi:20170802074912j:plain


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


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





Sprite

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

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


f:id:kan_kikuchi:20170802080907j:plain


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


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

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


f:id:kan_kikuchi:20170802081408j:plain
f:id:kan_kikuchi:20170802081416j:plain


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


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

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


f:id:kan_kikuchi:20170802081804j:plain


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

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


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

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


f:id:kan_kikuchi:20170802083407g:plain