読者です 読者をやめる 読者になる 読者になる

テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

【Unity】パフォーマンスが良いらしいUIのマスク、RectMask2Dについて

Maskと異なり四角形でしか切り抜けませんが、Maskよりかなり高速に動作するRectMask2Dが何時ごろか追加されました。

f:id:tsubaki_t1:20151108201257g:plain

このRectMask2DはRectTransformの範囲で切り抜きを行うためMaskで必要だった「画像」を必要としませんが、その代わり高速で動作するみたいです。
具体的にはMaskはUI AlphaClipでマスクを作成・ステンシルに登録して切り抜き的な事をやっていますが、RectMask2Dではコレが無くなります。

目次

 MaskとRectMask2Dの比較

これはリストにマスクを行う等、多くのマスクを使用した場合に顕著に出ます。例えば下のような「キャラクターをくり抜いた画像を複数置いた」場合、RectMask2DとMaskではSetPass数に顕著な差が出ます。

f:id:tsubaki_t1:20151109032320j:plain

参考までにFrameDebuggerでドローコールを確認します。上がMaskを使用した場合、下がRectMask2Dを使用した場合です。普通にマスクすると9ドローコール(9SetPass)、RectMask2dだと3ドローコール(1SetPass)で描画が完了します。

f:id:tsubaki_t1:20151108211040j:plain

f:id:tsubaki_t1:20151108211049j:plain

f:id:tsubaki_t1:20151108211103j:plain

f:id:tsubaki_t1:20151108211112j:plain

またMaskと異なりステンシルバッファに書き込まずに切り抜きを行うみたいです。

使い方

マスクしたいUI要素の親オブジェクトにRectMask2Dコンポーネントをアタッチします。

例えば上記のような内容であれば、以下のような操作で設定出来ます。
Canvasの下にUI Imageを配置します。

f:id:tsubaki_t1:20151108202006j:plain

Canvasの下に空のオブジェクト(Mask)を作成し、RectMask2Dをアタッチします。

f:id:tsubaki_t1:20151108202104j:plain

f:id:tsubaki_t1:20151108202127j:plain

Maskの子オブジェクトとしてImageを配置します。

f:id:tsubaki_t1:20151108202212j:plain

もし背景が必要な場合、Hierarchyビュー的にMaskより上にImageを配置します。

f:id:tsubaki_t1:20151108202351j:plain

これでMaskの子オブジェクトのImageを動かしても、表示範囲がマスクされます。

 

ちなみにCanvasに直で設定してもOKです。「UIのはみ出し」対策としてのマスクなら、これで十分かもしれません。

f:id:tsubaki_t1:20151108202543j:plain

補足

なお”マスクの回転”には対応していません。

f:id:tsubaki_t1:20151108202743j:plain

また、バッチングはマスクでまとめた単位で行います。なので特に通常のMaskを使用した要素を大量に配置した場合、バッチングが効かずSetPassも大量発行されるためとても遅くなるかもしれません。(RectMask2Dはパス切り替えが発生しないため、それほど問題にならないかもしれません)

例えば下のように「2つのMaskの下にバッチング可能な4つのUIを配置した」場合、各マスクでバッチ処理が行われるため、マスク数=ドローコール数となります。

f:id:tsubaki_t1:20151108205930j:plain

関連

docs.unity3d.com

tsubakit1.hateblo.jp