この記事ではUnityを使って「迷路のような複数の部屋」を作成します。壁や天井の作り方や通路の作り方を学ぶことで、個室や複数の部屋を使ったVR空間が作れるようになります。
サンプル
STYLY GALLERYからサンプル空間を体験できます。
https://gallery.styly.cc/kotaonaga/e18e1ce4-9d96-11e9-b34d-4783bb2170d0
記事で紹介しているUnityプロジェクトのダウンロードはこちらからできます。
https://github.com/styly-dev/STYLY-Unity-Examples
紙に書いて設計をする
位置座標を何度も使うので紙に書いておくと楽です。このように軽くでいいので書いておきます。
()内の数値は各オブジェクトのPositionを表しています。

紙の設計図
床と壁と天井を作る
STYLYのFloorやUnityのPlaneを90度回転させて壁を作ってしまうとVR空間では壁が透けて見えてしまいます。
そこでUnityで立方体を引き伸ばして壁を作ります。
床をつくる
部屋を構成するオブジェクトをまとめておくと便利なのでCreate Emptyで「room」を作ります。
Positionは(0, 0, 0)にしてください。

Create Emptyでroomを作る
そして床を作ります。
Creat>3D Object>Planeをクリックします。
Scaleは(1,1,1)とします。名前は「floor」にしてください。

床を作る
壁をつくる
次に壁を作ります。Creat>3D Object>Cubeをクリックします。

壁を作る
名前を「left」として、Scaleは(1,10,10)とします。壁ができました。この壁を移動していきます。
Positionを(5,5,0)にします。

leftのインスペクターの数値
その後leftを複製(Duplicate)して、名前を「right」としてPositionを(-5,5,0)にします。

leftを複製
左右の壁ができました。

左右の壁の完成形
この後は前後の壁を作ります。左右の壁と同様に
Creat>3D Object>Cubeをクリックします。名前を「front」とします。
Positionを(0, 5, 5)、Scaleを(11, 10, 1)とします。

frontのインスペクターの数値
その後このfrontを複製して、名前を「back」とします。Positionを(0, 5, -5)とします。これで四方の壁は完成です。

四方の壁の完成形
天井をつくる
最後に天井を作ります。Creat>3D Object>Cubeをクリックします。名前は「ceiling」としてください。しっかりとroomの中に作るようにします。

roomの中にCubeを作る
Positionは(0, 10, 0)です。
Scaleは(11,1,11)とします。
これで天井ができて、立方体の密室が完成しました。

roomの完成形
ここまでで作ったfloor、right、left、front、backやceilingが画像のようにroomに入っているか確認してください。

roomの構成
通路側の壁を作る
次は通路側の壁を作っていきます。
通路が伸びる壁は通路用に一部穴が空いている必要があります。
一部穴の空いたこちらの画像のような壁を、3つの立方体を組み合わせて作成していきます。

通路側の壁完成形
Creat Emptyを使ってグループを作ります。名前は「exit」としてください。この時exitのPositionが(0, 0, 0)になっていることを確認してください。
先ほど作ったfrontの位置にこの壁を置くので、frontを削除してください。

frontの削除
Creat>3D Object>Cubeで立方体を3つ作成して名前をそれぞれ「exit-right」、「exit-left」「exit-top」とします。これらは全てExitの中に入れてください。
exit-rightのPositionを(5, 5, -3)、Scaleを(1, 10, 4)とします。
exit-leftのPositionを(5, 5, -3)、Scaleを(1, 10, 4)とします。
exit-topのPositionを(5, 7, 0)、Scaleを(1, 6, 10)とします。
これで通路側の壁が完成しました。
exitの中が画像のようになっているか確認してください。

exitの構成確認
作った部屋を複製して2部屋目にする
先ほど作った部屋を複製します。座標は(20,0,0)とします。名前は「room2」としてください。
そしてRotationを(0, 180, 0)として部屋全体を180度回転させて、穴の空いた壁が向かい合うようにします。

2部屋完成形
これで部屋が2つできました。
通路を作る
部屋が2つできたので、それらを繋ぐ通路を作っていきます。
Create Emptyで「road」を作成します。
Positionを(0, 0, 0)にしてください。
今作ったroadの中にCreate>3D Object>Planeで通路の床を作成します。このオブジェクトの名前を「road-floor」とします。
Unityで作ったオブジェクトは座標がオブジェクト中心になります。よってroad-floorのPositonを2部屋の中心の座標である(10, 0, 0)にします。
穴の空いた壁分の横幅にしたいのでScaleを(1,1,0.2)にします。
これで通路の床ができました。

通路の床を作る
今度は通路の壁と天井を作っていきます。
まずは壁です。Create>3D Object>CubeをクリックしてCubeを2つ作成します。その後Positionを(10, 2, 1.5)、Scaleを(10, 4, 1)とします。
反対側の壁はroad-leftを複製してPositionを(10, 2, -1.5)に変えるだけです。
次に天井を作ります。Creat>3D Object>Cubeをクリックします。その後Positionを(10, 4.5, 0)、Scaleを(10, 1, 4)とします。
これで通路が完成し、通路で繋がった2部屋分の空間ができました。

通路完成形
部屋と通路を複製する
部屋を複製する
roomを複製してたくさんの部屋を作っていきます。今回はroom6まで作ってみます。

room6まで作成
room2からroom6までが(0, 0, 0)に重なっているので、冒頭の設計図を参考にしてPositionの値を入れ込んでいきます。

紙の設計図
例えばroom3は(20, 0, 20)といった具合です。するとこのような形になります。

6つの立方体
通路を複製する
これら6つの部屋を通路で繋いでいきます。roadを4つ複製します。

road複製
縦向きの通路はそのまま使えるのでPositionのみを変更します。Positionの値は設計図を参照してください。例えばroom3とroom4の間の通路のPositionは(10, 0, 20)です。

縦向きの通路
横向きの通路はroadを90度回転させてから使います。road4とroad5のPositionとRotationはそれぞれ次の画像を参照してください。こちらも設計図通りです。

road4のインスペクターの数値

road5のインスペクターの数値
これで各部屋が繋がりました。
通路と部屋が繋がっているのに、壁が閉じている部分があるので次はそれらを修正していきます。

横向き通路を入れた
閉じている壁を修正する
roomのfrontやbackにあたる部分は先ほど作ったexitが使えるのでそのまま複製してつかっていきます。
しかし、rightやleftにあたる部分はScaleが異なるので穴が空いた壁もexitとは異なったものを作る必要があります。
ここではrightやleftの代わりに使う用の穴の空いた壁を作っていきたいと思います。
Create Emptyから「side-exit」を作成します。Positionは(0, 0, 0)にしてください。
side-exitの中にCreate>3D Object>Cubeから「side-exit-right」「side-exit-left」「side-exit-top」を作成します。
side-exit-rightはPosition(-3.25, 5, -5)、Scale(4.5, 10, 1)
side-exit-leftはPosition(3.25, 5, -5)、Scale(4.5, 10, 1)
side-exit-topはPosition(0, 7, -5)、Scale(11, 6, 1)
で作成します。これでside-exitが完成です。
このside-exitをroom3のright、room5のleftと入れ替えます。
side-exitをroom3、room5の配下にそれぞれ置いてあげるだけで入れ替えが完了します。
また、それぞれroom3ではCreate>3D Object>Cubeでfrontを作成(Position(5, 5, 0)、Scale(1, 10, 10))し、rightを削除。room5はleftを削除してください。

room3

room5
これで6部屋の空間が完成しました。
STYLYにアップロードする際に、room6部屋とroad5つを1つずつアップロードするのは大変なので、Create Emptyで「maze-boxes」を作り、maze-boxesの中にroom6部屋とroad5つをまとめておくと便利です。
このときmaze-boxesのPositionが(0, 0, 0)になっているか確認してください。
STYLYへのアップロード
STYLYへアップロードしてみましょう。UnityからSTYLYにアセットをアップロードする方法はこちらです。
STYLY上でオブジェクトを置いてみる
アップロードした部屋にSTYLY上でアセットを置いてみましょう。
Unity上の座標とSTYLY上の座標はリンクしているので、それを利用します。
例えばUnity上の(20, 0, 0)の位置はSTYLY上でも(20, 0, 0)の位置です。
これを利用してオブジェクトを各部屋に簡単に配置していくことができます。
試しにroom2にオブジェクトを置いてみましょう。
STYLY上でオブジェクトを置いた後、すぐに数値入力で位置を変更します。この場合は(20, 0, 0)です。
するとオブジェクトが2部屋目に移動しました。部屋は密室で外から見えず、このままだとオブジェクトの移動が不便なので、ショートカットキーのFを使ってオブジェクトがある場所に移動します。こうすることで各部屋のオブジェクトを簡単に操作することができます。

STYLY上での移動
いかがだったでしょうか。
今回は6部屋だけでしたが、部屋と通路を複製して増やしたり、通路を長くすることで様々なタイプの建物を作ることができます。
Unity上で複製すると座標をいじるだけで手間もかからず簡単なので、この記事を参考にぜひ迷宮や家など様々な空間を作ってみてください。