VRカーショップのショールームを作ろう！

はじめに

前回は、アセットのインポートとUE4のエンジン設定を行いました。これでVRコンテンツを開発する準備が整ったので、本格的にメイキングを始めます。今回は、本連載のメインコンテンツであるVRカーショップのショールームを作成してみます。初心者の方にも分かりやすいように画像を使って説明しますので、ひとつずつ進めていきましょう。

床を作ってみよう

それでは、前回でインポートした「SuperGrid Starter pack」を使ってマップを作っていきます。まだインポートができていない場合は、前回の解説を参考にインポートしておきましょう。

まず「MotionControllerMap」を開き、アウトライナから以下を除く全てのものを削除してください（図1）。アウトライナで選択して「Delete」ボタンを押せば削除できます。

図1：「MotionControllerMap」初期画面

◆削除しないもの
・Lightingフォルダ及びそのフォルダ以下にあるもの
・SkySphereBluePrint
・VRPawn

削除後のアウトライナは図2の状態になるはずです。

図2：「MotionControllerMap」不要オブジェクト削除後

次に、コンテンツ/SuperGrid/Source/Meshesにある「SuperGridBox」をドラッグ＆ドロップで追加し、トランスフォームを図3のとおり設定してください（トランスフォームはオブジェクトの位置、倍率、角度、可動性に関する設定項目です。エディタ上でオブジェクトを動かすことでも変更できますが、まずは数値を入力して設定してみましょう）。

これで床が作成できました。

図3：床作成後のイメージ

移動範囲を設定しよう

床は作成できましたが、まだ移動はできません。移動するには、画面左にある「モードタブ」から「NavMeshBoundsVolume」を配置する必要があります。

「NavMeshBoundsVolume」は移動関連の制御を行うときに使用する機能です。なお、「NavMeshBoundsVolume」が設定されていない場所には移動できないので、移動させたくない場所がある場合は「NavMeshBoundsVolume」を設定しないことで移動範囲を制限することもできます。

検索ボックスに“Nav”と入力すると「NavMeshBoundsVolume」が表示されるので、ドラッグ＆ドロップでレベルに追加しましょう。

図4：「NavMeshBoundsVolume」検索

追加できたら、トランスフォームを図5の通りに設定してビルドすれば「NavMeshBoundsVolume」の設定は完了です。これで床の上を移動できるようになるはずです。

図5：「NavMeshBoundsVolume」の設定イメージ

柱を作ってみよう

床ができたので、続いて柱を立ててみましょう。「CG空間に柱はいらないのでは？」と思われるかもしれませんが、細かい点までしっかり作りこむことがVRの現実感を高めることにつながります。

図6：柱の作成イメージ

先ほどと同様に、コンテンツ/SuperGrid/Source/Meshesにある「SuperGridSylinderFull」をドラッグ＆ドロップで追加し、トランスフォームを図6の通りに設定します。[Alt]キーを押しながらエディタ上の“→”をドラッグすると「SuperGridSylinderFull」を複製して移動できるので、「SuperGridSylinderFull」を床の四隅に配置してください。

[Ctrl]キー、または[Shift]キーを押しながら選択すると複数選択できるので、四隅へ配置した「SuperGridSylinderFull」を全て選択し、図7の通りにトランスフォーム/拡大・縮小を設定してください。

図7：柱の複製イメージ

これで柱も完成しました。

屋根を作ってみよう

次は屋根を作りましょう。屋根は床を複製して高さを調節するだけで簡単に完成してしまうので、今回は天窓付きの屋根を作ってみます。

まず床を複製し、トランスフォーム/位置/Zを図8の通りに設定してください。

図8：屋根の作成イメージ

続けて、屋根の面積を小さくします。トランスフォームを図9の通りに設定してください。

図9：屋根編集イメージ①

さらに屋根を複製して、トランスフォームを図10の通りに設定します。

図10：屋根の編集イメージ#9313;

さらにもう1つ屋根を複製して、トランスフォームを図11の通りに設定してください。ここが天窓になります。

図11：屋根の編集イメージ#9314;

最後に複製した屋根を選択して、詳細のMaterialsにコンテンツ/SuperGrid/StarterPack/Source/Materials/Palette以下にある「M_SuperGrid_Holo_Color」を適応してください（ドラッグ＆ドロップもしくはプルダウンメニューから選択することで適応できます）。

図12：屋根の編集イメージ#9315;

これで屋根も完成しました。完成イメージは図13のとおりです。このような状態になりましたか？

図13：屋根完成イメージ

UE4では、Materialsに各種マテリアルを適応することでオブジェクトの見た目を簡単に変更できます。マテリアルそのものを編集する機能も備えているので、自分で簡単にマテリアルの質感や色をカスタムできます（マテリアルの編集については、次回で紹介する予定です）。

壁を作ってみよう

最後に壁を作ります。ここまではオブジェクトのトランスフォームパラメーターを直接編集しましたが、壁作りではエディタ上から位置を調節する方法を試してみましょう。

エディタ上でオブジェクトを選択し、オブジェクトの周りに出現する赤、青、緑のつまみをドラッグすることで、それぞれ移動（図14）、回転（図15）、拡大・縮小（図16）ができます。モードはオブジェクトを選択した状態で右上のモードパネルをクリックするか、ショートカットキーを押すことでも変更可能です。

図14：オブジェクト位置調整モード

図15：オブジェクト角度調整モード

図16：オブジェクト倍率調整モード

少し操作を練習してみましょう。まずは屋根か床を複製して、トランスフォームを図17の通りに設定してください。

図17：壁作成イメージ

先ほど作った壁をさらに複製して、トランスフォームが図18のようになるまで矢印をドラッグして移動させます。

図18：壁複製イメージ①

次に、壁2枚を選択（[Ctrl]キーを押しながら両方をクリック）して回転モードに変更し、[Alt]キーを押しながら回転させてください、作成された複製が回転するはずです。

図19：壁複製イメージ#9313;

図20のように90°回転させ位置調整モードで壁の位置を大まかに調整してください。

図20：壁複製イメージ#9314;

大まかな位置の調節ができたので、複数選択を解除して微調整をしていきましょう。2つの壁のトランスフォームがそれぞれ図21、図22のような状態になるように、位置調整モードで壁の位置を調整してください。

図21：壁設定イメージ①

図22：壁設定イメージ#9313;

これで、ショールームが完成しました（図23）！

図23：ショールーム完成イメージ

早速、VRプレビューで見てみましょう。透明な天井から光が差し込む、ハイセンスなショールームになっているはずです（図24）。

図24：ショールームVRプレビュー

ブループリントで処理を作ってみよう

UE4で処理を実装するには、ブループリントとC++の2通りの方法があります。ブループリントは視覚的に分かりやすいビジュアルスクリプトスタイルの開発言語で、ノードを繋ぐだけで処理を作ることができます。

このような開発言語はUnityでC#の開発に慣れている方や本職のプログラマーの方から見ると自由度が低そうにも見えるかもしれませんが、非常に多様なノードが用意されていることに加え、変数、インターフェイス、構造体なども自由に定義できるため、殆どの場合はブループリントで十分対応できます（特殊な処理を実装する必要がある場合はC++でブループリントを拡張することで対応できます）。

まずはブループリント入門として、簡単なブループリントで処理を作成してみましょう。画面上部の「ブループリント」の右にある「▼」をクリックしてメニューを開き、「レベルブループリントを開く」を選択してください（図25）。

図25：レベルブループリントを開く

レベルブループリントの編集画面が開くので、画面上で右クリックしてノードの選択画面を呼び出し、検索ボックスに“BeginPlay”と入力します。「イベント BeginPlay」という項目が表示されるので（図26）、クリックして「BeginPlay」ノードを配置してください（図27）。

図26：「BeginPlay」ノードの配置①

図27：「BeginPlay」ノードの配置②

「BeginPlay」は、ブループリントがフィールド上に呼ばれたとき初めに1度だけ呼ばれるノードです。ブループリントが初めからフィールド上にある場合はプレイの開始時に、途中でスポーンした場合はスポーンした瞬間に呼ばれます。今回編集している「レベルブループリント」はこのレベル自体に付いているブループリントなので、このレベルをスタートした瞬間に1度だけ呼ばれます。

「BeginPlay」ノードの右にある矢印にマウスを合わせてドラッグすると線が引けるので、適当な位置までドラッグしてください。ノードの選択画面で検索ボックスに“String”と入力すると表示される「Print String」という項目をクリックして（図28）、「Print String」ノードを配置します（図29）。「in String」という項目に‟HelloBluePrint”と入力してください（ここに入力された文字列が出力されます）。

図28：ノードを繋げる

図29：「PrintString」ノード

次に、左上の「コンパイル」ボタンをクリックしてコンパイルを実行します。これでブループリントの編集は完了です。レベルを起動すると「BeginPlay」→「Print String」の順番で処理が流れ、画面に文字列が出力されるはずです。

それでは、早速動作を確認してみましょう。今回は文字列の出力を確認するだけなので、VRモードではなくシミュレートモードで実行してみます（図30）。

図30：シミュレートモードで実行

図31：文字列出力確認

今回は、VR空間上にショールームを作り、ブループリントで処理が作成するところまで解説しました。皆さんも少しずつUE4の操作に慣れてきたのではないでしょうか。

次回は、今回作成したショールームに車や光源を配置し、オブジェクトにブループリントを付けて処理を作成していきます。お楽しみに！