TATIKUNLOG.

主にゲーム作りについて書き留めるブログ。

SpriteMaskを活用して上から下の絵を出現させる【Unity】

はじめに

UnityのSprite Maskを活用すると画像を切り取れるので、それを活用して下から絵を出現させるメモです。

二枚の画像とマスク画像用意

f:id:tat1kun:20210505015245p:plain:h128f:id:tat1kun:20210505015250p:plain:h128f:id:tat1kun:20210505015355p:plain:h128

左から、上のレイヤーの画像下のレイヤーの画像マスク画像です。

マスク以外の画像はサクッと自分で用意したもの、マスクはUnityに標準で備わっていたものです。

とりあえず完成図は下図の感じになりました。

完成図

f:id:tat1kun:20210505015754p:plain

Unity上では3枚の画像を重ねてあります。注意するべき点として、SpriteMaskはゲームビュー上でも画像として表示されません。ただ、SpriteMaskにチェックすると下のように一応可視化されます。

f:id:tat1kun:20210505020642p:plainf:id:tat1kun:20210505020307p:plain

設定項目

f:id:tat1kun:20210505020909p:plain

上に重ねる画像の方のOrder in Layerを下に重ねる画像よりも大きくする

f:id:tat1kun:20210505021013p:plain

くり抜きたい(上に重ねる)画像のMask IntersectionをVisible Outside Maskに設定する

VisibleOutsideMaskはマスクの外側を描画する設定です。VisibleInsideMaskにすると、マスク内部だけ描画されるようになります。

マスクを増やして演出する

f:id:tat1kun:20210505021708p:plain

こういうくり抜き画像ってよくあるよな~って思いながら作ってました。

余談

f:id:tat1kun:20210505022543p:plain

マスクを増やしまくるとバッチ数が凄いことになるので、適度に使いましょう……