More than 5 years have passed since last update.

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

Posted at 2018-03-05

ProBuilder面白いです

　前回の記事「UnityのProBuilder初体験（とりあえず形状作成まで）」では ProBuilderを導入して作成可能な形状についての紹介でした。今回はいきなりですが VRChat のワールドを作ってみたいと思います。具体的には、イシターの復活のワールドを作ってみます。著作権的にアレなので、作っても非公開とします。えぇ。でもゼビウスのワールドとか作っている人とか普通にいそうよね。とか言ってみる。

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

　前回記事でプロジェクトを作成して ProBuilder をインポートしてるところまで進めてる前提で話を勧めます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

マップを作ろうか

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

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

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

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

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

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

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

真上から見た図になる

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

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

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

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

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

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

範囲選択完了

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

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

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

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

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

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

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