Unreal Engine 5 ドキュメントは Epic Developer Community に移動しました

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

Tile Set を作成する

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

ブランクの Tile Set

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

1. コンテンツブラウザ で ボタンをクリックした後に [_Miscellaneous_] から [Tile Set] を選択します。

2. 新しい Tile Set アセットの名前を入力します。

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

4. [Details (詳細)] パネルで使用する Tile Sheet テクスチャアセットを指定します。

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

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

1. コンテンツ ブラウザ でテクスチャ アセットを 右クリック して、[ Sprite Actions ]で [Create Tile Set (Tile Set を作成)] を選択します。

2. Tile Set は同梱されている Texture に基づいて自動的に作成され名前が付けられます。

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

3. アセットを ダブルクリック して、 [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 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 (詳細)] パネルから以下の設定を使用することも出来ます。

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

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

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

1. ビューポート (1) でタイルを選択して、コリジョン (2) で使用したい種類の形状をクリックします。

2. 形状が適用されて、 [Tile Editor] ウィンドウで更なる編集が可能になります。

   編集中のタイル番号 (上図の黄色枠) を覚えておいてください。個々のタイルに設定を行う際に必要になります。

3. [Sprite] セクションの [Details (詳細)] パネルで選択したタイルを検索して、好きな Geometry Type (ジオメトリ タイプ) に変更します。

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

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

Tile Maps の作成

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

Tile Map の作成

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

1. コンテンツブラウザ で ボタンをクリックした後に [ Miscellaneous ] から [Tile Map] を選択します。

2. 新しい Tile Ma アセットの名前を入力します。

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

Tile Map エディタ

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

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

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

   ユーザーが作成した Tile Set はすべて上記のウィンドウに表示されます。ここで "Active Tile Set" との切り替えができます。

2. [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 にコリジョン ジオメトリの設定と物理ワールドへの参加を判断) を設定することができます。

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

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

Tile Map ワークフロー活用例

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

1. Tile Map アセットを開きます。

2. [Details (詳細)] パネルで、タイルマップの [Map Width] と [Map Height] を設定します。

   基本的にこれでマップまたはレベルのサイズを設定します。

3. マップの個々のタイルの [Tile Width] と [Tile Height] も設定します。

   通常は Tile Set に定義したサイズと同じになります。

4. Tile Map の構築と連携させる Active Tile Set を割り当てます。

5. 作業する追加のレイヤーもいくつか追加します (背景、前景、プレイ可能なレベル ジオメトリにそれぞれ 1 つ)。

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

6. ビューアーにタイルを選択して、マップにペイントするためにマップを 左クリック します。

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

   マップを選択したタイルでペイント可能になります。

7. マップ上でタイルのペイント、塗りつぶし、消去操作をして、好きなレイアウトにしてください。

8. [Details (詳細)] パネルの [Collision (コリジョン)] セクションで必ずコリジョンを有効にしてください。

   コリジョンを作業させるには、コリジョンを設定するタイルとしないタイルを Tile Set で指定しなくてはいけません。

9. Tile Map アセットをレベルにドラッグして、必要に応じてスケールしたり移動させてください。