ダンジョンの作り方【基礎編】
この記事は、アドベントカレンダー2017年8月1日のサブ記事です。
（検索エンジンから辿り付いた方、コチラが表紙です）
ここではDungeon Architectのチュートリアルを紹介します！
ダンジョン作りで誰もが最初に見て触る「Overview動画」を書き起こしたもので、
動画を一時停止して作業するのが面倒な人や、英語でよくわからなかった人向けの内容となっております。
早い人なら「約15分程度」で完成すると思いますので、ぜひトライしてみてください。
このチュートリアルで完成する見本
※完成形が動画と微妙に異なりますがダンジョンテーマは同一です。問題無し
なお、ここで使用するアセットのバージョンは1.5.0です。
Overview
これから練習する動画はこちらです。（公式サイト）
02 - Overview: Dungeon Architect Tutorial (Unity) - YouTube（17:42）
動画を全く見なくてもダンジョンが作れるレベルまで書き起こしました。
一応、Unity初心者さんでもわかるレベルに掘り下げてますが、
不明な点があれば、お気軽にコメントください（匿名OK）
１．ダンジョンビルダーを投入
アセットストアからDungeon Architectをインポートした状態からスタート。
Hierarchyに「DungeonGrid」をドロップします。
※ちなみに、Projectビューを↑のような1画面モードにするには、
右上のアイコンから「One Column Layout」を選択すると出来ます。
２．サンプル素材を開いてみる
動画と同じように、こっちも寄り道してサンプルテーマを先に開いてみます。
※時間の無い方や、アセット慣れしてる人は読むだけで大丈夫です。
2-1 Dungeon Themesをクリックして開く
動画にあるテーマはアセットに含まれていないので、
こちらのテーマを使いましょう。（内容は同じ）
DungeonArchitect_Samples / Demo_Theme_Candy / Themes / CandyDungeonTheme
これを 「Element 0」にバインド（セット）
2-2 エディタウィンドウを開く
「Window -> Dungeon Architect」からエディタ画面を開きます。
最初は何も表示されてませんが、
さっきのテーマ「CandyDungeonTheme」（Projectウィンドウの方）をダブルクリックすると読み込む事ができます。
何やら難しそうな手続きが行われてますが、これ全部簡単なのでご安心ください！
エディタの操作方法
マウスホイール：表示エリアの拡大縮小
右クリック：メニュー呼び出し
右クリック押しながら移動：ドラッグ
左クリック：選択
コイツが出た時の対処法
これはサムネイルが読み込まれてない状態なので
DungeonArchitectウィンドウ内の「Toolsタブ」->「Refresh Thumbnails」を実行すると再読込されます。
※なるだけマウスホイールで全部表示した状態でやると効果的です。
これで全て表示されました。壁や床、小道具など沢山ありますね。
2-3 ビルドしよう！
Element 0 にテーマがセットされていればビルドOKな状態です。
「Build Dungeon」をクリックしてビルドすると
ダンジョンが登場！
この段階でHIerarchyビューを見ると、
rootに(Clone)が大量に出来上がるからかなり邪魔ですよね。
2-4 解消する方法
とりあえず、作ったダンジョンを一旦消します。
ビルドの下にある「Destroy Dungeon」をクリックして一気に消す。
次に、Hierarchyに空のゲームオブジェクトを作って
名前を「DungeonItems」と付けます。※他の名前でも大丈夫です。
→ 
座標を初期化
Transformの設定アイコンから、「Reset」を実行して座標を「0,0,0」にします。
↓
動かないオブジェクトなので「Static」にチェックを付けます。
「DungeonGrid」をクリックして、下部にあるコンポーネント
「Pooled Dungeon Scene Provide」の「Item Parent」に
先ほど作った空のゲームオブジェクト「DungeonItems」をバインドします。
↓
2-5 再びダンジョンをビルドしてみると
「DungeonItems」の子にオブジェクトが生成されるようになります。
別の形状にする
このテーマを使って、全く違った形状にすることが出来ます。
ビルドの下にある「Grid Dungeon Config」コンポーネントの
「Seed」値が現在表示されてるダンジョンの形の元となる値です。
100を101に変更してビルドしてみると･･･
全く違う形状のダンジョンが現れます。
この値を100に戻すとさっきのダンジョンに戻せます。
Seedの右側にある「R」ボタンは、ランダムに値をセットしてくれます。
ここまでが、動画冒頭にあるサンプルテーマの読み込みと扱い方の基礎です。
３．サンプル素材を使ってダンジョン作り
サンプル素材を使って簡単なダンジョンを作りましょう！
面度臭い気分になると思うので、ブックマークしてからそっ閉じでＯＫです。
3-1 まず、さっき開いたダンジョンを消します。
「Element 0」にバインドしたテーマの解除と、
「Destroy Dungeon」をクリックして初期化する。
Projectウィンドウで右クリックして、
「Create -> Dungeon Theme」でテーマを新規作成します。
動画ではリネームして「MyTheme」に設定してました。
以降も「MyTheme」と呼ぶので、同じ名前にするとわかりやすいです。
3-2 テーマを開く
「MyTheme」をダブルクリックするとエディタに新規データが表示されます。
Ground = 地面
Wall = 壁
WallSeparator = 壁の柱
など、項目が既に用意された状態になります。
3-3 床のPrefabをエディタに入れる
これから使うサンプル素材データはこちら
DungeonArchitect_Samples / Demo_Theme_Candy / Prefabs
Groundの床素材をエディタにドロップしましょう。
※ここでサムネイルの画像が正しく表示されない場合は、
DungeonArchitectウィンドウ内の「Toolsタブ」->「Refresh Thumbnails」を実行すると再読込されます。
3-4 GroundとPrefabを繋ぐ
「Ground」の項目と3Dモデルを接続します。
ちなみに、ラインを解除する場合は、
オレンジ色の部分を「右クリック」すると解除できます。
そんな感じで、床のみセットした状態で次へ進みます。
3-5 テーマをビルダーにセットする
「MyTheme」をDungeon Themesの「Element 0」にバインドします。
3-6 ビルド
「Build Dungeon」をクリックしてビルドしよう。
床が出来上がれば成功です。
HierarchyのDungeonItems
この時点で、DungeonItemsの子にGround(Clone)が付いてない場合は、「2-4」が正しくセットされているか調べてください。
3-7 壁(Wall)をセットする
Groundと同じく「Wall1」をエディタにドロップして、「Wall」と接続します。
Wallを接続した瞬間にシーン側に生成されるから組み立てがあってるか確認しながら作業できる。
今の所、何も問題が起きなくて簡単ですが気を緩めちゃダメですよ。
3-8 フェンスを接続する
フェンスは通路の壁にあたるものです。フロアの壁と差別化できるようなものが好ましい
「WallHalf」を接続すると、通路に赤色の低い壁が出来上がり。
3-9 1Fと2Fの壁を接続
階段付きのダンジョンを生成すると、1Fと2Fの繋ぎに謎の空間が･･･。
これから壁を設置します。
この空間は「WallHalf」で埋められます。
「WallHalf」に「WallHalf」のPrefabをセットすると･･･
デフォルトでは上部に表示されてしまいました。
このように、使う素材によって見当違いな位置や角度になってしまう場合もあるので、
これから修正してみます。
まず、WallHalfのサムネイルをクリック。
InspectorのPosition(Y)を-2にセット。
Y軸が2下がって、綺麗に収まりまったように見えますが、
ピッタリ過ぎてノイズが発生してしまいます。
公式では「-2.01」で0.01下げて対応しています。
確かにこうすると綺麗に表示されて解決しました。
3-10 フェンスのスケールを調整
既に配置した「Wall」をリサイズして壁のデザインに合わせる。
これもさっきのPositionの設定と同じで、
エディタのFenceを選択してから、
Scale(Y)の値を「0.5」にセットすると半分になり、壁の模様と高さが合いました。
3-11 ドアを接続
「Door」Prefabを、エディタの「Door」にセットします。
これは特に問題無しですね。
3-12 階段を接続
「Stairs」Prefabを、エディタの「Stair」にセットします。
これは問題ありますね。
階段の回転とポジションを修正します。
Position(X)を「-2」
Rotation(Y)を「180」にセットすると階段の位置は正しいポジションになったけど、
2Fの高さが低いことに気づきます。
3-13 「グリッドの高さ」を修正する
「DungeonGrid」には2タイプの階段が設置できます。
今回設置したのは通常の階段（Stair）で、
もう１つ「Stair2X」は2倍の高さが指定できる階段です。
この高さのある場所に2倍の高さの階段オブジェクト「Stair2X」が出来上がります。
ここでは「Stair2X」の階段素材がサンプルフォルダに含まれてないし、
このチュートリアルでは使わないので、省くようにビルダーに設定します。
「DungeonGrid」にある、GridDungeonConfigコンポーネントの
「Max Allowed Stair Height」の値を「2」から「1」へ変更します。
（2は「Stair2X」有りのダンジョン / 1は通常のみ）
※ ちなみに「階段無しのダンジョンが作りたい場合」は、一つ上の項目の「Height Variation Probability」値を0.2から0へ設定すると階段無しになります。ですが、ここでは0.2のまま進みますので設定しないようご注意ください。
階段の最大値を設定後、
さらに「グリッドサイズ」を階段の高さに合うように修正します。
１．HierarchyのDungeonGridを選択
２．Grid Cell SizeのY値を「1」から「2」へ変更
３，Build Dungeonをクリックしてリビルドすると2Fの高さがアップしました。
これで綺麗に階段が設置されるハズ！
Dungeon Architectは基本的にグリッドベースの開発なので、1マスのサイズは結構重要。
このサンプル素材は「4 x 1 x 4」じゃなくて「4 x 2 x 4」が正しい大きさ。
好きなタイミングで手軽に変更ができるのがDungeon Architectの良い所です。
3-14 壁に窓を取り付ける方法
これから「窓」を壁に取り付けます。
このステップはかなり重要
ダンジョンをデコレーションする機能。一定の確率で表示させる時に使います。
「Wall2」のWallに窓が付いたバージョンです。これのセットのしかた
エディタのWallに接続します。
Wallに接続中の壁を「右側に移動」して、
「左側に新しい窓付きの壁」をドロップして接続します。
右側と左側に配置する意味はあります。とっても重要。
今は何も考えずに「左側」に配置して接続して下さい。
配置すると壁が全て窓になります。
これには「確立」のパラメータがあって、デフォルトでは「1」（百分率で全体を1とした割合）つまり100%表示されるようになってるからです。
窓のInspectorのProbability値を「1」から「0.9 → 0.8 → 0.7」と下げていくと1部屋あたりに生成される窓が減っていく。
動画では「0.25」と指定してたので「0.25」に設定しましょう。
窓が設置出来たので、この辺りで先ほど言ってた、
「右側」「左側」に配置した理由を説明します。
左側（現在設定中のもの）
これを右側に置き換えると･･･
（ライン解除は、オレンジ色の接続部分を「右クリック」で解除）
※ただノードの位置を移動させるだけでは変化は起きません。
ラインを接続したタイミングで判定が入る仕様です。だから一度解除してます。
窓が無くなってしまいました。
これはバグではありません。
「窓が消えた原因」について解説します。重要
実はこうなってた。
ノードは「左から右の順」に実行される仕様で、
100%の確立で「通常の壁」が出る設定だから、「窓付き壁」がスルーされてしまった。
窓のラインを一旦解除して、左側に戻してから再接続して下さい。
まず25%の確立で「窓付き壁」が取り付けられて、
空いた残りの部分に100%の確立で「窓無し壁」が生成される仕組みです。
「窓付き壁」意外にも、「崩れた壁」などいくつもぶら下げて3個4個と好きなだけ増やす事ができるというわけです。
その代わり、一定の確率で出す物は必ず「左側に配置」する事をお忘れ無く！
「Consume On Attach」（アタッチ時に消費する）について
これもよく使う機能です。
このチェックボックスをONにすると、
シーンに「窓付き壁」が生成された後に、その場所に引き続き右隣のノード「窓無し壁」を実行するかどうかの判定です。
ONなら実行しない。OFFなら実行するです。
OFFにして実行すると･･･
このように「窓付き壁」と「窓無し壁」が重なって生成された。
オブジェクトを移動すると、ちゃんと2つ配置されていることがわかる。
これを上手く利用して、
階段に「手すり」窓に「カーテン」「窓枠に置物」を配置する様にデコレーションする事ができるというわけです。
実験は終わりです。元の状態に戻しましょう。参考↓
・「窓付き壁」の「Consume On Attach」チェックを付ける
・ノードの配置を窓が出るように戻す。
3-15 壁と壁の間に「柱」を追加
「WallSeparator」が柱の役割になってくれます。
「Pillar2」オブジェクトをエディタに投入して
「WallSeparator」と接続します。
かなりガビガビに表示されるので微調整をします。
Position(Y)を「0.05」押し上げて、壁より高くする。
Scale(X)と(Z)を「1.25」にして、壁より分厚くする。
3-16 階段に手すりを設置する
チュートリアル動画のラストパート！
階段の両サイドに手すりを設置します。
片方片方で2回やります。まず1回目
「Stair」の右側に「StairRail」を接続します。（動画と同じ流れ）
すると、手すりが表示されません。
これは「壁の窓枠」で覚えた「Consume On Attach」を使い、両方出現するようにします。
まず階段を選択して、
「Consume On Attach」のチェックを外します。
すると、Probarilityが1の状態でも、右隣の「階段」が実行されるようになります。
軸や座標がズレてるので修正します。
左側の手すりが完成！
同じように右側の手すりを実装します。
「Stair」の一番右側に手すりを追加して、
※エディタ内でコピペできないのでPrefabを入れる所から始めます。
中央の手すりを選択後、「Consume On Attach」のチェックを外して
軸と座標とスケール値が違う手すりを出現させて
1回目と同じように座標を修正して
階段はこれで完成！チュートリアル動画の内容はこれで把握出来たと思います。
作ったダンジョンの全景を確認してみて「この場所気に入らない」とか出てくると思いますが、これは後にご紹介します。
最後に、動画と同じ流れになりますが、
一番最初に開いたダンジョンテーマを開いて確認すると先が見えてくるはず！
４．完成形をチェックする
今作ったテーマは既に保存されてるので、一度消します。（後からまた使う予定）
「Destroy Dungeon」をクリックして全部削除。
Dungeon Themes「Element 0」に、「CandyDungeonTheme」をバインドします。
ついでにダブルクリックして、エディタに開いておく。
ビルドしてシーンを確認
壁の窓には「カーテン」や「小物」が追加。棚や植木鉢など小道具も増えています。
さらにダンジョンを立体的に見せる柱も現れました。
ビルダーの設定は同じでも、テーマを変えるだけでガラリと見栄えが変わるのがDungeon Architectの凄いところ！
エディタもチェック
こんなに配置されていても、チュートリアルをやった方ならある程度わかると思います。
エミッタは同じ名前の所にワープしているだけで、
複数の小道具を付ける時に活用できます。
例えば「Wall」の窓枠の下に接続された「Window」エミッタ
こちらの「Window」と連結していて、カーテンと窓枠に乗っかる小物がぶら下がっている。確立のセットをすれば有り無しでバリエーションが増やせます。
別のデザインの「壁の窓枠」が仮にあったとして、
それも「Window」のエミッタに接続しちゃえば使い回しができるというわけです。
オマケ：マーカーエミッタの使い方
チュートリアル動画には無いけれどここで軽く紹介します。
１．エディタの空欄で右クリックメニューを開き、「Add Maker Node」を選択します。
２．名前を設定する。ここではWindowにしました。
３．するとマーカーノードが作られます。
４．「窓付き壁」の下からラインを出して、空欄で解除するとメニューが現れます。
そこで３で作ったWindowに接続するとマーカーエミッターと接続できます。
基礎編のチュートリアルはこれで終わりです！