タイルマップの使用

はじめに

タイルマップは、タイルを枡目状に並べてゲームのレイアウトを作成するために使用します。TileMap ノードでレベルを設計することには、いくつかの利点があります。 1つは、タイルを枡目状に「ペイント」することでレイアウトを描画できるようにすることです。これは、個々の Sprite ノードを1つずつ配置するよりもはるかに高速です。第二に、多数のタイルを描画するために最適化されているため、はるかに大きなレベルが可能です。最後に、コリジョン、オクルージョン、ナビゲーションシェイプをタイルに追加して、TileMapに機能を追加できます。

../../_images/tileset_draw_atlas.png

プロジェクトの設定

このデモでは、Kenneyの "Abstract Platformer" アートパックから取得した次のタイルを使用します。ここで 完全なセットを見つけることができますが、このデモではこの小さなセットを使います。

../../_images/tilesheet.png

新しいプロジェクトを作成し、プロジェクトフォルダに上記の画像を配置します。

タイルセットを使用する場合、隣接するタイルが一致することが重要です。 Godotのデフォルトでは、補間された "Filter" モードを使用して2D画像をインポートします。これにより、タイル間の境界が見苦しくなります。画像を選択し、[インポート]タブをクリックします。Filter をオフにして、[再インポート]をクリックします。詳細については、イメージのインポート を参照してください。

TileMap ノード

シーンに新しい TileMap ノードを追加します。デフォルトでは、TileMapはタイルの正方形グリッドを使用します。パースペクティブベースの "Isometric" モードを使用したり、独自のカスタムタイル形状を定義することもできます。

../../_images/tilemap_mode.png

インスペクタの "Cell" セクションに、タイルマップの動作をカスタマイズするために調整できる多くのプロパティがあります:

../../_images/tilemap_size.png
  • Cell Size
    これで、グリッドのサイズを定義します。タイルのピクセルサイズと一致させる必要があります。デフォルト値は (64, 64) です。
  • YSort
    これにより、タイルが Y 位置の順に描画されるため、「低い」タイルが「高い」タイルの上に描画されます。
  • Half OffsetTile Origin
    これらのプロパティは、グリッドの位置に対するタイルの位置に影響します。
  • Quadrant
    バッチ描画に使用されるチャンクサイズを定義します。これはパフォーマンスに悪影響を及ぼす可能性があります。何をしているか分からない限り、変更しないでください。
  • Custom Transform
    タイルの形状を変更するために使用されます。正方形でないタイルがある場合にこれを使用します。

これらのオプションはすべて、このデモのデフォルトのままにしておくことができます。

タイルセットの作成

タイルマップを構成したら、TileSetを追加します。TileSet は、タイルに関するデータ(テクスチャ、衝突形状、その他のプロパティ)を含む Resource です。ゲームを実行すると、TileMapは個々のタイルを1つのオブジェクトに結合します。

新しいTileSetを追加するには、「Tile Set」プロパティをクリックして、「新規 TileSet」を選択します。

../../_images/tilemap_add_tileset.png

すると、エディタウィンドウの下部に「TileSet」パネルが開きます。

../../_images/tilemap_tool.png

最初に、タイルに使用するテクスチャを追加する必要があります。"Add Texture(s) to TileSet" ボタンをクリックして、tilesheet.png 画像を選択します。

次に、"New Single Tile" をクリックし、画像内にドラッグして目的のタイルを選択します。 [スナップを有効にする]ボタンをクリックして、タイル全体を選択しやすくします。選択したタイルの周りに黄色の長方形が表示されます。

../../_images/tilemap_add_tile.png

シーンツリーでTileMapをクリックすると、新しく作成されたタイルが右側に表示されることがわかります。ビューポートをクリックすると、タイルを配置できます。右クリックしてそれらを削除します。

../../_images/tilemap_draw.png

誤ってタイルマップノードを選択して移動してしまうことがあります。これを回避するには、ノードのロックボタンを使用します:

../../_images/tile_lock.png

コリジョン形状

壁、床、またはその他の障害物などの衝突を必要とするマップを作成している場合は、「ソリッド」と見なされるタイルに衝突形状を追加する必要があります。

エディタウィンドウの下部にある "TileSet" をクリックして、タイルセットツールに戻ります。以前に定義したタイルをクリックします(黄色のアウトライン)。 "Collision" タブを選択し、"Create a new rectangle" ボタンをクリックします。グリッドスナップが有効になっていることを確認してから、タイルをクリックしてドラッグします。正方形の衝突形状が水色で表示されます:

../../_images/tileset_add_collision.png

同じ方法で、オクルージョンとナビゲーションシェイプをタイルに追加できます。

アトラスタイル

個々のタイルを1つずつ追加するのではなく、アトラスを使用してタイルのグループを一度に定義できます。"New Atlas" をクリックし、ドラッグしてタイルシート全体を選択します。

../../_images/tileset_atlas.png

まだ設定していない場合は、スナップ設定の "Step" を (64, 64) に変更してください。変更しないと、タイルが細かく切り刻まれます。これはインスペクタで見つけることができます:

../../_images/tileset_snap.png

アトラスを定義したら、以前と同様に個々のタイルに衝突形状を追加できます。 "Icon" をクリックして、アトラスを表すタイルの1つを選択することもできます。

TileMapに戻って、アトラスタイルを選択すると、そこに含まれるすべてのタイルが表示されます。

../../_images/tileset_draw_atlas.png

これは、タイルを定義するときの時間を節約することに加えて、多数のタイルで作業しているときに類似のタイルをグループ化することで役立ちます。

ヒントとテクニック

  • Camera2D を使用してレベルをスクロールしている場合、タイル間に線が表示される場合があります。これを修正するには、プロジェクト設定を開き、"Rendering/Quality" セクションで "Use Pixel Snap" を有効にします。
  • エディタの右上にあるアイコンを使用して、タイルを反転および回転できます。
  • To draw straight lines, hold Shift while clicking and dragging a tile.
  • コピー、貼り付け、バケット塗りつぶしなどのツールは、右上の "TileMap" メニューにあります。
../../_images/tilemap_menu.png