概要

本記事では、SideFXが公開している GAME JAM STARTER KIT から LEVEL FROM PSD を Unreal Engine を使って解説します。

GAME JAM STARTER KIT のダウンロードはこちらから：
https://www.sidefx.com/ja/tutorials/game-jam-starter-kit/

このツールを使用すると、Photoshop PSD ファイルを使用したレベル生成が可能です。 これにより、オブジェクトを配置できるスペースと、スペースを分割する壁が作成され、ジオメトリを設定して建物を作成できます。

 

ツールの使い方

最初にツールをロードすると、パラメータは展開されますがシーンには何も表示されません。
PSD ファイルを入力していないためです。

パラメータの一番上にある File に PSD ファイルへのパスを入力します。

Layers タブに移動します。
Layers to Extract が 4 になっていますが、一度すべてを削除して、新しく作り直します。

右端のゴミ箱のマークをクリックし、レイヤーを 0 にします。
そのあと+マークをクリックし、新しいレイヤーを一つ準備します。

PSD ファイルに移動します。
画像はレベル構築に必要なレイアウトで、最低限かつ固有のレイヤーで構成されています。

Layout はその通りゲームマップのレイアウトを決めます。
この名前は Unreal でプラグインに利用するため、命名は慎重に行います。
Props はマップに散乱しているオブジェクトの配置を制御するレイヤーです。

今回はこの二つのレイヤーのみを使います。

PSD の各レイヤーの名前を確認したら、Layer Name 1 に レイアウトの名前を入力します。

シーンを確認すると、レイアウトに沿って立方体が散乱します。

Method から Scatter Models を Add Houses に変更すると、

立方体の散乱の代わりに家のジオメトリを配置できます。

Method の下に Advanced オプションがあり、家のモデルをさらに細かく調整できます。
Seed で配置に乱数を加えます。
Scalce Min, Max で家の大きさの最大値と最小値を制御します。マップ全体で高い家を作りたい場合や平たい家を作りたい場合に調整ができます。

Final Building にチェックを入れると、家のジオメトリに壁と窓を付け最終的な家を作ることができます。

レイアウトからマップを作れたので、PSD の他のレイヤーからも情報を取得します。

Layers To Extract の最後の＋を押して 2 にして、新しく作った Layer Name に Props と入力します。

しばらく待つとマップの広間に立方体が配置されます。
これも他と同様にシード値やスケール、ランダム回転のパラメータを持ちます。

レイアウトと小物のレイヤーを入力したため、PSD に戻って画像を変更し、その変更がマップに反映されるのを確認します。

photoshop に入り、レイアウトレイヤーを選択した状態で画像を修正します。
新しいレイヤーで書き足すのではなく、既存のレイアウトレイヤーに修正をします。

Unreal に戻り、Reload PSD をクリックします。

右下の部分が変更した場所ですが、削除した空間や追加した通路が正確に反映されているのが確認できます。
Props は PSD 通りにマップに配置され、レイアウトの外に出たものはシーンに表示されません。

Layers から Building Instances に変更し、家のモデルにオプションを足します。

Amount different houses の変更で、マップの家をランダムに分類します。
デフォルトでは 0 になっていますが、例えばこの値を 2 とすると、

家を灰色と紫の二種類に分け、視覚的に分類することができます。
家の数や高低差によって分類させる数を変えると有効です。

次に、壁のモデルを Unreal で用意した独自のもので表現します。

Engine を Unreal にします。
Unity で開発している方は Unity にします。

すると、壁が消えて天板のみが表示されます。
まだ Unreal の壁モデルを認識させていないため、壁が表示されません。

Engine を None から変えたことで、Building Instances の中に Asset Path のパラメータが増えています。
Amount different houses が 2 なので、入力できるパスが二つ用意されています。

用意した壁のモデルを右クリックし、Copy Referene をクリックしてモデルへのパスをコピーします。

パスを入力すると、先ほど灰色と紫で分類したうちの一方の壁にモデルが適用されます。

両方のモデルを適用させたものです。

Amount different houses を増やせば、ほかの色もしくは形の家を作ることができます。

Houdini Instanced Inputs からパラメータを展開します。

＋をクリックすると、それぞれのモデルに別のインスタンスを追加できます。

二つ目のインスタンスを用意し、赤いモデルをドラッグします。

すると青い壁の一部が赤い壁に置き換わっているのが確認できます。
色が違う、サイズが一致していないなどの理由で境界にノイズが入ることがあります。

上では赤い壁を二つ目のインスタンスとして追加しましたが、例えばこれが青く窓がない壁にすると、建物は青い壁のままで一部が窓がないなどに変更することができます。

Engine を None 以外にしたことで、散乱するオブジェクトを自分で指定できるようになります。
Layers タブの一番下にオブジェクトを入力する部分が増えているので、

用意したオブジェクトのパスを入力して、

立方体の代わりに豚の頭が配置されたのが確認できます。
シード値やランダム回転などでバリエーションを持たせることもできます。

PSD ファイルからマップのレイアウトを読み取り、街や都市を構築することができました。
PSD の変更はそのまま Unreal に反映され、また自分で用意したモデルを使ってマップを作ることもできます。
ランダム値やインスタンス等でパターンを増やし、様々なバリエーションを試すこともできます。