もうすぐ ARFoundation を使った ARアプリ「Always with Merlion」と言うタイトルをリリースします。（宣伝を兼ねた記事になっていますが。）
そこのタイトルシーンはマリーナベイサンズをバックにマーライオンがふわふわ浮遊するもの。これは Unity Canvas の Render Mode を駆使しています。
前回に引き続き、この実例を基に Canvas の Render Mode の使い方を説明いたします。
【使用しているCanvas】
今回 Canvasを使っているのは、横から見た Sceneビューで右上にある超巨大なタイトルUIと、その左のマリーナベイサンズの背景UIとなります。
以下の Canvas_FrontがタイトルUIで、Canvas_Back が背景UIです。それぞれの Canvasの Render Mode が違うので別々に作成してます。それぞれ、：「Screen Space - Overlay」と「Screen Space – Camera」を使用してます。
【タイトルUI：Screen Space - Overlay】
まず、常に一番前に表示するタイトルUIについて。こちらは常に前面表示をするため、UIで一番よく利用される「Screen Space - Overlay」を使用しています。
ご存知の通り、この Render Modeの UIを Unityエディタの Scene上でみると、他のゲームオブジェクトとは完全に違う大きさで表示されます。よって、上にあった Sceneビューを横から見た画像では、超巨大な UIの一部が少し表示されているだけになります。
これだと、ゲームシーン内にオブジェクトがどれだけ前にいようが、その前にUIが来ます。要は画面に張り付いている UIのイメージとなります。
もちろん Rect Transformで stretchを使用可能なので、デバイスの画面に応じて UIを伸び縮みさせることができます。
Screen Space - Overlay 自体のより詳細は以下をご参考下さい。
【背景UI：Screen Space – Camera】
次に、３Dモデルの後ろにくる背景UIです。ここでは「Screen Space – Camera」を使ってます。
この Render Modeだと、Render Cameraを指定して３D空間上のカメラからの距離を Plane Distanceで指定できます。
よって、３Dモデルの後ろに表示場所を指定ができます。（事前に Render Camera（対象となるカメラ）を指定する必要があります。）
そして、こちらも UIとして Rect Transformで stretchを使用可能です。
こちらも より詳細は以下をご覧下さい。
【「World Space」に関して】
また、上記の背景UIを３Dモデルの後ろに Canvasを置くには Render Modeの「World Space」でも可能です。そしてUIオブジェクト自体の Rect Transformでの stretchは使用可能です。
しかし、Canvas自体の大きさが固定になってしまいます。そのため指定した Canvasの大きさを基に自動で UIオブジェクトは伸び縮みしますが、実質 デバイスの画面のサイズを基に自動で UIオブジェクトが伸び縮みするわけではありません。
以上、初心者の方々に向けた Unity Canvasの Render Modeを実際に使用した例の説明でした。
Sponsored Link
E-Mail: 