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

ハドソン
こんにちは、ハドソンです!!

 

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

 

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

 

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

今回の内容は

今回の内容
・自分の部屋を作成する
・高層タワーの一番上に自分の部屋を設置する
・昇降用エレベーターを作成する
・YouTubeが見られるモニターを設置する

となっております。

 

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

環境は以下の通り。

環境とか
Unity version: 2018.4.20.f1 (現VRChat指定環境)
SDK : VRCSDK2(VRCSDK3を使うと、VRC_triggerが使用できない為)
SweetHome3D version: 6.4.2
PC OS : Windows 10 Pro
※MACでの開発については未検証ですのでご了承ください。

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

SweetHome3Dとは

マルコ
皆さんSweet Home 3D というPCソフトをご存知でしょうか。
SweetHome3Dは、簡単に家の3Dモデリングが出来る無料ソフトです。

 

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

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

 

最上階の作成

 

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

 

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

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

 

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

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

 

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

 

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

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

 

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

必要な階層
・1階フロア
・1階と最上階との間のフロア
・エレベーター

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

 

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

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

 

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

1階部分

 

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

 

エレベーター

ハドソン
よし、できたのでUnityに持っていきます

SweetHome3DからUnityへ

 

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

SweetHome3Dの画面上から、3Dビュー>obj形式でエクスポート を選択し、
該当のフォルダ内に保存して下さい。

 

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

 

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

 

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

 

スポンサーリンク

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

Hierarchyにobjを投げ込む

 

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

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

 

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

 

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

 

地面はいらない

 

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

 

サイズを合わせる

 

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

 

また、エレベーターに関しては他の階の円筒の中にすっぽり収まるようにxとzを0.009としました。高さは0.01のままでOKですね。

マルコ
こんな感じですっぽりはまります。

 

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

 

エレベーターの床や天井がなかったので、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階と最上階の間を移動するだけの箱を作ればよい、
と単純に思っていましたが...

ハドソン
あれ...?エレベーターがないときにエレベーターに乗ろうとしたらやばくない...?
ということは、扉を設置して、ボタンを押したら扉が開いて、移動中は扉を閉めておいて、
移動後に移動先の扉を△#▼〇?@....

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

 

エレベーターの仕組み
・昇降のスイッチはエレベーター内にのみ設置し、
1階にある時はUPボタン、最上階にあるときはDOWNボタンのみを表示させる。移動中はボタンの色を変更する。(緑→赤)
・1階と最上階のエレベーター入り口部分には扉(といってもただの壁)をつくる。
・エレベーターが1階にある時は1階扉:開、最上階:閉、最上階にある時は1階扉:閉、最上階:開、エレベーターが移動中の時は、両方閉じているものとする。
・動作は次のようになる。1階にエレベーターがあるとき、
エレベーターに乗る→UPボタン押す→1階扉が閉まる→ボタンが押せなくなり、色変更→最上階へ移動→ボタンがDOWNボタンになる→最上階扉が開く
降りる際はこの逆になる。

マルコ
あれ?複数人で最上階にいて、一人だけ1階に下りた場合、エレベーターをどうやってよび戻すんですか?

ハドソン
あ...。
その場合はバルコニーからとびお

エレベータの扉作成

 

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

 

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

初期状態では、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のスイッチを非アクティブにします。

 

UPのスイッチを非アクティブにするのは最後にします。でないと、動作が途中で止まってしまうからです。

 

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

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

 

VRCChairは必要か

 

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

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

 

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

 

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

ハドソン
...のはずだったんですけどね

 

動作検証

 

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階に設置したモニターがこれ。椅子にも座れるのでくつろげますね。

 

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

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

 

最後に

 

ハドソン

本当はもっと豪華なフロア&外見とかもきれいにしたかったですね。やってると永遠に記事が書けない気がして妥協しちゃいました。このあと更にいじりたいとおもいます。

他のものも、また近いうちに何か作りたいと思います。

 

マルコ
当サイトでは家庭用VR Oculus Go/Questについて日々研究中です!! VRの選び方、おすすめソフト、快適な使い方などなど、情報満載です!! VRに触れたことない初めての方もイチから教えるので大丈夫ですよ!!こちらからどうぞ!!

ハドソン
よかったらTwitterをFollowしてお友達になりませんか?
Oculus とか VR について知ってる情報も発信します!!

 

スポンサーリンク