UnityのProBuilderでレベルデザインする

<img src="http://megamin.jp/wp-content/uploads/2018/03/medama_20180305_0230.png" />

# ProBuilder面白いです

　前回の記事<a href="https://qiita.com/medamap/items/5f4f2218a5ce5c711c5d" target="_blank">「UnityのProBuilder初体験（とりあえず形状作成まで）」</a>では <a href="https://assetstore.unity.com/packages/tools/modeling/probuilder-111418" target="_blank">ProBuilder</a>を導入して作成可能な形状についての紹介でした。今回はいきなりですが <a href="https://www.vrchat.net/" target="_blank">VRChat</a> のワールドを作ってみたいと思います。具体的には、イシターの復活のワールドを作ってみます。著作権的にアレなので、作っても非公開とします。えぇ。でもゼビウスのワールドとか作っている人とか普通にいそうよね。とか言ってみる。

# プロジェクト作成部分は省略

　<a href="https://qiita.com/medamap/items/5f4f2218a5ce5c711c5d" target="_blank">前回記事</a>でプロジェクトを作成して ProBuilder をインポートしてるところまで進めてる前提で話を勧めます。

# まずは、イシターのマップを把握

　でもその前に、イシターの復活とはなんぞや？ という簡単な説明を。イシターの復活はドルアーガの塔の続編にあたり、ギルがドルアーガを倒し、恋人カイを救い出した後、２人でドルアーガの塔から脱出するゲームとなります。階層はドルアーガの塔時代は６０階だったのに帰りは何故か１２８階と倍以上に増えてます。きっとドルアーガの魔力で改築されてたのが元に戻ったんでしょうね。

で、各フロアはマップの上下左右が繋がった無限スクロール構造になっていて、VRChat で表現する際には無限スクロールのあるステージはちょっと無理なので、上下左右が閉じたマップが良い事になります。というわけで、最初のステージである TOP OF THE TOWER をやってみようと思います。

せっかくだから、カイのアバターも作ってみたいなぁ。でもこれは怒られそうだから我慢しよう。

<img alt='' class='alignnone size-full wp-image-2376 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2ded75def.png' />

　マップとしてはこんな感じです、横３２ブロック、縦１６ブロックですね。イシターの復活はトップビューなようで実は斜め視点のクォータービューなので、実際には薄水色の部分は深緑の壁部分と同一座標になります。そして、後はテクスチャ素材ですね。

<img alt='' class='alignnone size-full wp-image-2377 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2dfd7c251.png' />

　テクスチャ素材はこれを使います。「みく☆ふぁいと」開発時に<a href="https://twitter.com/uniuniH" target="_blank">かなり縁さん</a>が描いてくれた背景用テクスチャ画像です。さすが 2D ドット絵氏だけあってクオリティバッチリですね。

# じゃぁ、まずはマテリアル作ろうか

<img alt='' class='alignnone size-full wp-image-2378 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2e0cbd808.png' />

- Project ビューの何もないところを右クリックして Create → Folder をクリック
- 新規フォルダ名を Textures に設定

<img alt='' class='alignnone size-full wp-image-2379 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2e1ad6aba.png' />

- Project ビューの Textures フォルダを右クリックし、Create → Folder をクリック
- 新規フォルダ名を IshtarStage に設定

<img alt='' class='alignnone size-full wp-image-2380 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2e2b96467.png' />

- テクスチャ素材を Project ビューの Textures / IsitarStage にドロップしてインポートします

<img alt='' class='alignnone size-full wp-image-2381 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2e3833a19.png' />

- Project ビューの Textures / IshtarStage フォルダを右クリックし、Create → Material
- マテリアル名を ceiling に設定

<img alt='' class='alignnone size-full wp-image-2382 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2e48bc5b0.png' />

- Project ビューの ceiling マテリアルをクリック
- Project ビューの ceiling テクスチャを Inspector ビューの Albedo プロパティの□の枠の中へドロップ

<img alt='' class='alignnone size-full wp-image-2383 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2e5756b5d.png' />

- ceiling マテリアルを作成した時と同じ要領で、残りのテクスチャに対応したマテリアルを作成する

# マテリアルをProBuilderに設定しようか

<img alt='' class='alignnone size-full wp-image-2384 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2e673d62f.png' />

- Tools → ProBuilder → ProBuilder Window をクリックして、ProBuilder ビューを表示させる

<img alt='' class='alignnone size-full wp-image-2385 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2e745f797.png' />

- ProBuilder ビューの Material Editor をクリック

<img alt='' class='alignnone size-full wp-image-2386 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2e83f21b9.png' />

- Project ビューの各種マテリアルを、Material Editor の None になっている空きスロット部分へドロップする

以上で、マテリアルの準備は一通り完了です。

# マップを作ろうか

<img alt='' class='alignnone size-full wp-image-2387 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2e90d3402.png' />

- ProBuilder ウインドウの New Shape をクリック
- 各パラメータを設定する

|項目名|設定値|
|:---|:---|
|Shape Selector|Plane|
|Initial Orientation|Up|
|Width|32|
|Height|16|
|Width Segments|15|
|Length Segments 31|

<img alt='' class='alignnone size-full wp-image-2388 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2ea3957b5.png' />

- パラメータ設定後、Build Plane をクリック

<img alt='' class='alignnone size-full wp-image-2389 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2eb029535.png' />

- Scene ビューの上部にあるアイコンの一番右（フェイス編集モード）をクリック

<img alt='' class='alignnone size-full wp-image-2390 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2ebe1ea10.png' />

- ちょっと広い画面で作業した方が効率が良いので、ここで Scene ビューの Scene と書かれたタブタイトルをクリックしたままマウスをドラッグすると、図の用にウインドウとして分離される

<img alt='' class='alignnone size-full wp-image-2391 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2ec9e3b04.png' />

- ウインドウを広げて画面いっぱいにする

<img alt='' class='alignnone size-full wp-image-2392 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2ed5d0da5.png' />

- Scene ビュー右上の Y の緑のコーンをクリック

<img alt='' class='alignnone size-full wp-image-2393 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2ee2cff10.png' />

- 真上から見た図になる

<img alt='' class='alignnone size-full wp-image-2394 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2eeeb7403.png' />

- Shift + マウス左ボタンドラッグで範囲選択すると

<img alt='' class='alignnone size-full wp-image-2395 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2ef7b1a6c.png' />

- このようにグリッドが選択できる
- 注意として、Plane を作る時にブロックごとに選択できるように Width Segments と Length Segments を指定している
- Segments を指定しない場合、単一プレーンになるので、ブロック毎の選択ができないので要注意

<img alt='' class='alignnone size-full wp-image-2396 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2f06274b8.png' />

- また、このように SHIFT を押しながら範囲選択すると

<img alt='' class='alignnone size-full wp-image-2397 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2f1440daa.png' />

- このように選択範囲が反転する

<img alt='' class='alignnone size-full wp-image-2398 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2f21a7e10.png' />

- もし、SHIFT キーを押さなかった場合、前回まで選択していた部分が保持されず、リセットされるので注意

<img alt='' class='alignnone size-full wp-image-2399 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2f2d0c867.png' />

- でも、範囲選択をミスったら Ctrl + Z で過去の選択状態に戻せるので慌てず Undo する事

<img alt='' class='alignnone size-full wp-image-2400 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2f375411e.png' />

- 範囲選択完了

<img alt='' class='alignnone size-full wp-image-2401 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2f42a4774.png' />

- もう大きいウインドウはなくても良いので、Scene ビューのタイトルをドラッグして、Unity エディターの元あった位置あたりにドラッグすると、このようにドッキングできる

<img alt='' class='alignnone size-full wp-image-2402 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2f4e48fc8.png' />

- 選択状態を維持したまま、ProBuilder ビューの Extrude Faces の隣の + をクリック
- Extrude Settings ウインドウの Extrude By を Face Normal 、Distance を 1 に設定し、Extrude Faces をクリック

<img alt='' class='alignnone size-full wp-image-2403 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2f5ba5a18.png' />

- 座標１つ分、選択した床がせりあがる

<img alt='' class='alignnone size-full wp-image-2404 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2f6a5f17a.png' />

- さらに、Extrude Settings ウインドウの Extrude Faces をクリックし、押し出しが完了したら、あともう一回 Extrude Faces をクリックする

<img alt='' class='alignnone size-full wp-image-2405 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2f79b4e39.png' />

- このように、合計 3 回 Extrude Faces を３回クリックした結果、座標３つ分床がせりあがる事にあんる
- 押し出しを３回に分けた理由は、テクスチャを張る際に壁の高さ１つ分だけ張る時にポリゴンが分割されていた方が都合が良いため

<img alt='' class='alignnone size-full wp-image-2406 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2f8a66f55.png' />

- するとこのように選択した部分がせりあがる
- Extrude Settings の Extrude By の項目は下記の通り

|選択項目|意味|
|:---|:---|
|Face Normals|面の向いてる方向に押し出しを行い、隣接してる面は接続されたままになる|
|Vertex Normals|面の持つ法線ベクトルの方向に押し出しを行い、隣接してる面は接続されたままになる|
|Individual Faces|面の向いてる方向に押し出しを行い、隣接してる面は接続されない|

# ほな、テクスチャ張ったろうか

<img alt='' class='alignnone size-full wp-image-2407 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2f972c1ca.png' />

- せっかくなので、ProBuilder ビューの Material Editor をクリックして Material Editor ウインドウを開く

<img alt='' class='alignnone size-full wp-image-2408 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2fa651450.png' />

- Material Editor の天井マテリアルを設定設定したスロットが Alt + 2 の部分なので、 Alt + 2 キーを押下するか、Alt + 2 のボタンをクリックすると、押し出しを行った面がまだ選択されたままなので、天井部分のテクスチャが設定される

<img alt='' class='alignnone size-full wp-image-2409 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2faf95107.png' />

- テクスチャを張り付けた後、Unity エディタの右下にプログレスが表示されるので、完了するまでおとなしく待つ

<img alt='' class='alignnone size-full wp-image-2410 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2fbce5c4f.png' />

- ProBuilder ビューの Invert Selection をクリック

<img alt='' class='alignnone size-full wp-image-2411 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2fc8efabf.png' />

- 選択状態が反転する（この画面写真だと全選択に見えてしょうがない）

<img alt='' class='alignnone size-full wp-image-2412 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2fd38741d.png' />

- wall2が設定された Alt + 7 ボタンをクリック

<img alt='' class='alignnone size-full wp-image-2413 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2fe12b8c5.png' />

- 壁のテクスチャが設定される

<img alt='' class='alignnone size-full wp-image-2414 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2fecea843.png' />

- 再び Scene ビューのタイトルをドラッグしてウインドウに分離し、全画面表示にする

<img alt='' class='alignnone size-full wp-image-2415 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c2ff790121.png' />

- Scene ビュー画面右上の Y の緑色のコーンをクリックし、真上からの図にする

<img alt='' class='alignnone size-full wp-image-2416 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c300543848.png' />

- 真上からの図

<img alt='' class='alignnone size-full wp-image-2417 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c30107de90.png' />

- さらに、Scene ビュー右上のこの□のマークをクリックし、パースペクティブから平行法にする

<img alt='' class='alignnone size-full wp-image-2418 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c301cbf0ea.png' />

- パースがなくなり、選択しやすくなった
- と思ったのは実は罠で、選択時の判定はパースペクティブ時の計算式で行われているので平行法で選択すると選択位置が微妙にズレる罠がある

<img alt='' class='alignnone size-full wp-image-2419 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c30698bdf3.png' />

- Snece ビュー上部のアイコンが面選択モードになっている事を確認する

<img alt='' class='alignnone size-full wp-image-2420 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c30753935f.png' />

- 床部分を選択する（あれ？なんかマップミスってる！！後で直そう）

<img alt='' class='alignnone size-full wp-image-2421 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c30820d0e1.png' />

- Material Editor ウインドウの floor1 テクスチャが設定されている Alt + 3 ボタンをクリックする

<img alt='' class='alignnone size-full wp-image-2422 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c308f32641.png' />

- 床が設定された

<img alt='' class='alignnone size-full wp-image-2423 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c309d5720f.png' />

- このような感じ

# 最後はドアつけましょうか

<img alt='' class='alignnone size-full wp-image-2424 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c30a884bb7.png' />

- 面選択モードである事を確認

<img alt='' class='alignnone size-full wp-image-2425 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c30b6935d4.png' />

- 扉を設置する部分のポリゴンを選択

<img alt='' class='alignnone size-full wp-image-2426 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c30c171316.png' />

- Material Editor ウインドウの扉マテリアルが設定されている Alt + 5 のボタンをクリック

<img alt='' class='alignnone size-full wp-image-2427 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c30cd991b8.png' />

- ばばーん！！
- 本当はこの部分には扉１つ出したいわけですが、繰り返し貼り付けされているので修正が必要

<img alt='' class='alignnone size-full wp-image-2428 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c30d87dd84.png' />

- ProBuilder ビューの UV Editor をクリック

<img alt='' class='alignnone size-full wp-image-2429 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c30e747b35.png' />

- Scene ビューの修正したい扉テクスチャのポリゴンを１枚クリックし、UV Editor ウインドウの Convert to Auto をクリック

<img alt='' class='alignnone size-full wp-image-2430 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c30f38e547.png' />

- UV Editor ウインドウの Offset を 0.25, 0.25 に設定し、Tiling の 2 のボタンをクリック

<img alt='' class='alignnone size-full wp-image-2431 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c30feb9558.png' />

- 同様に、今度は左上の扉ポリゴンをクリック、UV Editor ウインドウの Convert to Auto をクリック
- Offset は 0.25, 0.75 と入力し、2 のボタンをクリック

<img alt='' class='alignnone size-full wp-image-2432 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c310a344a3.png' />

- 扉の右下は Offset 0.75, 0.25 で設定

<img alt='' class='alignnone size-full wp-image-2433 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c3114739e8.png' />

- 扉の右上は Offset 0.75, 0.75 で設定

<img alt='' class='alignnone size-full wp-image-2434 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c312391d28.png' />

- こんな感じになった

# ドット絵ぽくする

　元のテクスチャ素材はドット絵だったので、バイリニアフィルタを使わないようにします

<img alt='' class='alignnone size-full wp-image-2435 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c312f1052b.png' />

- Project ビューの Textures / IshtarStage のテクスチャを全て Shift キーを押しながらクリックで複数選択する
- Inspector ビューの Filter Mode を Point (no filter) にし、Apply をクリック

<img alt='' class='alignnone size-full wp-image-2436 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c313a657df.png' />

- Before

<img alt='' class='alignnone size-full wp-image-2437 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c3147a3dd3.png' />

- After
- うむ、やはりドット絵はクッキリしてる方が良い

# 一旦保存

<img alt='' class='alignnone size-full wp-image-2438 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c3150c1c7f.png' />

- 一旦 Ctrl + S を押下し、シーンを保存
- ファイル名を適宜入力して 保存 をクリック

<img alt='' class='alignnone size-full wp-image-2439 ' src='http://megamin.jp/wp-content/uploads/2018/03/img_5a9c315bbcc0c.png' />

- とりあえずできた！！

# この後には続きがあるのですが

内緒の話なので、今日はここまで。

ではまた！！