きっポグ

- kitposition's weblog -

UI 3D-Systemを試す!【アセットアドカレ2018】

この記事はUnity アセット真夏のアドベントカレンダー 2018 Summer! の8日目(8/8)の記事です。

昨日(8/7)は青木ととさん(@lycoris102)による「Stain System」の紹介でした。オブジェクトにペイントできるんだって凄い!
明日(8/9)は@ShadeLurkさんです。

UI 3D-Systemについて

今回ご紹介するUI 3D-System、言葉より見てもらった方が早そうです。
要するに、左の状態をノンコーディングで右の状態にするシェーダー芸アセットです。

f:id:kitposition:20180808134339g:plain

機能は大きく分けて2つです。

  • Mask:3DオブジェクトやパーティクルをマスキングしてUIの枠内に収める
  • Depth:3DオブジェクトやパーティクルとUIの位置関係(どっちが手前か)を制御

 僕も初めて試すので今回は基本的な機能の紹介のみとなりますが、早速見ていきます!

 Canvasとカメラのセットアップ

デモとしてこのようなシーンを用意しました。

図1

f:id:kitposition:20180808135931p:plain

注意点として、UIのCanvasのRender Modeは以下のいずれかでなければなりません。

  • Screen Space - Camera 
    (UIは2D表示されるがシーン内各オブジェクトとカメラとの位置関係を反映)
  • World Space
    (UIも他のオブジェクトと同様に3D空間内に表示)

Canvasを作るとデフォルトでは

  • Screen Space - Overlay
    (カメラとは無関係にUIをとにかく最前面に表示)

になっているので前述のどちらかに変更し、Render Cameraに描画に使うカメラを設定してください(まあ普通はMain Camera)。
今回のはScreen Space - Cameraにしてあるので、図1のように空間内の位置関係を反映して、UIの手前にパーティクル、その手前にキャラクターが表示されていますね。

Main CameraのProjectionは今回Orthographicにしてありますが、PerspectiveでもOKです。

まずは、Canvasに「UI3D Canvas」をアタッチします。
パラメーターのMask layerが、マスク用のレイヤーになります(使う上では大して気にすることはない)。ここでは新しく「Mask」というレイヤーを作って設定しました。選んだレイヤーはカメラの描画対象から外す必要があるようで、Main Cameraの「Culling Mask」で除外しておきます。

図2

f:id:kitposition:20180808145553p:plain

これで下準備ができました!

Maskを設定しよう!

では、まずは背面のディスプレイにマスクを設定し、キャラクターがパネルの中にだけ表示されるようにしましょう。

対象のUI「Display」(uGUIのImageです)に「UI3D Depth object」をアタッチします。

Rander modeJust Depthになっているはずですが、ここではDepthではなくMaskの機能を使うのでCulling Maskに変更します。

ここまででは、まだ見た目は変わりません。

図3-1

f:id:kitposition:20180808153140p:plain

次に、マスクの対象、ここではキャラクターのマテリアルのシェーダーを

  • 全てMODev/UI3D/Standardに変更
  • Use clipping mask?のチェックをオン

すると…?

図3-2

f:id:kitposition:20180808154718p:plain

おお!いきなり成功しました!下半身と銃身のディスプレイからはみ出ていた部分が消えましたね!

ここでキャラクターの質感が若干黒っぽくなりましたが、これはシェーダーを変えた副作用なのでこの手のシェーダー芸アセットではある程度は仕方ないです。
ただ、このシェーダーはUnityのStandardシェーダー同様ライティングも反映されるし(当然、ランタイムでマスクされた状態でライトを動かすこともできる!)、逆にライティングが邪魔ならUnlitタイプとか他にも色々な種類が同梱されているので、適切なものを選んで好みで調整するとよいでしょう。

また、キャラクターに方眼のようなものがかかって見えるのは、ディスプレイのテクスチャで方眼上に透明(アルファ)部分があり、それを反映する設定になっているためです。
これはこれで有効な場面もありそうですが、今回はディスプレイのAlpha test treshold(透明を反映させる閾値)を抑えて網目を消しておきます。

図3-3

f:id:kitposition:20180808160818p:plain

Depthを設定しよう!

次に、下のボタンが隠れて見えないので、キャラクターの手前に表示させます。

まず、ディスプレイにアタッチしたのと同じUI3D Depth objectをボタンにもアタッチします。MaskもDepthも1つのコンポーネントで済むのは楽ですね。
今回はDepth機能を使うので、Render modeは「Just DepthのままでOKです。

後は、ボタンのオブジェクトをCanvasから少し手前(Z軸のマイナス方向)に動かしてみてください。

図4

f:id:kitposition:20180808165207p:plain

おおお!ボタンが手前に来ました。これは簡単!

なお気付いた方も多いと思いますが、CanvasがScreen Space - Cameraに設定されているので、実はこのようなアセットを使わなくても、ボタンを思いっきり前にずらしてカメラから見てキャラクターの手前までもってくれば同じことはできます。その意味で一見マスクほどのありがたみはないように思えますが、シーン内でUIが散逸しない(ほんのちょっとずらせばOK)なのは実作業上では有用そうです。あと多分まだ試していない機能もありそう。

パーティクルをMaskしよう!

最後に、炎のパーティクルをボタンでマスクし、ボタン内にだけ炎が燃え盛るようにします。もちろんボタンとしての機能はそのままなので、かなりインパクトの強いUIが作れそうです。

まず、先ほどボタンにアタッチしたUI3D Depth Object」の「Render mode」を、ディスプレイと同じように「Culling Mask」に切り替えます。

図5-1

f:id:kitposition:20180808171721p:plain

先ほど手前に表示させたボタンが、奥に戻ってしまいました。ただしこれは、Depthが無効になった訳ではなく「ボタンもディスプレイと同様にキャラクターをマスク対象として認識したため、ボタンの枠内にキャラクターを表示させてしまった」状態です。

これを防ぐ、つまりマスクの対象を選別するには、同じUI3D Depth ObjectのCulling mask value(layer)を利用します。

デフォルトでは「255」が設定されています。さっきキャラクターに設定したマテリアルにもClipping mask(なぜ微妙に名前が違うんだろう?)というパラメーターがあり、そちらもデフォルトでは「255」で一致しているので、キャラクターがマスク対象となった訳です。

ここでは、ボタンのCulling mask valueを別の値(例えば100)に設定すると、キャラクターはマスキング対象と見なされなくなり、再びボタンが手前に戻ります。

そのうえで、パーティクルのマテリアルのシェーダーをMODev/UI3D/Particle」(パーティクル用)に変更し、

  • Use clipping mask?のチェックをオン
  • Clipping maskをボタンに設定したのと同じ「100」に設定

すると…?

図5-2

f:id:kitposition:20180808173516p:plain

Good!炎がマスクされてボタンの中にだけ表示されました!これにて完成!

最後に、基本事項を表にまとめておきます。

f:id:kitposition:20180808185443p:plain

まとめ

f:id:kitposition:20180808193104p:plain

いかがでしたか?とりあえず基本機能の紹介でしたが、UI 3D-Systemを使うとインパクトの強いUI表現ができるのがお分かりいただけたと思います。

まだ試してない機能もありますが、今のところ個人的には以下のような感想です。

【良い点】

  • 使うコンポーネントが少なくて覚えやすい
  • レイヤーとかソート何とかの順序を気にしなくても奥行き表現ができる
  • オブジェクトにもパーティクルにも使える

【気になる点】

  • オブジェクト(パーティクル)もUIも専用のシェーダーに変えなければならないので、他の特殊なシェーダーを併用することができなかったり、見た目が変わったりする

より詳しい機能を知りたい人は、公式のYouTubeチャンネルにアクセスしてみてください。

www.youtube.com

また、パーティクルだけ使えればいいという人には、機能をパーティクルのみに限定して価格を抑えた「UI Particle Systemもリリースされていますのでチェックしてみましょう。

今回は以上です。それではまたいつの日か!(←更新頻度低め)

※ 購入したくなった人はこちらからよろしくです!

 

※ その他今回のデモで使ったアセット