UI 3D-Systemを試す!【アセットアドカレ2018】
この記事はUnity アセット真夏のアドベントカレンダー 2018 Summer! の8日目(8/8)の記事です。
昨日(8/7)は青木ととさん(@lycoris102)による「Stain System」の紹介でした。オブジェクトにペイントできるんだって凄い!
明日(8/9)は@ShadeLurkさんです。
UI 3D-Systemについて
今回ご紹介する「UI 3D-System」、言葉より見てもらった方が早そうです。
要するに、左の状態をノンコーディングで右の状態にするシェーダー芸アセットです。
機能は大きく分けて2つです。
- Mask:3DオブジェクトやパーティクルをマスキングしてUIの枠内に収める
- Depth:3DオブジェクトやパーティクルとUIの位置関係(どっちが手前か)を制御
僕も初めて試すので今回は基本的な機能の紹介のみとなりますが、早速見ていきます!
Canvasとカメラのセットアップ
デモとしてこのようなシーンを用意しました。
図1
注意点として、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
これで下準備ができました!
Maskを設定しよう!
では、まずは背面のディスプレイにマスクを設定し、キャラクターがパネルの中にだけ表示されるようにしましょう。
対象のUI「Display」(uGUIのImageです)に「UI3D Depth object」をアタッチします。
「Rander mode」が「Just Depth」になっているはずですが、ここではDepthではなくMaskの機能を使うので「Culling Mask」に変更します。
ここまででは、まだ見た目は変わりません。
図3-1
次に、マスクの対象、ここではキャラクターのマテリアルのシェーダーを
- 全て「MODev/UI3D/Standard」に変更
- 「Use clipping mask?」のチェックをオン
すると…?
図3-2
おお!いきなり成功しました!下半身と銃身のディスプレイからはみ出ていた部分が消えましたね!
ここでキャラクターの質感が若干黒っぽくなりましたが、これはシェーダーを変えた副作用なのでこの手のシェーダー芸アセットではある程度は仕方ないです。
ただ、このシェーダーはUnityのStandardシェーダー同様ライティングも反映されるし(当然、ランタイムでマスクされた状態でライトを動かすこともできる!)、逆にライティングが邪魔ならUnlitタイプとか他にも色々な種類が同梱されているので、適切なものを選んで好みで調整するとよいでしょう。
また、キャラクターに方眼のようなものがかかって見えるのは、ディスプレイのテクスチャで方眼上に透明(アルファ)部分があり、それを反映する設定になっているためです。
これはこれで有効な場面もありそうですが、今回はディスプレイの「Alpha test treshold」(透明を反映させる閾値)を抑えて網目を消しておきます。
図3-3
Depthを設定しよう!
次に、下のボタンが隠れて見えないので、キャラクターの手前に表示させます。
まず、ディスプレイにアタッチしたのと同じ「UI3D Depth object」をボタンにもアタッチします。MaskもDepthも1つのコンポーネントで済むのは楽ですね。
今回はDepth機能を使うので、Render modeは「Just Depth」のままでOKです。
後は、ボタンのオブジェクトをCanvasから少し手前(Z軸のマイナス方向)に動かしてみてください。
図4
おおお!ボタンが手前に来ました。これは簡単!
なお気付いた方も多いと思いますが、CanvasがScreen Space - Cameraに設定されているので、実はこのようなアセットを使わなくても、ボタンを思いっきり前にずらしてカメラから見てキャラクターの手前までもってくれば同じことはできます。その意味で一見マスクほどのありがたみはないように思えますが、シーン内でUIが散逸しない(ほんのちょっとずらせばOK)なのは実作業上では有用そうです。あと多分まだ試していない機能もありそう。
パーティクルをMaskしよう!
最後に、炎のパーティクルをボタンでマスクし、ボタン内にだけ炎が燃え盛るようにします。もちろんボタンとしての機能はそのままなので、かなりインパクトの強いUIが作れそうです。
まず、先ほどボタンにアタッチした「UI3D Depth Object」の「Render mode」を、ディスプレイと同じように「Culling Mask」に切り替えます。
図5-1
先ほど手前に表示させたボタンが、奥に戻ってしまいました。ただしこれは、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
Good!炎がマスクされてボタンの中にだけ表示されました!これにて完成!
最後に、基本事項を表にまとめておきます。
まとめ
いかがでしたか?とりあえず基本機能の紹介でしたが、「UI 3D-System」を使うとインパクトの強いUI表現ができるのがお分かりいただけたと思います。
まだ試してない機能もありますが、今のところ個人的には以下のような感想です。
【良い点】
- 使うコンポーネントが少なくて覚えやすい
- レイヤーとかソート何とかの順序を気にしなくても奥行き表現ができる
- オブジェクトにもパーティクルにも使える
【気になる点】
- オブジェクト(パーティクル)もUIも専用のシェーダーに変えなければならないので、他の特殊なシェーダーを併用することができなかったり、見た目が変わったりする
より詳しい機能を知りたい人は、公式のYouTubeチャンネルにアクセスしてみてください。
また、パーティクルだけ使えればいいという人には、機能をパーティクルのみに限定して価格を抑えた「UI Particle System」もリリースされていますのでチェックしてみましょう。
今回は以上です。それではまたいつの日か!(←更新頻度低め)
※ 購入したくなった人はこちらからよろしくです!
※ その他今回のデモで使ったアセット