【Unite Tokyo 2018 Training Day】ProBuilderで学ぶレベルデザイン ProBuilderをマスターしよう！

2018/04/21 ProBuilderで学ぶレベルデザイン ProBuilderをマスターしよう！ 池和田 有輔 ユニティ・テクノロジーズ・ジャパン

ProBuilder 概要 • Unity上でモデリングが行えるようになる機能拡張。 • 元々はアセットストアで公開されていたプラグインであり、 Gabriel Williams と Karl Henkel によって開発されていた。 • 曰く、モデリングとレベルデザインのハイブリッドツールであり、 シームレスなレベルデザインを可能にする。 • 開発者2人がUnityにJoinし、2018.1 より無料化および標準化。 • 現在、彼らはProBuilderを中心に、Polybrush、ProGridといった ツールの開発も進めている。 • 3つを組み合わせることで強力なレベルデザインツールになる。

どこまでできるの？ プロダクションでも使えるの？

The Wolf House Nox Bird

The Wolf House Nox Bird

ワークフローはどう変わる？

• とても硬派なステルス・アクションゲーム • iOS、Android、PC/Mac (Steam)、PS4で展開 • 日本語盤はPS4のみ • プレイヤーはOmni Viewと呼ばれるハッキング モードに切り替えて、監視カメラを乗っ取って 様々なデバイスをハックして、少女を出口に導 く役割を担っている。

実はRepubliqueでも使っていたんですが・・・ レベルデザインはProBuilderで作成 実際のシーンはMayaで作成

当時のワークフロー Unity コンセプトアート 平面図 モックアップ Photoshop Illustrator ProBuilder × 本データ 完成版 Maya / 3ds Max Unity

なにが問題になっていたのか？ 一番の問題点は2Dの平面図が元になっていたこと • モックアップからダイレクトに本データ制作に移行できない。 • どうしても平面的なマップになりがち。 • 例えば表参道ヒルズのようなスロープのみで構成された建物の設計が困難。 • モックアップデータが無駄になる。 • あくまでも検証用のもの、と割り切るしかなかった。 • 2Dデータも全くの無駄だった訳ではないのですが・・・ • 結局ユーザー用のマップデータは2Dベース • マップを元にポスターを作ってオフィスに貼ってみんなの士気を高めたり。

現在、実現できるワークフローは？ Unity コンセプトアート 平面図 モックアップ Photoshop Illustrator ProBuilder ブラシュアップ 完成版 Maya / 3ds Max Unity DCCツールに戻してディティールを作 り込み、アニメーション追加、法線 マップなどのマッピングを行う。

ワークフローの向上が見込める理由 データのインポート、エクスポートができるようになった • ProBuilderで作ったものをobj形式でエクスポート。 • 取り込んだfbxをProbuilderで自由に編集。 • それを繰り返すこともできる。 • モックアップをもとに1から作り直すにではなく、発展させることができる • モックアップが無駄にならない。 • DCCツールからインポートしたデータの編集・調整もできる。 • 最終的な微調整もUnity上でできてしまう

ProBuilder オーバービュー

とにかく扱いやすく、操作性が考えられた作り 機能豊富な面選択例：ぐるっとループ選択や選択範囲を狭める・広げる、同色の選択など

プリミティブをベースにしたモデリング 面を押し出して伸ばし、時に凹ませ、形をととのえるスタイル。

頂点をつないでメッシュを作成 形状をトレースして押し出したり。最近のバージョンで操作が改善されました。

ベジェに沿ってシリンダーを制御 エクスペリメンタルなのでちょっと挙動が怪しい部分がありますが、今後に期待！

頂点カラーを使ったペイント スプレーのような頂点塗りとマットな面塗りをうまく切り替えてペイントしよう。

UVの設定もシーン内で直観的に UV展開自体は手動ですが、貼るのは直感的で使いやすいです。

ブーリアン演算 エクスペリメンタルですが、特に問題なさそう。

その他の特記事項 • ランタイム中に実行はできる？ そのためのAPIは？ • できます。でもあまりドキュメント化されてないっぽい。 • 参考：github.com/Unity-Technologies/ProBuilder-API-Examples • 最新情報を得るには？ • Twitterで @ProBuilder3D をフォローしよう。

• http://github.com/Unity-Technologies/ProBuilder-API-Examples
• https://twitter.com/ProBuilder3D

Polybrush オーバービュー

ジオメトリの柔軟な操作 スカルプト機能。実際はマグネットツールというべきかも。

テクスチャのブレンディング 複数のテクスチャをレイヤ分けしてブレンディング。もちろん法線マップなども。

頂点ペインティング 実はProBuilderの同じ機能よりも使い勝手が良いです。

表面に別のメッシュを配置 正直若干オマケ感ありますが・・。

ProGrid オーバービュー

地味だけど、とても有用なプラグイン • オブジェクトをグリッドに沿わせることができる。 • Backslashキーでの視点変更が追加される。 • これをV押し移動と併用すると良い感じ。 • 現在Polybrush、ProGridはAsset Storeで配布中。 • ともに2018.3 でUnityに統合予定。

今日の目標 アクションゲームを完成させよう

1 2 3 4 ProBuidlerを始めとしたツールの概要を把握し ゲーム開発にどのように組み込むべきか理解しよう。 実際に使って主要な機能を理解しよう。 ゲームに使えるPropやステージなどを作ろう。 工程2で作ったデータを配置してみよう。 未完成のゲームを完成させよう。 いや、こんなステージはまるでダメだ！ より良いレベルデザインにするための技術を知ろう。

ProBuilder・Polybrush・ProGrid 実際に使ってみよう！

Package ManagerからProBuilderのインストール 前述の通り、Polybrush、ProGridはAsset Storeからのインストールとなります。

Preference / ProBuilder • 項目はかなり多く、様々な設定ができる • 基本設定 • UIやギズモ • エクスペリメンタルなものの有効化 • ショートカットのカスタマイズ • その他諸々 • 基本的にはデフォルトの設定でオーケー。

Tools / ProBuilder • なにはともあれProBuilder Windowを出しておこう。 • 便利な機能として以下のようなものがある。 • Dimentions Overray: 定規のようなツールを表示させる • Editors / New Poly Shape: ベジェ曲線に沿ったモデリング • Experimental / Boolean Tool: ブーリアン演算を行う • 基本的に多用するようなものはないと思います。

Toolbar Object選択 Vertex（頂点）選択 Face（面）選択 Edge（辺）選択 • シーンビューの上中に追加される4つのボタン • 出現場所はPreferenceで変更可能 • デフォルトのツールバー と組み合わせることでメッシュの形状を 変化させることができる。このツールバーの拡張でもあるようだ。

ProBuilder Window • メインとなるツールバー。 • テキスト / アイコンの表示切り替えはPreferenceあるいは右 クリックから変更することができる。 • 今回は一列の文字表示にしてウィンドウ左に入れておく。 • Toolbarの選択モードによって項目が変わることに注意。 • カテゴリーによってざっくり色分けされている。 ウィンドウ開く系の操作 設定変更 見た目には変化がない編集 見た目が変わる編集

覚えておきたいショートカット 拡大縮小ツール 視点4タイプ切り替え (ProGridの機能) 編集モード中、 頂点・辺・面切り替え ハンドツール 移動ツール 回転ツール オブジェクト・編集モード切り替え ※QWERはUnity自体のショートカットですが、編集モード中でも有効です。

家を作ろう 難易度 ★★ まずはProBuilderの基本操作と頂点、辺、面の扱いを覚えよう。

家を作ろう • ProGridのグリッドに沿う機能を一旦無効にしておく。 • Hierarchyよりキューブオブジェクトをつくる • ProBuilderizeして編集可能にする。 • 正方向のX面、Y面、Z面を移動させ、それぞれ5倍くらいに引き延ばす。 • 負方向のX面をShiftを押しながら引っ張り（Extude）、ちょうど倍の大きさに。 • 負方向のX面をShiftを押しながら縮小、Shift移動で引っ張り出し、Shift拡大で広げ、 最後にShift移動で伸ばす。 • 部屋が二つできたことを確認。2つ目の部屋をちょっと広げる。 • 部屋同士をつなぐ通路に段差ができてしまっているのでこの部分の面を下げて通りやす いように直す。

家を作ろう • 新しく追加された方の部屋の天井を選択し、少し引っ張り上げ、Extude Facesで引き 出し、ちょっと面を上げたうえでDelete Facesで削除。頂点選択モードに切り替え、残 された4つの頂点をSelect Holesで選択し、Collapse Verticesで結合。 • 屋根のてっぺんの頂点の結合をバラバラに分割するためにSplit Vertices。 • 屋根の4つの三角ポリゴンのうち、2つをDelete Facesで削除。それぞれの距離をとった うえでFill Holeで屋根を形成。 • 多角形ポリゴンのままだと形状が理解しにくくなり、よろしくない。Connect Vertices で結合させることにより、2つの4角ポリゴンに変換する。 • 1つめの部屋の天井を分割する線を選択し、Y軸方向に上げて屋根の形状にする。 • 最後にFlip Normalsで法線を反転させて、ポイントライトを2つ設置しよう。

重要なこと ProBuilderは多角形ポリゴンをサポートしています。 とはいえ、基本的には3角ポリゴンと4角ポリゴンで作るべき。 そして4角ポリゴンの対角線の入れ替えをサポートしています。

対角線の入れ替えとは？ 4角ポリゴンの対辺にねじれが生じれば、実質3角ポリゴン2枚であることを意識する必要 が出てきます。 板ポリの時は同じ形 1つの頂点をY軸方向に グイっと伸ばすと 形状が変わる！

対角線の入れ替えを柔軟に Connect Verticesで対角線を入れてしまえば三角ポリゴンに分割されます。しかし、四角 ポリゴンをキープしたいのであればFlip Face Edgeで入れ替えができちゃいます。便利！ Flip Face Edge Flip Face Edge は四角ポリゴン限定で使えるコマ ンドとなっています。 左図は形状が明らかに変わった例。

タルを作ろう 難易度 ★ ProBuilderのプリミティブから作る方法とマテリアルやカラーを学ぼう。

タルを作ろう • New Shapeからシリンダーを作成。Radius 0.5 Num of Side 8 Height1 Height Segments 0 Smooth Offにして原点におく。 • 上の辺8つを選択し、Bevelのオプションを0.1mにした上で実行、角をまるくする。 • 下の辺1つを選択肢、Select Edge Loopでぐるっと選択し、再びBevel。 • 横の一辺を選択してInsert Edge Loopでループカット。位置を上方にずらし、今度は下 方を再度ループカット。 • Material EditorからBasicを割り当てる。 • オブジェクト選択モードに切り替えて、Vertex Colorsから全体の色を #A26B42 で塗 る。上方と下方をSelect Face Ringでループ選択して #151515 で塗る。

タルを作ろう • 黒く塗った部分の面を1つ選択し、Select by Colorsでその色の面だけを選択。 • Exbude ByがFace Normalであることを確認しつつ0.05押し出し。 • フタにあたる部分ををExtudeでへこませ、縮小して完成！

重要なこと マテリアルの割り当てをインスペクタ上で行っても Editor操作中にデフォルトに戻されてしまうことに注意！

割り当てはMaterial Editorから • ここでアサインするのが基本となります。 • Material Paletteに登録しておけば、パネルを開かな くてもショートカットで変えられるのでとても便利。 • 面単位で他のマテリアルを割り当てることもできる。

キノコを作ろう 難易度 ★ 押し出しツールを多用して、より理解を深めよう。ここまでの復習回です。

キノコを作ろう • New Shapeからシリンダーを作成。Radius 0.1 Num of Side 8 Height0.5 Height Segments 1 Smooth Off。 • フタの部分をShift で押し出して拡大、再度押し出して若干拡大、今度は押し出して縮 小 • Select Hole 穴の周りの頂点を選んだ後に Collapse Verticesで塞ぐ。 • 柄の部分を選択してBevelを0.1入れる。X方向に少し移動させる。 • Material Editorから全体にBasicを割り当て、Vertex Colorsから #D22727 で塗る。

葉っぱを作ろう 難易度 ★★★★ ProGridとPolybrushのプラクティス。スカルプトツールはクセが強いので注意！

葉っぱを作ろう • ProGridを有効化し、Snap Valueを0.1に。これで10センチ単位でスナップするように なった。 • プレハブBlueprint Leaf1をシーンに表示 • New Poly Shapeでトレース。その際、絶対に下から書き始めること（中心点が書き出 し位置になるので） • 厚みを1cmにするため、インスペクタ上のExtrusionを0.01にする。そしてEdit Poly Shapeをクリックしてエディットモードを終了。 • Sudivide Objectを2回行い、Poly Brushで葉の中央から先端部分を隆起させる。

葉っぱを作ろう • Material Editorから全体にBasicを割り当て、Vertex Colorsから #4ED232 で塗る • 複製を2回行い、それぞれのY角度を0、120，240にして3つを選択し、Marge Objects で結合

樹木を作ろう 難易度 ★★★★★ 押し出しの反復、そしてスカルプト。センスが問われるのでじっくりやってみよう。

樹木を作ろう • ProGridのグリッドに沿う機能をオフにして。 • New Shapeからシリンダーを作成。オプションはRadius 0.2 Num of Side 4 Height0.5 Height Segments 0 Smooth Off。 • Extude FacesのDistanceを0.5にしてひたすら実行。角度を変えつつ、余裕があればひ ねりを加えつつ。Handle:Planeで面に角度調整ができるようにしておくと良い。 • 途中にShiftドラッグのExtudeを入れ、枝分かれさせてみよう。枝の先端は細く調整。 • 葉っぱの塊を作る。New ShapeでIcosphereを作り、Polubrushでちょっと変形させ、 各枝に配置。 • Material EditorでBasicマテリアルを割当て、枝を #4ED232 で塗り、葉の部分は #2ECC40 で塗る。

リフトを作ろう 難易度 ★★ 面ごとに異なるマテリアルを割り当てたり、UV画像の編集を行おう。

リフトを作ろう • New ShapeからCubeを生成。大きさは（4．1．4）とする。 • Center Pivotで原点を中央に。 • 横の一辺を選択してSelect Edge Ringで4辺選択し、Distance 0.5mのBevelを行う。 • 横の面を一つ一つ選択し、0.2のBevelを実行。Bevelは面からも行えます。 • Material EditorででBasicマテリアルを全体に割り当て、Vertex Colorsから水色 #96D2FF で着色。 • 再度Material Editorで今度は上面のみ選択してマテリアルLiftを割り当てる。 • テクスチャ画像がリピートで表示されているのでUV Editorで調整する。

島を作ろう 難易度 ★★★★ 今まで覚えた様々な技術や知識の今までのまとめになります。

島を作ろう • ProGridをオンにしよう。グリッド幅は1mに固定。 • プレハブBlueprint Mapをシーンに表示させ、New Poly Shapeでトレース。 • Extudeを8mにして、下の面を拡大。傾斜が45度くらいになるようにする。 • Triangulateして上面の崖になる部分をDeleteし、Fill Holeで再度埋める。埋めたら Subdivide Facesで分割。これで傾斜を作った時に先ほどよりも自然な形になった。 • 分割したところの左面を4mほど押し上げる。 • Material EditorででBasicマテリアルを全体に割り当て、Vertex Colorsで全体を岩肌の 色である #E1A862 で着色し、平地部分を緑（#4ED232）で着色。 • その後全体をSubdivide Objectで分割し、Triangulateでトライアングル化する。 • Polybrushで形をならして完成。

4つの課題をクリアして ゲームを完成させよう

初心者ボーイの設定 Layer Setting どのレイヤを地面と見なすか Run Speed 走行スピード Sprint Speed Up Ratio ダッシュでのスピード上昇率 Angular Velocity 旋回速度 Jump Velocity ジャンプ力 Rising Duration ジャンプボタン押しっぱなし有効時間 Max Step 何メートルの段差を登れるか Additional Falling Graity ジャンプ中に掛かる追加重力

キーボードでの操作 移動 ジャンプ ダッシュ ※カメラ視点切り替えはマウスによって行います 移動

ゲームパッドでの操作 ダッシュ 移動 ジャンプ カメラ ※Xbox 360 / Xbox One コントローラの場合になります

島と作ったオブジェクトを配置しよう ゲーム性に関わる部分ではないので、自分のセンスでイイ感じに！

階段を作ろう 階段はProBuilderの基本プリミティブに。 初心者ボーイはデフォルトで30cmの段差を上がれます。

橋を作ろう ちょっと見栄えが悪いので、Extudeなどを駆使して橋のような形状にしてみよう

動く足場を作ろう リフトを配置し、動かしてみましょう。 Ping Pong Liftのtargetで目標位置を、Durationで片道にかかる時間を設定できます。

Workshopディレクトリ内のデータの使用について 今回配布したプロジェクトデータは自由にお使いください。 改変、再配布、商用利用についての制限はありません。 ただし著作者は使用に関して一切の責任を負いません。 プロジェクトデータのまま配布する場合は License.txtを改変することなく同梱しておいてください。

Thank You ご清聴ありがとうございました。