タイルマップ：自動タイルを使用

課題

TileMapを使用し、自動タイル機能を活用してレベル作成を効率化したいです。

解決策

本デモでは、以下のタイルセットを使用します。

これらのタイルから地図を作成する場合、1枚ずつ手動で配置していくと非常に手間がかかります。角や交差点、終点部分を合わせるために、常に異なるタイルを切り替えながら作業することになるからです。

自動タイル機能を使用すると、壁を任意の方向に自由に描画でき、アルゴリズムが正しいタイルを選択して全体をシームレスに配置します。

以下に具体例を示します。

自動タイリングの仕組みについて

使用しているタイルは 3×3（最小） のタイリング用に設計されています。単一のタイルを3×3グリッドに分割した場合を考えてみます。

タイルの「アクティブ」部分（つまり壁ではない箇所）に目印を付けることができます。

これを各タイルごとに実行すれば、コンピュータはどのタイルを隣接させても確実に互換性が確保されるようにできます。

3×3のグリッド上には、512通りの組み合わせパターンが存在します（2^9）。これらのほとんどは連続した壁を作る上で実用的ではないため、除外して構いません。実際に適切な形で壁面を覆うためには、48枚のタイルが必要であることが分かりました。これはタイルセットに用意されているものです。以下の7枚のタイルは無視することにします - 右下隅に位置する白い背景のタイルです。

タイルセットの作成方法

TileMapのプロパティにある「タイルセット」設定で「新規タイルセット」を選択し、クリックするとエディターパネルが開きます。

テクスチャを追加するには ⊞ ボタンをクリックし、上記で選択したタイルセットを選択してください。次に「新規オートタイル」を選択し、画像全体をドラッグして選択します。スナップ機能を有効にし、設定を調整する必要があるかもしれません。このタイルセットのタイルは 64x64 ピクセルで、各タイル間は 10 ピクセル間隔になっています。独自のアートワークを使用する場合は、必要な値を手動で入力してください。

オートタイルグループを構成するタイルセットを選択したので、次はビットマスクを設定する段階です。画面上部の「ビットマスク」ボタンをクリックし、各タイル上でクリックを開始してください。マスキングされた部分は赤く表示されます。作業が完了すると、以下のような状態になるはずです。

※右下のタイルは使用していないことに注意してください。

最後に、「アイコン」ボタンをクリックして、自動タイルグループのアイコンとして使用するタイルを選択してください。これが描画中にカーソル下に表示されるタイルとなります。

タイルマップに切り替えてください。正常に描画できるはずです。問題がある場合は、ビットマスクを確認し、すべてのタイルに空白部分が残っていないか確認してください。上記の画像と照合して確認してください。

完全タイルセット

また、自動タイルセットに衝突判定、移動経路、または遮蔽効果を追加することもできます。以下のサンプルプロジェクトをダウンロードすると、すべてのタイル上にポリゴンが定義された完全なタイルセットを入手できます。