Hiromuブログ

最近はこちら(https://zenn.dev/hiromu)が本体

MRTKでUnityUIのマスク機能を使う際の注意点

Unity UI のスクロール機能を使う場合、スクロール領域からはみ出た部分はマスクし非表示にしますが、MRTK を利用する際は注意が必要となります。

結論

  • 深度バッファーのフォーマットを 24bit にする(MRTK では 16bit が推奨されている)
  • または、Mask の代わりに RectMask2D を利用する

以降で、順を追って確認していきます。

確認環境

  • Unity 2019.2.21f1
  • MRTK v2.4.0

作業内容

  • Unityのプロジェクトを新規作成し、MRTK(v2.4.0)をインポートする

  • メニューの [Mixed Reality Toolkit] > [Add to Scene and Configure...] を選択する

  • Canvas を配置する

  • Canvas の位置・サイズを任意の値に調整する(以下は例) f:id:HiromuKato:20200604020133p:plain

  • Canvas のインスペクターにある「Convert to MRTK Canvas」ボタンを押す
    f:id:HiromuKato:20200604020215p:plain

  • 以下のようにRender Mode が World Space になり、Canvas Utility コンポーネントが追加されている。また、Add NearInteractionTouchableUnityUI ボタンがあるので押す
    f:id:HiromuKato:20200604020230p:plain

  • すると、Near Interaction Touchable Unity UI コンポーネントが追加される
    f:id:HiromuKato:20200604020243p:plain

  • NearInteractionTouchableUnityUI の Events To Receive を Pointer に変更する
    f:id:HiromuKato:20200604020257p:plain

  • Canvas に Scroll View を配置する
    f:id:HiromuKato:20200604020309p:plain

  • Scroll View > Viewport > Content に Text を配置する(Textにはスクロールが確認できるように任意の文字列をいれる)

  • Text の Rect Transform のAnchor Presets は、stretch/stretch を選択する(Shift + Alt を押すと表示される中の一番右下の項目)
    f:id:HiromuKato:20200604020323g:plain

  • ここで MRTK で推奨されている XR Settings の Depth Format を 16-bit depth でビルドをする
    f:id:HiromuKato:20200604020341p:plain

  • UnityEditor上では問題なく見えていたが、実機では以下のようにMaskが正しく機能していない(16-bit depthの場合ステンシルバッファーが作成されないことが原因)
    f:id:HiromuKato:20200604020352j:plain

  • Depth Format を 24-bit depth に変更することで正しく表示される
    f:id:HiromuKato:20200604020404j:plain

  • Depth Format を 16-bit depth のままとする場合には、Mask の代わりに RectMask2D を使うことで同様の結果を得ることができる
    f:id:HiromuKato:20200604020416p:plain

参考

Unity UI でニアインタラクションをおこなうための設定(特にUnity UIの部分)

マスク機能を使う場合の注意点