もうすぐ ARFoundation を使った ARアプリ「Always with Merlion」と言うタイトルをリリースします。
そこのタイトルシーン。以下のようなマリーナベイサンズをバックにし、実際はマーライオンが浮遊して動きまくります。
ここに使った Unity の Canvas の設定法。Canvas の Render Mode を駆使して表現しています。
今回は特にまだ開発経験がないような初心者の方々向けに、この実例を基に Canvasの Render Modeの使い方を説明しようと思います。
【３つのRender Modeの違い】
実際、このタイトルシーンを作るうえで久々に参考にしたのが、数年前に自分で書いた以下の記事です。
ブログを書き始めた初期のころの記事ですが、いまだに多くの方に参考頂いてるようですが、自分でも参考にしました。
この上記記事では Render Modeの３パターンの違いを分かりやすく説明していますので、そもそもそれらの違いはなんだろうと言う方はまずぜひご覧ください。
自分で言うのもなんですが、上記記事はかなり分かりやすいです。下のようにカメラを２つ前後に設置し、その間に UIやゲームオブジェクトを配置して各Render Modeでどのように映るかを比べてます。
Main Camera－青の柱―Canvas（Text－Image）－緑の柱―黄の柱―Sub Camera
初心者の方が Render Modeを理解するのにとても良いと思います。
【今回の実例】
以下のようなタイトルシーンです。前面にタイトルネームが、その後ろに２体のマーライオン、そして一番後ろにマリーナベイサンズがそびえたっています。
ここでは静止画になっていて分かりませんが、真ん中のマーライオンは３Dモデルになっており、Scriptで動いています。
そして、それを Sceneビューで横から見ると以下の様になります。
一番左にまず Main Cameraがあります。そのカメラの前にマーライオンの３Dモデルが見えます。そしてその後ろにUIとしの背景。そしてこの画像だと一番右側で超巨大になっているのがタイトルのUIです。
今回の仕様としては、３Dモデルには回転して３６０°見えるような動きもつけたかったので静止画ではなく３Dモデル自体を直接使っています。
また、UIには画面サイズが異なる多くの Android機、iOS機を対象にするために、Rect Transformで stretchを使い自動でUIのサイズを変える必要がありました。そのため、例えば背景の絵はUIでなくても実現できますが、UIとして自動で伸び縮みするようにしています。
Sponsored Link
E-Mail: 