Godot Engineで2Dゲームを制作するための備忘録です。
この記事はGeminiを活用して作成しました。
1. はじめに
TileMapLayerはGodot Engine 4.3から導入された タイル状の画像（チップ）を並べて2Dゲームのマップを効率よく描画・作成するためのノードです
2DのアクションゲームやRPGを作る際 地面や壁などのマップ要素を1つずつSprite2Dノードで配置していくと ノードの数が膨大になり管理も動作も重くなってしまいます
これを解決するのが TileMapLayer です
あらかじめ用意した1枚の大きな画像（タイルセット）から グリッド（格子）に合わせてお絵かき感覚でタイルを配置していくことができます
💡 Godot 4.3以降の重要な変更点
従来のTileMapノードは非推奨（Deprecated）となり 1つのレイヤーごとに1つのノードとして扱うTileMapLayerに分割されました
これにより スクリプトからの操作やレイヤーの並び替えが直感的に行えるようになっています
主な用途
- ドット絵のタイルを並べた2Dアクション・RPGのステージ作成
- 地面や壁の自動的な当たり判定（コリジョン）の実装
- 背景レイヤー・手前レイヤーなどの多層構造マップの管理
2. 代表的なプロパティ
インスペクターで設定する TileMapLayerノードの重要なプロパティです
| プロパティ名 | 説明 |
|---|---|
| Tile Set | 使用するタイルのリソース（TileSet）を指定します ここでタイルのサイズや当たり判定を設定します |
| Enabled | trueで表示 falseにするとレイヤー全体を非表示にできます |
| Y Sort Enabled | trueにすると キャラクターとタイルのY座標（上下位置）に応じて 手前と奥の描画順を自動で入れ替えます（見下ろし型RPGで必須） |
3. 画面下部「TileMap」エディタの主なツール
ノードを選択したときに画面下に表示されるツールバーの機能を 左から順番に分かりやすく解説します
📂 モード切り替えタブ
-
タイル
- 1枚ずつのタイルを自由に選んで配置する基本モードです
-
パターン
- あらかじめ登録しておいた複数のタイルセット（家や木など）をスタンプのように配置できます
-
地形（Terrains）
- オートタイル（自動接続タイル）を使って 道や壁の境界線を自動で繋ぎながら描画するモードです
描画・選択ツール
-
選択（矢印アイコン）
キーボードショートカット: S- 配置済みのタイルをドラッグで範囲選択します コピー（Ctrl+C）や移動ができます
-
ペイント（青い鉛筆アイコン）
キーボードショートカット: D- 選択したタイルを1マスずつ配置する最も基本的なツールです
-
直線（斜め線アイコン）
- ドラッグした開始点から終了点まで まっすぐ直線状にタイルを並べます
-
長方形（四角アイコン）
キーボードショートカット: R- ドラッグして四角形の範囲を指定し まとめてタイルを敷き詰めます
-
バケット塗りつぶし（バケツアイコン）
キーボードショートカット: G- クリックした場所からつながっている同じエリアを一気に塗りつぶします
-
タイルを拾う（スポイトアイコン）
キーボードショートカット: I- 画面上のタイルをクリックして 右のパレットから同じものを即座に選択状態にします
-
消しゴム（消しゴムアイコン）
キーボードショートカット: E- 配置されているタイルを消去します（鉛筆ツールのまま右クリックドラッグでも消せます）
🔄 回転・反転・ランダムツール
-
反時計回りに回転（左回りの矢印）
キーボードショートカット: A- タイルを左に90度回転させます
-
時計回りに回転（右回りの矢印）
キーボードショートカット: Z- タイルを右に90度回転させます
-
水平反転（左右の矢印）
キーボードショートカット: X- タイルを左右にひっくり返します
-
垂直反転（上下の矢印）
キーボードショートカット: Y- タイルを上下にひっくり返します
-
ランダムペイント（サイコロアイコン）
- 右のパレットで複数のタイルを選択した状態でこれをONにすると それらのタイルをランダムにばらつかせながら配置できます（草むらに数本の雑草を混ぜたいときなどに超便利です）
4. 使い方（基本的な2Dマップを作る手順）
画像を用意して実際にマップを描くまでの基本フローです
🛠️ 設定の全体フロー
-
Step 1: シーンに
TileMapLayerノードを追加する -
Step 2:
TileSetリソースを新規作成し 画像（テクスチャ）を読み込む - Step 3: タイルエディタを使って画面にマップを描く
📌 Step 1: ノードの追加
- 2Dシーンのルートノードを選択します
-
+ボタンを押しTileMapLayerを検索して追加します
📌 Step 2: TileSetの設定とアトラスの作成
- 追加した
TileMapLayerを選択します - インスペクターの一番上にある
Tile Setプロパティの[空]をクリックし新規 TileSetを選択します -
【重要】
新規 TileSetの文字部分をもう一度クリックすると インスペクターにTileSetの内部設定が開きます ここでTile Sizeプロパティを探し 用意した素材の1マスあたりのサイズ（例:16 × 16や32 × 32）に数値を変更します（これを忘れると画像とグリッドのサイズがズレてしまいます） - 画面下部に「TileSet」エディタが開くので 左側のメニューにある
Setup（セットアップ）タブを選択します - ファイルシステムから用意したタイルセット画像を エディタ中央のグレーの領域にドラッグ＆ドロップします
- 「画像 '〇〇' にアトラスタイルを自動的に作成しますか？」というダイアログが表示されるので
はいを選択します - 先ほどインスペクターで設定した
Tile Sizeに合わせて画像が自動分割され マップとして配置可能な「アトラス」が作成されます
📌 Step 3: マップの描画
- 画面下のタブを「TileMap」に切り替えます
- 右側に分割されたタイル一覧が表示されるので 配置したいタイルをクリックして選択します
- 2Dビューポート（メイン画面）上でドラッグすると タイルの配置が行えます
5. 補足: スクリプトからタイルを操作する（実践テクニック）
ランダムマップ生成や ゲーム中にプレイヤーの攻撃で壁を壊したいときなどに使える コードからタイルを操作・判定する基本テクニックです
📌 タイルを配置する・削除する
スクリプトから動的にタイルを書き換えるには set_cell() メソッドを使用します
extends TileMapLayer
# 操作したいグリッドの座標（整数型のVector2iを使用）
var target_pos = Vector2i(5, 3)
func _ready():
# 【配置】指定した座標にタイルを置く
# set_cell(座標, ソースID, タイルのアトラス座標)
# ソースID 0番の画像の 左上から(0, 0)の位置にあるタイルを配置します
set_cell(target_pos, 0, Vector2i(0, 0))
func remove_tile():
# 【削除】タイルを消去したい場合は ソースIDに -1 を指定します
set_cell(target_pos, -1)
📌 指定した座標のタイル情報を調べる
「プレイヤーの目の前にあるタイルが何か」を判定して処理を分けたいときに使用します
func check_tile():
# 指定した座標にあるタイルのソースIDを取得する
var source_id = get_cell_source_id(target_pos)
if source_id == -1:
print("ここには何もありません（空っぽです）")
return
# そこに配置されているタイルのアトラス座標（どの絵柄か）を取得する
var atlas_pos = get_cell_atlas_coords(target_pos)
if atlas_pos == Vector2i(2, 0):
print("これは壊せる壁タイルです")
📌 応用：配置されている全てのタイルの位置を取得する
マップ上の特定のタイル（例えばスタート地点や宝箱の配置マス）をスクリプト側で走査したいときに便利です
func find_all_tiles():
# 現在このレイヤーに配置されている全てのタイルの座標リストを取得する
var used_cells = get_used_cells()
for cell in used_cells:
# 例：特定の絵柄（アトラス座標 1,1）のタイルを探す
if get_cell_atlas_coords(cell) == Vector2i(1, 1):
print("特定のタイルを特定の位置で発見しました: ", cell)
💡 Tips: set_cell() で一括して大量のタイルを配置すると処理が重くなる場合があります
その場合は set_cells_terrain_connect() などを使ってオートタイルと連動させるか ループ処理でまとめて書き換える設計にします