【ProBuilder】プロビルダーを使ってみよう【cluster】

開発環境は、clusterで開発しやすいように、
unity2019.2.21f1　を使用しています。
他のバージョンでも、同様にProBuilderを導入することができると思います。

cluster公式サイトでもProBuilderの解説はされています。
この記事では、特に必要な要素のみ抽出しています。

参考サイト
[【cluster公式】誰でも簡単にプロ並みのワールドを。ProBuilderでワールド制作](https://creator.cluster.mu/2020/05/04/howtocreate-probuilder-world/)

---

解説動画はこちら
[【うのっちチャンネル】](https://www.youtube.com/user/TheSANPEITA/)
[ProBuilderの使い方(基本編)](https://youtu.be/WNomsFDwhyE)

---

# ProBuilderのインストール編

unityのメニューバーから、[Window]-[Package Manager]を選択する。
<img width="670" alt="a1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/657960b7-e43a-931f-b672-2f6001d4917b.png">

検索ウィンドウに　probuilder　と入力して、ProBuilderが表示されたら、[Install]ボタンを押下する。
<img width="705" alt="a2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/b14b640b-01b9-18e8-0302-de2f2461669b.png">

インストール完了。
<img width="703" alt="a3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/a39c2fee-7816-23c2-fe9f-38fb49cbe192.png">

---

# ProBuilderの準備編

unityのメニューバーから、[Tools]-[ProBuilder]-[ProBuilder Window]を選択する。
<img width="419" alt="a4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/ae2c632e-6ced-23f6-aba6-56471e4d875a.png">

なんかウィンドウが出てくる。
<img width="326" alt="a5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/e96ef025-398e-db84-0b5e-b1bebcfda483.png">

最初はリスト表示だとわけわからんと思うので、アイコン表示に切り替える。
ウィンドウ右上にあるリスト切り替えのアイコンをクリックして、[Use Icon Mode]を選択する。
(無理やりアイコンにする必要はない)
<img width="424" alt="a6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/040043ac-bc25-d34f-c918-c85473ee804b.png">

下図は、アイコン化した状態。
<img width="327" alt="スクリーンショット 2020-06-29 9.42.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/94817048-92a2-1c64-add5-0a341de6bb0c.png">

ProBuilderのウィンドウは、しばらく使うので、他のウィンドウとドッキングしておくと楽。
ウィンドウのドッキングについてピンとこない方は下記記事を参考にしてください。
[【unity】ウィンドウタブの動かし方](https://qiita.com/sanpeita/items/ee77753aaec9187db348)

---

# ProBuilderでオブジェクトを出してみる編

下図のように、[Alt]キーを押しながら、アイコンをクリック。
<img width="327" alt="a8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/4e231d2d-4b6a-a4da-5f52-1d829fc0eed9.png">

下図のウィンドウが表示される。
使い方は、
適当にオブジェクトやサイズを選択して、[Build]を押下すると、Scene上に配置される。
今回の使用例については後述。
<img width="461" alt="a9.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/a7763b5a-9c30-a7fb-7b9d-7b8b84b0ec44.png">

下図のように、ヒエラルキーウィンドウに、ProBuilderやShapeToolをドッキングしておくと楽だったりする。
好みの配置を見つけておこう。
<img width="451" alt="a10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/50ca586c-f612-c62a-2915-2766e95ac1c9.png">

今回は、キューブで、サイズは下図を参照。ビルドする。
<img width="460" alt="a11-1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/1b0e294b-f818-d99d-17ca-230385fc8b4f.png">

実際にキューブを出した図。
<img width="577" alt="a11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/5f2cb7c4-811b-b885-06ad-a974a0ef80bc.png">

---

# ProBuilderでオブジェクトをいじってみる編

## オブジェクトの加工編

前項のつづき。

キューブを選択した状態で、
下図を参考にして、アイコンをクリックする。(Flip Object Normals というアイコン)
<img width="457" alt="a12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/3e0d1e2a-a872-b245-7d1c-7da0377165cd.png">

下図のように、キューブが反転し、空洞ができる。
<img width="336" alt="a13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/21cd23bd-100d-d46c-b8e7-47b47ee1875a.png">

さらに、下図を参考にして、アイコンをクリックする。(Subdivide Objectというアイコン)
<img width="451" alt="a14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/fb8a0b75-cada-f6a1-be77-b340b42342d8.png">

下図のように、キューブに分割線が入る。
ここに関しては、Blender経験者もわかってくるポイントだと思う。
<img width="303" alt="a15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/9fc00383-e7a5-6ef5-35c8-e733b0e1e199.png">

下図のように、面選択モードのアイコンを選択した状態で、
オブジェクト内の適当な面を選択する。
<img width="361" alt="a16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/6e51b32c-fd59-0fcf-ad79-af4afd8f7e4d.png">

下図を参考にして、アイコンをクリックする。(Extrude Facesというアイコン)
<img width="459" alt="a17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/b4c6fab5-de45-fd00-426d-aab0d3e06498.png">

これにより、対象の面を、下図のように手前に引っ張ったり、
<img width="335" alt="a18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/ced60f9a-4904-a660-913d-564a74b4b565.png">

または下図のように奥に押し出したりすることができる。
<img width="403" alt="a19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/a8b44441-b4fc-5830-5361-ee6c52509b1d.png">

下図は、分割と押し出しを駆使して作成したもの。
元はひとつのキューブなので、ProBuilderのすごさが少しでも体感できると思う。
<img width="377" alt="a20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/3f9d6e3e-dac0-07d6-5320-c51804e1a1ba.png">

さらに、キューブ以外にもオブジェクトを設置できる。
<img width="449" alt="a21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/e016f4dd-620a-6ef3-6055-c242f15caaa6.png">

---

## マテリアル編

下図を参考にして、アイコンをクリックする。(Material Editorというアイコン)
<img width="424" alt="マテリアルエディタ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/73815a7e-fb8c-0b3c-1c6e-efab6ac956c3.png">

下図のように、ProBuilderで使用するオブジェクト用のマテリアルのパレットが表示される。
ここでマテリアルを登録すると、ProBuilderで設置したオブジェクトのみ、これらが適用される。
<img width="325" alt="a23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/a1878b35-764e-d8dc-2263-ec73554d4dca.png">

とりいそぎ、各種カラーを準備。
<img width="585" alt="a24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/aa1a8501-b489-0e87-9fb9-9d4ce362908c.png">

下図のように、マテリアルを登録することができる。
<img width="417" alt="a25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/8a5a1fdf-5077-749e-0f08-92f55ee533fe.png">

下図のように、オブジェクトを選択→マテリアルのパレットから選択、を繰り返すと、かんたんにマテリアルを反映することができる。
これらは、ProBuilderで設置したオブジェクトが対象となるので注意。
<img width="452" alt="a26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/3fb8f4d0-2090-b3ba-2d85-4ebb4715bb26.png">