たましこ流VRChatのワールドの作り方

#参考
[UnityのUの字もわからないレベルから始めるVRChatのワールド作り(基本編)](https://qiita.com/tamsco274/items/f8fb52eafe012a40e76f)
[UnityのUの字もわからないレベルから始めるVRChatのワールド作り(応用編)](https://qiita.com/tamsco274/items/dfb66e8770b6ed65d025)

#大まかな流れ
●MagicaVoxelでワールドのチップセットを作る
●Blenderでモデルの要らない部分を削除する
●Blenderでモデルを並べる
●Unityにもっていく
●Unityでライトや当たり判定を調整する
●アップロードする


#使用ソフトウェア
###MagicaVoxel
四角いブロックを並べて3Dモデリングをするためのソフトです。
Minecraftみたいな感覚ですね。

[ダウンロードはこちら](https://ephtracy.github.io/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/b7a485e9-0d03-08b7-36c1-0ca36c5d204c.png)

###Blender
作ったモデルを並べるために使用します。Unity上だけでもできますがBlenderの方が軽く、最終的な負荷を減らせます。
[ダウンロードはこちら](https://www.blender.org/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/4ec24271-cb9c-859e-566d-fc2c36e194b1.png)

###Unity 2017.4.15f1
VChatにアップロードするために必要ですね。
ワールドのエフェクトやライトはUnityで調整します。


#MagicaVoxelでチップセットを作る
MagicaVoxelを使ってチップセットを作っていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/84b2d674-457f-35bb-a7e7-d35b8aac5d8c.png)
注意点は、
<b>「サイズを正方形で統一すること」
「パレットのパターンを統一すること」
「並べて違和感ないものにすること」
</b>です。

##サイズをキリのいい正方形で統一すること
サイズを統一しないと、BlenderやUnity上で配置する際に整数で配置できません。
モデルの中心点がずれるからです。Blender上で直せますがMagicaVoxelでやった方が楽なので。
私はいつも120x120x120でやっています。たぶん100xでやると滅茶苦茶楽。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/656a3c44-0d41-e955-a7bb-bad53e90c6dd.png)

##パレットのパターンを統一すること
Unity上に持っていったときに<b>全てのオブジェクトのマテリアルを統一できます。</b>つまりマテリアル数1のワールドができます。
左下のメニューからパレット情報のセーブ/ロードが出来ます。
私は<b>パレットの色を継ぎ足しつつ、全てのオブジェクトが完成したら最後に作ったモデルのパレットを他のモデルでロードします。</b>

何言ってるかわからない？僕も何言ってるかわからない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/98585dc2-46be-87b6-8e4e-49dae9637b51.png)

##並べて違和感ないものにすること
両端がキレイにくっつくように作りましょう。左右非対称だとこのように並べた時に変になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/b0361b1e-f97a-f17e-c686-28e1e7a5cec8.png)

##Zfight
Zfightって聞いたことあります？モデルの面が同じ座標上に存在していることが原因でチラつく現象です。
壁になるモデルの端っ子の上下左右の数字が同じ場合に発生します。(説明が難しい)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/c4e4f234-4593-9f41-432e-8a230bf72e8b.png)

対策としては、画像の様に1マス浮き出させる等です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/cc109570-27ee-43d5-05a4-95589d6d82f8.png)

##出力する
チップセットが出来ました。完成したら、全てのモデルをエクスポートします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/d92f0781-abdc-ea17-c1b4-60495d8429d6.png)

<b>出力する時はobj形式でエクスポートしてください。</b>右下にあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/e61cd17c-318f-7157-cb66-5888b9d300ee.png)


#Blenderでモデルの要らない部分を削除する
要するに<b>裏側</b>です。この壁の場合、<b>側面と裏面が見えることはない</b>ので、側面と裏面を消します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/12fd68cc-12a8-ba92-ab08-cc273742b976.png)
モデルを選択した状態で編集モードに変更(Tabキー)し、選択モードを選びます。お好みですが、真ん中の辺を選択するモードが個人的に楽です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/da1c4f3d-a689-b39d-bc28-31b1a5474a7f.png)

Zキーを二度押してモデルを灰色にします。すると辺が見やすくなるのでいらない辺を削除します。
選択する時はCキーの選択モードが便利かもしれません。
選択したら、Xキーを押して削除します。選択→削除→選択→削除を繰り返します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/610cd0a1-6817-374b-77c5-197dde1f5730.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/d422d3d1-fc08-c3e3-6644-bbf5d046516d.png)

張りぼてになりました。張りぼてを並べるのでこれで大丈夫です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/b2dcc3be-5f0a-7538-ae45-a14e33057f4c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/3c8bbbc2-9854-84c7-34e4-a6860cf274a9.png)

#Blenderでモデルを並べる
モデルを並べていきます。この時、ドア等<b>動くものやすり抜けるもの</b>は設置しないでください。
要らない部分を削除したモデルをコピペで増やしながら並べます
Ctrlキーを押しながら操作でグリッド移動します。
あるいは画像の部分にあるタブを出現(+アイコンを押す)させてトランスフォームに値を直打ちしてもいいですね。
<b>なんかずれたな？と思ったときはここのトランスフォームを見てください。数字がずれていたら矯正してください。</b>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/d210cffe-ecc1-22af-be5f-062336227063.png)
並べました。これから屋根で覆っていきます。
覆う前にZFightが発生してないか確認しておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/5bb702f2-93e1-355f-972c-537c568b7475.png)

##出力する
ワールドが完成したらエクスポートしましょう。FBXでもObjでも大丈夫です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/f5016230-3c63-509f-f89a-dfaaf050536e.png)
カメラとランプはOffにしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/dd6d6c2c-dc6d-eb00-2b2c-8371ff0c9725.png)

#Unityに持っていく
##新しいプロジェクトの作成/SDKのインポート
まずはUnityで、新しいプロジェクトを作ります。
ついでにVRCSDKをインポートしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/94b8ae3f-7154-45ba-1ac6-09d56b5ba583.png)

##モデルをインポートする
作成したワールドをインポートします。
マテリアルは<b>一番最後に作ったモデルの.pngファイル</b>だけインポートします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/e482463e-141c-c046-9421-ccf7a935b210.png)

インポートしたら、マテリアルを出力しましょう。
<b>Use External Materials(Legacy)になってるか確認しましょう。</b>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/40c1c84e-bf98-8c36-dcbb-4484e311971b.png)

マテリアルが一個しかついていませんね。これで大丈夫です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/ed83e839-b21e-0a60-d660-e93ef45cdeb6.png)

##モデルを配置してマテリアルを適用する
Sceneタブに作ったワールドのモデルを配置し、座標を{0,0,0}に合わせましょう。Inspectorタブ上部のTransformに直打ちしましょう。
その後、<b>Hierarchy上の作ったモデルに色が付いたマテリアルをドラッグ&ドロップ</b>しましょう。
うまく適用されているのを確認したら他のマテリアルは消しても問題ないです。
ドア等、<b>動いたり通り抜けられるものも置いておきましょう。</b>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/4a910c91-aaf5-515f-06ac-3eea6310f56e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/82a147a6-9a3b-1e3d-cc8e-7de84441f887.png)

#Unityでライトや当たり判定を付与する
##当たり判定を付与する
<b>メッシュコライダーでいいです。</b>Boxが望ましいけど手間なので。あとボクセルは四角いのでそこまで大きな負荷にはなりません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/c9078dc0-6547-45bb-cea5-3be426ee480f.png)

##ライトを設定する
お好みです。ベイクもしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/801f9389-3831-9553-fc3c-3836c60b5f64.png)

#アップロードする
##VRCWorldを調整する
ジャンプできるようにしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/f8a64b1b-8193-7f7d-5682-81f6f42458cb.png)

##アップロードする
アップロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/06701bc2-c8e9-c8c6-8220-59f2511373de.png)
ワールドネームと説明を入力した後に下から二番目のチェックボックスにチェック。
一番下のチェックボックスにチェックを入れると「Community Labs」にアップロードされます。
ワールドをパブリック化する場合はここにチェックを入れるといいでしょう。
また、Sceneに戻り、「VRCCam」を操作してワールドのサムネイルを変更するのもいいでしょう。
あらかた準備が出来たら右側のアップロードを押してアップロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399875/1ea9c69f-1081-1f21-6206-db1a3252d533.png)