タイルセットの使用

はじめに

A tilemap is a grid of tiles used to create a game's layout. There are several benefits to using TileMapLayer nodes to design your levels. First, they let you draw a layout by "painting" tiles onto a grid, which is much faster than placing individual Sprite2D nodes one by one. Second, they allow for larger levels because they are optimized for drawing large numbers of tiles. Finally, they allow you to add greater functionality to your tiles with collision, occlusion, and navigation shapes.

To use TileMapLayer nodes, you will need to create a TileSet first. A TileSet is a collection of tiles that can be placed in a TileMapLayer node. After creating a TileSet, you will be able to place them using the TileMap editor.

このガイドでは、すべてのタイルが同じサイズ(大きなオブジェクトは複数のタイルに分割できます)になっているタイルが描かれた画像が必要になります。このような画像は tilesheet と呼ばれます。タイルは必ずしも正方形である必要はありません: 長方形や六角形、あるいはアイソメトリック(疑似3Dパース)も可能です。

新規タイルセットの作成

タイルシートを使用する

このデモでは、Kenneyの "Abstract Platformer" アートパック <https://kenney.nl/assets/abstract-platformer>`__ から取得した以下のタイルを使用します。このセットから特にこの タイルシート を使います:

64×64 タイルによるタイルシート。引用: Kenney

Create a new TileMapLayer node, then select it and create a new TileSet resource in the inspector:

Creating a new TileSet resource within the TileMapLayer node

TileSetリソースを作成したら、値をクリックしてインスペクタで展開します。デフォルトのタイル形状は正方形ですが、アイソメトリック、半分ずらした正方形、六角形を選択することもできます(タイル画像の形状によって異なります)。正方形以外のタイル形状を使用する場合は、 Tile Layout と Tile Offset Axis プロパティも調整する必要があるかもしれません。最後に、タイルをタイル座標でクリッピングしたい場合は、 Rendering > UV Clipping プロパティを有効にすると便利です。これにより、タイルはタイルシート上の割り当てられた領域の外には描画できなくなります。

タイルシートの例に合わせて、インスペクタでタイルのサイズを64×64に設定します:

タイルシートの例に合わせてタイルのサイズを64×64に設定

If relying on automatic tiles creation (like we're about to do here), you must set the tile size before creating the atlas. The atlas will determine which tiles from the tilesheet can be added to a TileMapLayer node (as not every part of the image may be a valid tile).

エディタ下部の TileSet パネルを開き、タイルシート画像をパネルにクリック＆ドラッグしてください。タイルを自動で作成するかを聞かれるので、 Yes と答えてください:

タイルシート画像の内容を基にタイルが自動作成される

これで先ほどタイルTileSetリソースで指定したタイルサイズに従って自動でタイルが作成されます。タイルの初期設定がこれで大きくスピードアップします。

注釈

画像の内容を基に自動タイル生成をする時、タイルシートの 完全に 透明な部分ではタイル生成は行われません。

タイルシートにアトラスに存在させたくないタイルがある場合、タイルセットプレビューの上部にある消しゴムツールを選択し、削除したいタイルをクリックします:

消しゴムツールを使い不要なタイルをタイルセットアトラスから除去

タイルを右クリックして 削除 を選択することも、消しゴムツールの代わりになります。

Tip

2DエディターやTileMapエディターと同様に、マウスの中ボタンや右ボタンでTileSetパネルをパンしたり、マウスホイールや左上のボタンでズームすることができます。

1つのタイルセットに複数のタイルシート画像からタイルを供給したい場合は、続ける前に、追加のアトラスを作成してそれぞれにテクスチャを割り当ててください。この方法でタイルごとに1つの画像を使用することも可能です(ただし、より使いやすくするためにタイルシートを使用することをお勧めします)。

中央の列でアトラスのプロパティを調整できます:

専用インスペクタ(TileSetパネルの一部)でTileSetアトラスのプロパティを調整

アトラスには以下のプロパティを設定できます:

• ID: 識別子(タイルセットの中でユニークな値)、ソートに使われます。

• 名前 アトラスの人間が判読可能な名前。整理のため、説明的な名前を使ってください(例えば "terrain" (地形)、 "decoration"(装飾) などのような)。

• Margins: 画像の端からどこまでがタイルに選ばれないようにするかのマージン(ピクセル単位)。これを大きくすると端に余白があるタイルシート画像をダウンロードした時に便利です(例えばクレジット付きの画像など)。

• 間隔: アトラス内のそれぞれのタイル間の距離。ピクセル単位。これを大きくするとガイド要素(例えばタイルの間に輪郭があるなど)があるタイルシート画像を使う場合に便利かもしれません。

• Texture Region Size: The size of each tile on the atlas in pixels. In most cases, this should match the tile size defined in the TileMapLayer property (although this is not strictly necessary).

• Use Texture Padding: 有効化すると、各タイルの周囲に1ピクセルの透明なエッジを追加され、フィルタリングが有効になっているときのテクスチャのにじみを防ぎます。テクスチャパディングによるレンダリングの問題が発生しない限り、これを有効のままにすることをお勧めします。

注意: Texture margin、間隔、Region size を変更すると、タイルが一部失われる可能性があります(これによってタイルがアトラス画像の外側の座標に配置されるため)。タイルシートからタイルを自動的に再生成するには、TileSetエディタの上部にある縦3点メニューボタンを使い、 不透明なテクスチャ領域にタイルを作成 を選択します:

アトラスのプロパティを変更した後にタイルを自動再生成

シーンのコレクションを使用する

Godot 4.0からは、 シーン そのものをタイルとして設置することができます。これによってどのようなノードもタイルとして扱うことができます。例えば、シーンタイルを使えばプレイヤーがインタラクトするショップのようなゲーム要素をタイルに並べることができます。また、 AudioStreamPlayer2D (環境音に)、パーティクルエフェクトなども並べられます。

警告

シーンタイルは使われた全てのシーンが別々にインスタンス化されて設置されるので、アトラスタイルよりも処理のオーバーヘッドが大きくなります。

It's recommended to only use scene tiles when necessary. To draw sprites in a tile without any kind of advanced manipulation, use atlases instead.

For this example, we'll create a scene containing a CPUParticles2D root node. Save this scene to a scene file (separate from the scene containing the TileMapLayer), then switch to the scene containing the TileMapLayer node. Open the TileSet editor, and create a new Scenes Collection in the left column:

TileSetエディタでシーンコレクションを作成

シーンコレクションを作った後。必要なら中央の列で分かりやすい名前を入力できます。シーンコレクションを選択して、新しくシーンスロットを作ります:

TileSetエディタでシーンコレクションを選択した後、シーンタイルを作成

シーンスロットは右の列から選択します。そして クイックロード (または ロード) をしてパーティクルが入っているシーンファイルをロードします:

TileSetエディタでシーンスロットを作成し、シーンファイルをロード

これでTileSetにシーンタイルができました。TileMapエディタに移れば、シーンコレクションからこれを選択したり、他と同じようにペイントしたりできます。

複数のアトラスを一つのアトラスに統合する

複数のアトラスを一つのタイルセットリソースで使っていると、便利な場合もありますが、状況によっては(特にタイル1つにつき1画像を使っている場合)面倒な場合もあります。Godotではそれぞれのアトラスを一つに統合して、より整理しやすくできます。

そうするには、TileSetリソースの中に複数のアトラスを作成する必要があります。アトラスリストの下にある縦3点メニューボタンを使い、アトラスのマージツールを開く を選びましょう:

複数のアトラスを作成しアトラスのマージツールを開く

これでダイアログが開きます。ここでは Shift や Ctrl を押しながら複数の要素をクリックすることで、複数のアトラスを選択できます。

アトラスマージツールの使用

マージ を選ぶと選択したアトラスが一つのアトラス画像に統合されます(タイルセットの中で1つのアトラスとして扱われるということです)。統合されていないアトラスはタイルセットから除外されますが。 元のタイルシート画像はファイルシステムの中に保持されています 。統合されていないアトラスがTileSetリソースから除去されないようにしたい場合、 マージ(元のアトラスを保持) を代わりに選びましょう。

Tip

TileSetにはタイルプロキシのシステムが搭載されています。タイルプロキシはマッピングテーブルであり、指定されたTileSetを使用するTileMapに対して、あるタイル識別子のセットを別のものに置き換える必要があることを通知する役割を持ちます。

タイルプロキシは、異なるアトラスをマージする際に自動的に設定されますが、上記で説明した "縦3点" のメニューからアクセスできる タイルプロキシの管理 ダイアログから手動で設定することもできます。

タイルプロキシを手動で作成することは、アトラスのIDを変更した場合や、あるアトラスのタイルを別のアトラスからのタイルですべて置き換えたい場合に便利です。なお、TileMapを編集する際には、すべてのセルを対応するマッピングされた値に置き換えることができます。

コリジョン、ナビゲーション、そしてオクルージョンを追加する

We've now successfully created a basic TileSet. We could start using it in the TileMapLayer node now, but it currently lacks any form of collision detection. This means the player and other objects could walk straight through the floor or walls.

2D navigation を使う場合、経路探索エージェントが使うナビゲーションメッシュが必要なので、これを生成するためにタイルにナビゲーションポリゴンも定義する必要があります。

最後に、 2Dライトとシャドウ またはGPUParticles2Dを使う場合、TileSetに影を落とさせたりパーティクルとコリジョンさせたりしたい場面があるかもしれません。このためには、TileSet上でこのような動作をさせたい "solid" なタイルに、オクルーダーポリゴンを定義する必要があります。

To be able to define collision, navigation and occlusion shapes for each tile, you will need to create a physics, navigation or occlusion layer for the TileSet resource first. To do so, select the TileMapLayer node, click the TileSet property value in the inspector to edit it then unfold Physics Layers and choose Add Element:

Creating a physics layer in the TileSet resource inspector (within the TileMapLayer node)

ナビゲーションもサポートしたいなら、今がナビゲーションレイヤーを作るのにちょうどいいタイミングです:

Creating a navigation layer in the TileSet resource inspector (within the TileMapLayer node)

光のポリゴンオクルージョンもサポートしたいなら、今がオクルージョンレイヤーを作るのにちょうどいいタイミングです:

Creating an occlusion layer in the TileSet resource inspector (within the TileMapLayer node)

注釈

このチュートリアルの今後の手順はコリジョンポリゴンの作成に合わせたものですが、ナビゲーションとオクルージョンの手順は非常に似ています。それぞれのポリゴンエディタは同じように動作するので、簡潔にするためにこれらの手順は繰り返しません。

唯一の注意点は、タイルのオクルージョンポリゴンのプロパティはアトラスインスペクタの レンダリング サブセクションの一部になっていることです。ポリゴンを編集できるように、必ずこのセクションを展開してください。

物理レイヤーを作成すると、TileSetアトラスインスペクタの Physics Layer セクションにアクセスできるようになります:

選択モードからコリジョンエディタを開く

TileSetエディターにフォーカスしているときに F を押すと、矩形のコリジョンシェイプを素早く作成することができます。キーボードショートカットが効かない場合は、ポリゴンエディタの周りの何もないところをクリックしてフォーカスしてみてください:

F を押してデフォルトの矩形コリジョンを使用

このタイルコリジョンエディタでは、すべての2Dポリゴン編集ツールを使用できます:

• ポリゴンの上にあるツールバーから、新しいポリゴンの作成、既存のポリゴンの編集、ポリゴン上の点の削除を切り替えます。 "縦3点" メニューボタンからは、ポリゴンの回転や反転などの追加オプションが選べます。

• 2点間の線をクリック＆ドラッグし、新しい点を作成します。

• 右クリックで点を削除します(上部の削除ツールを使っているなら左クリック)。

• エディター内で中クリックまたは右クリックでパンします。(右クリックによるパン操作は、近くに点がない場所でのみ使用できます。)

デフォルトの矩形シェイプを使って、点の1つを削除することで、三角形のコリジョンシェイプを素早く作成することができます:

コーナーの1つを右クリックして削除して、三角形のコリジョンシェイプを作成

また、長方形をベースにさらに点を追加することで、より複雑な形状を作ることもできます:

複雑なタイル形状のカスタムコリジョンを描画

Tip

大きなタイルセットを持っている場合、各タイルのコリジョンを個別に指定すると、多くの時間がかかることがあります。特に、TileMapには共通のコリジョンパターン(ソリッドブロックや45度の斜面など)を持つタイルが多く存在する傾向があるため、この傾向が顕著です。複数のタイルに同じようなコリジョン形状を素早く適用するには、 一度に複数のタイルにプロパティを割り当てる 機能を使います。

タイルセットのタイルにカスタムメタデータを割り当てる

各タイルごとに カスタムデータレイヤー を使用して独自のデータを割り当てることができます。これにより、プレイヤーが触れたときにタイルが与えるダメージや、タイルが武器で破壊可能かどうかといった、ゲーム固有の情報を保存するのに役立ちます。

データは TileSet 内のタイルに関連付けられており、つまり配置されたタイルのすべてのインスタンスが同じカスタムデータを使用します。異なるカスタムデータを持つタイルのバリエーションを作成する必要がある場合は、 代替タイルを作成する を参照し、代替タイルだけでカスタムデータを変更することで対応できます。

Creating a custom data layer in the TileSet resource inspector (within the TileMapLayer node)

ゲーム固有のプロパティを持つカスタムデータレイヤーの設定例

既存のメタデータを壊すことなく、カスタムデータを並べ替えることができます: カスタムデータプロパティを並べ替えると、TileSet エディタは自動的に更新されます。

With the custom data layers example shown above, we're assigning a tile to have the damage_per_second metadata set to 25 and the destructible metadata to false:

選択モードの中でTileSetエディタによるカスタムデータの編集

Tile property painting はカスタムデータにも使えます:

TileSetEditor内でプロパティペイントによるカスタムデータの割り当て

地形セットを作成する(自動タイリング)

注釈

この機能はGodot 3.xでは 自動タイル として別の形式で実装されていました。地形は自動タイルのより強力な代替機能です。地形は自動タイルとは異なり、1つのタイルに複数の地定義できるので、ある地形から別の地形への遷移をサポートしています。

オートタイルがある種のタイルであった以前とは異なり、地形はただアトラスタイルに割り当てられたプロパティのセットに過ぎません。これらのプロパティは専用のTileMapペインティングモードで使用されます。このモードでは地形データを備えるタイルをスマートな方法で選択できます。つまり、地形タイルは地形としてペイントすることも、他のタイルと同じように1つのタイルとしてペイントすることもできるということです。

一般的に、"洗練された" タイルセットには足場や床などの角や縁に使えるタイルのバリエーションが含まれています。これらは手動で配置することもできますが、すぐに面倒になります。レベルをプロシージャルに生成するとしても、このような配置を扱うのは難しく長いコードを必要とします。

Godot offers terrains to perform this kind of tile connection automatically. This allows you to have the "correct" tile variants automatically used.

地形はいくつかの terrain sets にグループ分けされています。terrain set はそれぞれ Match Corners and Sides 、 Match Corners 、そして Match sides に割り当てられます。これらは terrain sets の中で、地形が他の地形とどのようにマッチするかを定義しています。

注釈

上記のモードは以前Godot 3.xで使われていたビットマスクモードの自動タイルに対応しています: 2×2、 3×3、そして 3×3 minimal 。 これは Tiled エディターの機能にも似ています。

Select the TileMapLayer node, go to the inspector and create a new terrain set within the TileSet resource:

Creating a terrain set in the TileSet resource inspector (within the TileMapLayer node)

Terrain set を作成した後は、 必ず 地形を1つ以上 terrain set の 中に 作成してください:

Terrain set の中に 地形を作成

TileSet エディタで、 選択モードを選んでタイルをクリックします。中央の列で Terrains を展開して terrain set ID と terrain IDをタイルに割り当ててください。 -1 は "terrain set 無し" や "terrain 無し" を意味し、つまり Terrain を0以上に設定するには Terrain Set を0以上にする必要があります。

注釈

Terrain set IDとterrain IDは互いに独立しています。また、これらは 1 からではなく 0 から始まります。

TileSetエディタの選択モードでタイルに地形を設定

こうすると、 Terrain Peering Bits セクションが中央列に表示されるので、そこで設定することができます。 Peering bits は隣接するタイルに応じてどのタイルを配置するか決定します。 -1 は特別な値で、何もない空間を指します。

例えば、タイルのすべてのビットが 0 以上に設定されている場合、隣接する8つのタイルすべてが同じ terrain ID のタイルを使用している場合にのみ表示されます。タイルの中央ビットが 0 以上で、かつ左上、上、右上のビットが -1 に設定されている場合、そのタイルの上に（斜めも含めて）何もないスペースがある場合のみ表示されます。

TileSetエディタの選択モードでタイルに terrain peering bits を設定

タイルシートのフル設定例は以下のようになります:

横スクロールゲームのタイルシートフル設定例

横スクロールのタイルシートフル設定で terrain peering bits を可視化した例

プロパティを複数のタイルに一斉に割り当てる

一度に複数のタイルにプロパティを割り当てるには2つの方法があります。どちらかの方法が速いかは使用例によります:

タイル複数選択を使用する

If you wish to configure various properties on several tiles at once, choose the Select mode at the top of the TileSet editor:

その後、 Shift を押しながらタイルをクリックすると、右列で複数のタイルを選択することができます。また、マウスの左ボタンを押したままマウスをドラッグすると、矩形選択ができます。最後に、 Shift を押したまま選択中のタイルをクリックすると、すでに選択されているタイルの選択を解除することができます(選択範囲の残りの部分に影響を与えずに)。

次に、TileSetエディタの中央列にあるインスペクターを使用してプロパティを割り当てることができます。ここで変更したプロパティのみが、選択したすべてのタイルに適用されます。エディタのインスペクターと同様に、選択したタイル間で異なるプロパティは変更されるまでそのまま維持されます。

数値や色プロパティでは、プロパティを編集した後に、その値がアトラス内のすべてのタイルに反映されるプレビューが表示されます:

選択モードを使用して複数のタイルを選択し、その後プロパティを適用

タイルプロパティ・ペイントを使用する

複数のタイルに対して一度に1つのプロパティを適用したい場合は、 プロパティペイント モードを使用することができます。

中央の列でペイントするプロパティを設定し、右の列でタイルをクリック(または左マウスボタンを押したままに)して、タイルにプロパティを "ペイント" します。

タイルセットエディタを使ってタイルプロパティをペイント

タイルプロパティのペイントは、コリジョン形状のような手動で設定するのに時間がかかるプロパティに特に便利です:

コリジョンポリゴンをペイントし、その後、タイルを左クリックして適用

代替タイルの作成

時には、単一の(アトラス内に1つだけある)タイル画像を、異なる設定で使用したい場合があります。例えば、同じタイル画像を使用しながら、回転や反転、異なる色で調整したりしたい場合です。これを実現するのが 代替タイル です。

Tip

Godot 4.2 からは、タイルを回転させたり反転させたりするために代替タイルを作成する必要がなくなりました。TileMapエディタでタイルを配置する際に、ツールバーにある回転/反転ボタンを使用して、任意のタイルを回転させることができます。

代替タイルを作成するには、TileSetエディタのアトラスに表示されているベースタイルを右クリックし、 代替タイルを作成 を選択してください。

TileSetエディタでベースタイルを右クリックし、代替タイルを作成

現在 選択モード (Select mode) にいる場合、代替タイルはすでに編集用に選択されています。選択モードにいない場合でも代替タイルを作成できますが、 選択モード に切り替えて代替タイルを選択し、編集する必要があります。

代替タイルは指定されたアトラスの中で常に基本タイルの右側に表示されるので、代替タイルが表示されない場合はタイルセットエディタ内でアトラス画像を右側にパンしてください:

TileSetエディタでクリックして代替タイルを設定

代替タイルを選択した後、どのプロパティを中央列でベースタイルにしたように変更できます。ただし、表示されるプロパティの一覧は基本タイルとは異なります:

• Alternative ID: この代替タイルに固有の数値識別子です。これを変更すると既存の TileMap を破損する可能性があるため、注意してください! この ID は、エディタで表示される代替タイル一覧の並び順も制御します。

• レンダリング > Flip H: true の場合、タイルが水平方向に反転します。

• レンダリング > Flip V: true の場合、タイルが垂直方向に反転します。

• レンダリング > Transpose: true の場合、タイルが90度 反時計回りに 回転し、その後垂直方向に反転します。タイルを90度時計回りに回転させたい場合には、 Flip H と Transpose を有効にします。タイルを180度時計回りに回転させるには Flip H と Flip V を有効にします。タイルを270度時計回りに回転させるには Flip V と Transpose を有効にします。

• レンダリング > Texture Origin: タイルを描画する際に使用する原点です。これを使用することで、ベースタイルに対してタイルの見た目の位置をオフセットできます。

• レンダリング > Modulate: タイルを描画する際に使用する色の乗算値です。

• レンダリング > Material: このタイルに使用するマテリアルです。単一のタイルに異なるブレンドモードやカスタムシェーダーを適用したいときに使えます。

• Z Index: このタイルの描画順序です。同じレイヤー上で値が大きいほど、他のタイルの前面に描画されます。

• Y Sort Origin: The vertical offset to use for tile sorting based on its Y coordinate (in pixels). This allows using layers as if they were on different height for top-down games. Adjusting this can help alleviate issues with sorting certain tiles. Only effective if Y Sort Enabled is true on the TileMapLayer node under CanvasItem > Ordering

大きな "+" アイコンを代替タイルの横でクリックすることで、追加の代替タイルバリアントを作成できます。これは、ベースタイルを選択して右クリックし、再度 代替タイルを作成 を選択するのと同等です。

注釈

代替タイルを作成する際、ベースタイルからはプロパティが一切引き継がれません。ベースタイルと代替タイルで同じプロパティを持たせたい場合は、代替タイルでプロパティを再設定する必要があります。