(:3[kanのメモ帳]

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

(:3[kanのメモ帳]


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

    

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


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


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


はじめに

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

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


f:id:kan_kikuchi:20170802074348g:plain


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

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

f:id:kan_kikuchi:20210601164630j:plain




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


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

2D Fantasy Art Assets Full Pack | 2D Textures & Materials | Unity Asset Store



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の方がパフォーマンスが良いらしいです。



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

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

f:id:kan_kikuchi:20190728113617g:plain




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