Paper 2D Tile Sets / Tile Maps | Unreal Engine 4.27 ドキュメンテーション

このページで紹介する機能は、ある側面が完全にサポートされていない機能など、現時点では開発の experimental stage にある場合があります。

Paper 2D プラグインに内蔵されている Tile Sets と Tile Maps は、フレームワークのレイアウトや 2D レベルの「一般的なレイアウト」を迅速かつ簡単な方法で作成します。 Tile Map (タイルに幅と高さが定義されている 2D グリッド) と一緒に Tile Set を作成して使用することにより（テクスチャから取り出したタイルのコレクション）、レベルレイアウトに使用できる Tile Map 上に「ペイント」するさまざまなタイルを選択することができます。特定のレイヤーごとに、マップのどのセルにどのタイルを表示するか指定して、複数のレイヤー上でタイルをペイントすることもできます。

Tile Set を作成する

その他のアセット同様に、コンテンツブラウザ 内に Tile Set を作成することも出来ます。ブランクアセットとしてゼロから作成、他の既存アセットから作成することができます。

ブランクの Tile Set

ブランクの Tile Set アセットの作成方法:

コンテンツブラウザ でボタンをクリックした後に [Miscellaneous] から [Tile Set] を選択します。
新しい Tile Set アセットの名前を入力します。
アセットを ダブルクリック して、[Tile Set Editor] ウィンドウでこのアセットを開きます。
[Details (詳細)] パネルで使用する Tile Sheet テクスチャアセットを指定します。

テクスチャアセットから Tile Set を作成する方法

既存のテクスチャアセットから Tile Set を作成する方法

コンテンツブラウザ でテクスチャアセットを 右クリック して、[ Sprite Actions ]で [Create Tile Set (Tile Set を作成)] を選択します。
Tile Set は同梱されている Texture に基づいて自動的に作成され名前が付けられます。

アセットの名前を変更するには、アセットを選択しながら F2 、またはアセットを 右クリック して [Rename (名前を変更)] を選択します。

アセットを ダブルクリック して、[Tile Set Editor] ウィンドウでこのアセットを開きます。

Tile Set エディタ

新規作成した Tile Set アセットを ダブルクリック すると、Tile Set エディタ でこのアセットが開きます。

ビューポート ウィンドウ (1) の上に Tile Set と使用を指定した Tile Sheet が表示されます。[Tile Editor] ウィンドウ (2) には現在選択中のタイルが表示されます。[Details (詳細)] パネル (3) に、 Tile Set や個々のスプライトに影響を与えるさまざまな設定値を設定することができます (以下の Configuring Your Tile Set を参照)。

Tile Set の設定

シートで各タイルが正確に選択されるように Tile Set を設定する必要のある確率が高いです。

ビューポート 内で Tile Sheet を 左クリック すると、現在選択されているタイルを示す白いタイル選択枠が表示されます。

マウスの右ボタン をビューポート内にドラッグするとパンして、Tile Sheet をズームイン/アウトするには マウスホイール を使用します。

上図は使用中の [Tile Width] と [Tile Height] (ピクセル単位) のデフォルト値 32 を白い選択枠で表しています。残念ながら設定したタイルはデフォルト値より大きいので、タイル全体を囲むように [Tile Width] と [Tile Height] を設定します (黄色いアウトラインで表示)。

Tile Editor のプレビューウィンドウには現在選択中の Tile とこのタイルに関連する Tile Number (下記参照) が表示されます。この真下に表示される [Details (詳細)] パネルで、タイル全体をきちんと包囲するために Tile Width と Tile Height を調整します。

この例は、Tile Width と Tile Height の値を 64 に増やしてタイルサイズと一致させています。

フルサイズで表示するには画像をクリック

ビューポートで、白いタイルの選択枠が Tile Sheet の個別タイル全体をハイライトします (Tile Sheet の設定によって別の値を試してみてください)。Tile Sheet で選択したタイルを 1 つ表示するために、タイルエディタのウィンドウも更新されます。

Tile Width と Tile Height の設定に加えて、Tile Set をさらに調整するために [Details (詳細)] パネルから以下の設定を使用することも出来ます。

設定	説明
Tile Width	単一タイルの幅 (ピクセル単位)。
Tile Height	単一タイルの高さ (ピクセル単位)。
Margin	タイルシート周辺のパディング量 (ピクセル単位)。
Spacing	シートのタイル間のパディング量 (ピクセル単位)。
Drawing Offset	このセットのタイルの描画オフセット (ピクセル単位)。
Background Color	タイルセットビューアーに表示される背景カラー。

タイルごとの設定 / タイルコリジョンの適用

さらに [Details (詳細)] パネルで、タイルごとに設定ができます (特定のタイルにコリジョンを適用する、など)。

タイルにコリジョンを適用する方法:

ビューポート (1) でタイルを選択して、コリジョン (2) で使用したい種類の形状をクリックします。
形状が適用されて、[Tile Editor] ウィンドウで更なる編集が可能になります。

編集中のタイル番号 (上図の黄色枠) を覚えておいてください。個々のタイルに設定を行う際に必要になります。
[Sprite] セクションの [Details (詳細)] パネルで選択したタイルを検索して、好きな Geometry Type (ジオメトリタイプ) に変更します。

スプライトコリジョンタイプに関する詳細は、スプライトコリジョン ページを参照してください。

指定したジオメトリタイプと使用した形状をもとに、コリジョンに対してこのタイルを設定します。ゲーム内に設定を反映させるには、Tile Map の作成時に Sprite Collision Domain を設定する必要があります (以下の Tile Map (タイルマップ) 使用/作成方法を参照)。

Tile Maps の作成

Tile Maps は コンテンツブラウザ で作成して、Tile Map Editor 内で編集します。

Tile Map の作成

新規の Tile Map アセットを作成:

コンテンツブラウザ でボタンをクリックした後に [ Miscellaneous ] から [Tile Map] を選択します。
新しい Tile Ma アセットの名前を入力します。
アセットを ダブルクリック して、[Tile Map Editor] ウィンドウでこのアセットを開きます。

Tile Map エディタ

新規の Tile Map アセットを開いた後は、Tile Map エディタで作業を開始する前に、連携させる Active Tile Set を割り当てなくてはいけません。

[Selection (選択)] ボックスをクリックして、[Toolbox] ウィンドウで使う Active Tile Set を指定できます。

作業対象にする Tile Set を選択します。

ユーザーが作成した Tile Set はすべて上記のウィンドウに表示されます。ここで "Active Tile Set" との切り替えができます。
[Tile Set] を選択すると、ビューアーは新しい選択内容で更新されます。

Tile Map エディタを構成する 3 つのウィンドウの概要は以下の通りです。

上記の [Toolbox] ウィンドウ (1) で、Tile Map の作成に使用するさまざまな Tile Sets の切り替えができます。マップ上でタイルを ペイント、消去、塗りつぶし するツールもあります (選択中のタイルのフリップおよび回転オプションの他に)。このウィンドウのボタンセクションには、ナビゲーションに Tile Set ビューアーと同じコントロールを使用するビューアーが含まれています。(マウスの右ボタン をビューポート内にドラッグするとパンして、ズームイン/アウトするには マウスホイール を使用します。)。

中央ウィンドウの Viewport (2)は、マップレイアウトの書き込みに使用します。ツールボックスのツールを使うと、タイルマップを構成するタイルのペイント、消去、塗りつぶしによってタイルを埋めて、好きなエフェクトを作成することができます。インゲームで表示するマップと同じものをここで「ペイント」できます。

[Details (詳細)] パネル (3) で、 Tile Map を構成するレイヤーの数や、 Tile Map の幅/高さ、マップを構成するタイルの幅/高さ、ピクセルとアンリアル単位のスケーリング係数、使用するコリジョンのタイプなどさまざまな設定の調整を行うことができます。

タイルマップのコリジョンを有効にする

『Tile Set』セクションでお分かりのように、コリジョンを使用するタイルとそうでないタイルを指定したら、Tile Map にもコリジョンタイプを使用する設定にしてく必要があります。[Details (詳細)] パネルの [Collision] セクションで設定ができます。

コリジョンの厚さに加えて (3D コリジョンドメインを使用時のコリジョンジオメトリの押し出しの厚み)、コリジョンドメイン自体 (Tile Map にコリジョンジオメトリの設定と物理ワールドへの参加を判断) を設定することができます。

[Use 2D Physics] オプションは、現時点で実験的であるため正しく機能しない可能性があります。このオプションの代わりに [Use 3D Physics] オプションの使用を推奨しています。

レベルでプレイする時に、[Show Collision (コリジョンを表示)] コンソールコマンドでコリジョンが設定されているタイルと設定されていないタイルをチェックすることができます。

プレイヤーが歩く一番上のグラウンドタイルにはコリジョンが設定されていますが、下のグラウンドや水のタイルには設定されていません。

Tile Map ワークフロー活用例

以下は、Tile Map で通常使用する作成ワークフロー活用例です。

Tile Map アセットを開きます。
[Details (詳細)] パネルで、タイルマップの [Map Width] と [Map Height] を設定します。

基本的にこれでマップまたはレベルのサイズを設定します。
マップの個々のタイルの [Tile Width] と [Tile Height] も設定します。

通常は Tile Set に定義したサイズと同じになります。
Tile Map の構築と連携させる Active Tile Set を割り当てます。
作業する追加のレイヤーもいくつか追加します (背景、前景、プレイ可能なレベルジオメトリにそれぞれ 1 つ)。

これはオプショナルですが、プレイヤーが配置された別々のレイヤーを歩き回ることができるように、一般的に背景、前景エレメントとレベルジオメトリ (グラウンド、ボックス、プラットフォームなど) を設定するのが良いとされています。
ビューアーにタイルを選択して、マップにペイントするためにマップを 左クリック します。

ビューアーで 左クリック しながらタイルへドラッグすると、一度に複数のタイルを選択してマップに複数のタイルをペイントすることができます。

マップを選択したタイルでペイント可能になります。
マップ上でタイルのペイント、塗りつぶし、消去操作をして、好きなレイアウトにしてください。
[Details (詳細)] パネルの [Collision (コリジョン)] セクションで必ずコリジョンを有効にしてください。