Paper 2D Tile Sets / Tile Maps

Paper 2D で使用する Tile Sets と Tile Maps の作成方法の概要

Windows
MacOS
Linux

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

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

Tile Sets の作成

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

ブランクの Tile Set

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

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

    TileSetButton.png

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

    PaperTitleSet.png

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

    PaperTitleSetEditor.png

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

    TileSetData.png

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

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

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

    RightClickMethod.png

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

    AutoCreate.png

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

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

    CreatedTitleSet.png

Tile Set エディタ

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

TileSetEditorWindow.png

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

Tile Set の設定

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

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

DefaultSettings.png

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

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

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

CurrentlySelectedTile.png

この例は、Tile WidthTile 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. ビューポート (1) でタイルを選択して、コリジョン (2) で使用したい種類の形状をクリックします。

    Collision_1.png

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

    Collision_2.png

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

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

    Collision_3.png

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

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

Tile Maps の作成

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

Tile Map の作成

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

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

    NewTileMap.png

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

    NewPaperTileMap.png

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

    TileMapEditorWindow.png

Tile Map エディタ

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

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

    SelectTileSetWindow.png

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

    SelectTileSet.png

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

  2. [Tile Set] を選択すると、ビューアーは新しい選択内容で更新されます。

    TileMapReadyToEdit.png

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

TileMapEditorOverview.png

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

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

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

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

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

Collision_4.png

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

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

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

ShowCollision.png

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

Tile Map ワークフロー活用例

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

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

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

    SetMapSize.png

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

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

    TileSizesInMap.png

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

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

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

    ReadyToPaint.png

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

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

    BeginPainting.png

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

    MultipleTiles.png

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

    InMapMultipleTiles.png

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

    ExampleMap.png

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

    Collision_4.png

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

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

    ExampleGameImage.png

Select Skin
Light
Dark

Welcome to the new Unreal Engine 4 Documentation site!

We're working on lots of new features including a feedback system so you can tell us how we are doing. It's not quite ready for use in the wild yet, so head over to the Documentation Feedback forum to tell us about this page or call out any issues you are encountering in the meantime.

We'll be sure to let you know when the new system is up and running.

Post Feedback