【VRChat×Unity×SweetHome3D】絶景!高層タワー&最上階の部屋をつくる

今回のテーマはVRChatワールドで使える "高層タワー&最上階の部屋" をつくる!!

皆さん、自分の理想の生活って想像できますか...?
私の夢は、海が見えるリゾートマンションの最上階でのんびり暮らすことです。

そんならUnityで作ってみようじゃないか!! ということで、

今回の内容は

となっております。

ちなみに内容はそれほど難しくありませんし、ツールや素材も無料のもののみ使っております。

環境は以下の通り。

【SweetHome3D】タワーのパーツを作成する

SweetHome3Dとは

ということで、まずSweetHome3Dを使って自分の理想の部屋を作成します。
使い方はそれほど難しくありませんし、今回は使い方までは載せません。

下に参考サイトを載せておきます。面白いです。

最上階の作成

さて、まずは最上階の部屋についてですが、こんな感じで作成しました。数十分あれば簡単にできてしまいます。

真ん中に円筒形のスペースがあると思いますが、ここはエレベーターが入る予定のスペースとなっています。

（ちなみに、自分は「部屋のど真ん中」に「円形のエレベーター」を作っていますが、後から作業がやりづらかったので正直おすすめしません...。）

あとは、自分の好きなように家具を配置すればOKですね。

ソファの向かいの壁には、後でモニターを設置しようと思います。

部屋以外に作成が必要なもの

今回は高層タワーを作る予定です。先ほど作成した部屋を最上階としますが、

当然、それより下の階層部分が必要ですよね。

なので、SweetHome3Dの段階で以下のオブジェクトも作成します。

これらは1つずつ別のファイルとして保存します。

最上階をコピーして作っていきます。

1階と最上階との間のフロアについては全部作るわけにはいかないので、今回は1フロアを上下にびよーんと伸ばしてごまかします。（基本、1階と最上階以外は入れません。）

作成した各オブジェクトが次の写真です。

1階部分

1階と最上階の間。正直ここは、ただの筒でいい。

エレベーター

SweetHome3DからUnityへ

わかりやすいように階ごとにフォルダを準備。

フォルダの中には、このようにマテリアルやjpg画像が入ります。

Unityに持っていくときは、Assetのなかにフォルダごと、ぽいっとドラッグ&ドロップします。 objだけ投げ込んでしまうと、建物や家具のマテリアルが反映されなかったりするので、
必ずフォルダごと入れましょう。

これで、Unity内で使うことができます。

Unity内でのオブジェクトの設定

Hierarchyにobjを投げ込む

HierarchyタブにAssetからobjファイルを投げ込むことでオブジェクトが使えます。
すべてのobjファイルをsceneに登場させます。

タワー全体の設計は次のようになります。

(なんでタワーの後ろから撮ったんだろ)

真ん中部分はもっとながーくする予定。

地面はいらない

床があれば地面(ground)は必要ないので、地面(ground)はチェックを外して非活性にしておきます。

サイズを合わせる

持ってきたオブジェクトはそのままでは大きいので、スケールを0.01倍します。
その後にVRC_chairを置いてみて、大きさを調整。自分は0.01倍でほぼぴったりきました。

エレベーターの床と天井の作成

エレベーターの床や天井がなかったので、Cyrinderオブジェクトを作ってエレベータの床と天井を作ります。こんなかんじですねー。Cylinderにもともと付いているColliderは誤作動の原因となるので消しました。

(※余談。天井らしきものはもともとあったらしい、ということに後から気づきました。SweetHome3Dでは中から外が見えないように、自動的に天井らしきもの(というか外界とを分かつ仕切りのようなもの)が付くみたいです。ですが、外から中は見えています。)

RigidbodyとColliderの設定

今回のようにSweetHome3DのオブジェクトをUnityに持ってきた場合に
オブジェクト1つ1つにRigidBodyやコライダーをコンポーネントとして設定する必要があります。

壁、床、必要に応じて家具など1つ1つに設定する必要があります。
(HierarchyタブでCtrlを押しながら選択すると複数選択、shiftで一括選択できます。)

そうしないと、床や壁がすり抜けます。

RigidBodyを設定する際には、家具などが動かないように、
できるだけIs Kinematicのチェックを入れます。
また、入り口など通過したい場所にはRigidBodyは必要ありません。

エレベーターに関しては動かす必要があるので、Is Kinematicにチェックを入れません。また、Use Gravityのチェックも外しておきます。

コライダーに関してはMeshコライダーでもBoxコライダーでも何でもよいですが、
Meshコライダーを使いすぎると処理が重たくなってしまうので、
Meshコライダーは必要最小限にとどめます。床(room)、地面(ground)と壁(wall)くらいですかね。

エレベーターの作成

次に、エレベーターの動作を作成します。
VRC_Triggerコンポーネントを使って実装していきます。

動かし方

最初に考えていたこととしては、ボタンを押したら1階と最上階の間を移動するだけの箱を作ればよい、
と単純に思っていましたが...

と考えすぎて頭がおかしくなったので、シンプルに次のような仕組みとしました。

エレベータの扉作成

扉といってもただの壁ですが、とにかく扉を作成します。
見栄えはともかく、入り口を封鎖することができました。
（SweetHome3Dの段階できれいな扉を作っておいたほうがいいかも）

1階と最上階の両方を作成し、

VRC_Triggerの実装

いよいよギミックを実装していきたいと思います。
最初は1階の扉が開いていて、エレベーターも1階にある状態ですね。

Hierarchyでいうとelevatorの下にSwitch_UPというスイッチを作成し、

このSwitch_UPに対して、VRC_triggerコンポーネントを追加します。

今回設定したアクションは以下の図のようになります。

写真のように「OnInteract」により、2つの連続アクションが起きるように設定しています。

上のアクション群はすぐに発火、下のアクション群は10秒後に発火します。

まずは、上の連続アクションでエレベーターが上の階に向かって動きます。
このとき1階の扉を閉めておかないと、次にエレベーターが下りてきたときに誰かがぺしゃんこになる可能性があるので、1階扉をアクティブにして封鎖しておきます。

さらに、エレベーターが動作していることが分かりやすいように、スイッチの色を赤色に変えておきます。

その後、エレベーターに速度を与えます。今回は5m/sとしました。

さて、このままではエレベーターは動き続けてしまいますので、止める仕組みを作っておきましょう。
それが、写真の下のアクション群ですね。

「Delay in Seconds」の項目で「何秒後にアクションが開始になるか」を設定することができます。
今回は10秒としましたので、エレベーターが到達する最上階の高さは5m/s×10秒 = 50m と決まります。

ちなみに、私の作ったモデルでは壁が2.5mの高さだったので21階です。

SetVelocityで速度をゼロに設定し、
スイッチの色を緑に戻し、
DOWNのスイッチをアクティブにし、UPのスイッチを非アクティブにします。

これで、エレベーターで上昇する仕組みが完成しました。

ちなみに下降する仕組みは、この逆をたどるだけです。（雑）

VRCChairは必要か

ちなみに以前に飛行船を作成したときに、
乗り物を作るときは、VRC_Chairを設置しないと安定しないという話だったのですが、

今回のエレベーターのように密封されたハコで移動すれば、
プレイヤーはどこにも行き場がないので、ちゃんと目的地にたどりつきます。

とはいえ、ほんとは椅子置いた方がいいのかもしれませんが。

いまのままでも上昇の時は床からの力を受けてスムーズに上へ進みますし、
下降のときには天井に頭をぶつける形になっていますが(え、最終的には1階にたどりつくはずです。

動作検証

１階の50m上空に最上階を設置し、エレベーターの動作を検証....

いざ上昇!!

すると、驚くほどぴったりと最上階に到達しました!!

さて、1階に戻ろう....しかし、ここでトラブル発生。

なんとエレベーターのみが床をすり抜けて下へ...自分は取り残されてしまいました。

※RigidBodyのColligionDetectionがDiscreteの場合

まともな人ならここで、
「いや、そもそもエレベーターの範囲は最上階の床消しとけよ!!」と突っ込むのでしょうね。

おっしゃる通りです。

そのことには途中から気づいていたのですが、今回はエレベーターを円形としていたことで
SweetHome3Dの段階で床に円形の空洞を作るのが面倒で放置していました...。

ということで、今回はUnity上で最上階の床のRIgidBodyとコライダを取っ払い、透明な床を敷きなおしました。

タワーを海が見える場所に設置

以前の飛行船つくった記事のときにTerrainToolKitを使って作った地形。

これを再利用しまーす。

YouTubeが見られるモニターの設置

TouTubeが見られるモニターの設置

ここでは自立さんという方のiwaSyncVideo_v2.1というプレハブを使わせていただきます。

上記のgitからダウンロード
→UnityのAssetに投げ込む
→iwaSyncVideo_v2.1(たぶんver2.2ではなくて2.1の方で良さそう)を部屋に設置&EventSystemをHierarchyに入れる

これでVRChat内で誰でもURLを入力して動画再生できるようになります。めちゃ便利ですね。

(観たい動画のURLをあらかじめ設定するには、たぶん以下のところを設定すればよいと思うのですが、私の場合音声がうまく設定できなかったので...たぶん何かわかってないんだとおもいます。
SyncVideoStreamオブジェクトのVRC_Sync VideoStreamコンポーネントとiwaSyncVideo_v2.1オブジェクトのVideoPlayerコンポ―ネントに見たいYouTube動画の共有リンクを設定..?)

ソファにVRCChairを設置

せっかくなのでモニター前のソファを座れるように加工しておきます。
ソファのRigidVody及びコライダを消去して、同じ位置にVRC_Chairを置きます。

これで、見た目はソファのVRC_Chairができました。

完成!!

完成しました!! 全体を見てみましょう!!

写真はUnity上をキャプチャしたものですが、まず今回タワーを設置した外観はこんな感じです。写真の真ん中ちょい左にある縦長のやつがタワーです。

今回はSkyboxを夕焼けにしてみたので、それだけで見栄えいいですね笑

1階。今思えばエレベーター内の色をかえたい。

エレベーターで上へ。スイッチもちゃんと動作していますね。

ちなみに上昇中はこんな感じです。スイッチは赤くなります。

「いや、入り口に扉ないんかい!!」といわれそうですが、

昇っているときの速さを感じられるので割と好き

2階に設置したモニターがこれ。椅子にも座れるのでくつろげますね。

バルコニーからのながめはこれ。ちなみに右側に黒く映ってるやつはさっきからいってるこないだ作った飛行船。

うん。これが作りたかったものだ。あってる。

最後に