
ProBuilder面白いです
前回の記事「UnityのProBuilder初体験(とりあえず形状作成まで)」では ProBuilderを導入して作成可能な形状についての紹介でした。今回はいきなりですが VRChat のワールドを作ってみたいと思います。具体的には、イシターの復活のワールドを作ってみます。著作権的にアレなので、作っても非公開とします。えぇ。でもゼビウスのワールドとか作っている人とか普通にいそうよね。とか言ってみる。
プロジェクト作成部分は省略
前回記事でプロジェクトを作成して ProBuilder をインポートしてるところまで進めてる前提で話を勧めます。
まずは、イシターのマップを把握
でもその前に、イシターの復活とはなんぞや? という簡単な説明を。イシターの復活はドルアーガの塔の続編にあたり、ギルがドルアーガを倒し、恋人カイを救い出した後、2人でドルアーガの塔から脱出するゲームとなります。階層はドルアーガの塔時代は60階だったのに帰りは何故か128階と倍以上に増えてます。きっとドルアーガの魔力で改築されてたのが元に戻ったんでしょうね。
で、各フロアはマップの上下左右が繋がった無限スクロール構造になっていて、VRChat で表現する際には無限スクロールのあるステージはちょっと無理なので、上下左右が閉じたマップが良い事になります。というわけで、最初のステージである TOP OF THE TOWER をやってみようと思います。
せっかくだから、カイのアバターも作ってみたいなぁ。でもこれは怒られそうだから我慢しよう。

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

テクスチャ素材はこれを使います。「みく☆ふぁいと」開発時にかなり縁さんが描いてくれた背景用テクスチャ画像です。さすが 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 をクリック

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

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

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

- するとこのように選択した部分がせりあがる
- Extrude Settings の Extrude By の項目は下記の通り
選択項目 | 意味 |
---|---|
Face Normals | 面の向いてる方向に押し出しを行い、隣接してる面は接続されたままになる |
Vertex Normals | 面の持つ法線ベクトルの方向に押し出しを行い、隣接してる面は接続されたままになる |
Individual Faces | 面の向いてる方向に押し出しを行い、隣接してる面は接続されない |
ほな、テクスチャ張ったろうか

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

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

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

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

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

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

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

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

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

- 真上からの図

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

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

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

- 床部分を選択する(あれ?なんかマップミスってる!!後で直そう)

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

- 床が設定された

- このような感じ
最後はドアつけましょうか

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

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

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

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

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

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

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

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

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

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

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

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

- Before

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

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

- とりあえずできた!!
この後には続きがあるのですが
内緒の話なので、今日はここまで。
ではまた!!