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

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

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

4.
The Wolf House Nox Bird

5.
The Wolf House Nox Bird

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

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

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

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

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

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

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

13.
ProBuilder オーバービュー

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

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

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

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

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

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

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

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

22.
Polybrush オーバービュー

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

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

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

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

27.
ProGrid オーバービュー

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

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

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

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

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

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

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

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

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

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

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

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

40.
家を作ろう
• 新しく追加された方の部屋の天井を選択し、少し引っ張り上げ、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つ設置しよう。

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

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

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

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

45.
タルを作ろう
• 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 で塗る。

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

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

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

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

50.
キノコを作ろう
• 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 で塗る。

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

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

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

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

55.
樹木を作ろう
• 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 で塗る。

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

57.
リフトを作ろう
• 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で調整する。

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

59.
島を作ろう
• 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で形をならして完成。

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

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

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

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

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

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

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

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

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

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