**「たった5つのタイルで実装するオートタイル」**

5種類のタイルで自動タイル化

著者: [あなたの名前]
日付: 2026年2月5日

---

概要

自動タイル化は、2Dゲーム開発において非常に便利な手法です。セルを「占有」か「空白」かでマークし、エディターが適切なビジュアルタイルを自動的に配置することで、レベル作成を大幅に簡素化します。

典型的な実装では各セルの8近傍を調べ、16〜47/56個のタイルから選択します。理論上は256通りありますが、多くのゲームではそれよりも遥かに少ない組み合わせしか使用しません。本記事では、Nonsensical 2D からインスパイアを受けた、5種類だけで済むシステムについて説明します。これでもきれいにエッジが描画されます。

---

コアアイデア

タイルマップは二層に分かれています：

1. 物理レイヤー – 衝突判定用の「実際」のタイルを保持
2. ビジュアルレイヤー – デコレーションタイルを0.5タイルオフセットし、角で描画

各ビジュアルタイルは物理レイヤー上の四隣セル（1, 2, 3, 4）を見ることができ、これらを 4ビットマスク で表現します。

┌─┬─┐
│1│2│   (近傍)
├─┼─┤
│3│4│
└─┴─┘

ビットはビジュアルタイルの四隅に対応し、各角で物理セルが占有されているかをチェックすることで、16通りのユニークな配置を決定します。

---

五つの基本タイル

必要なのは 5つ のテクスチャだけです：

タイル	説明
コーナー	1つの象限を占有
サイド	隣接する2象限を占有
対角コーナー	反対側の2象限を占有
内向きコーナー	中央に向かう隣接2象限を占有
フル／ミドルピース	4つすべての象限を占有

これらの基本タイルをプログラム上で回転・反転させることで、16通りのビジュアルバリアントを生成できます。Godot では各バリアントの座標をテクスチャアトラスに格納し、インデックスで参照します。

@onready var tileArray : Array[Vector2i] = [
    Vector2i(4,0), # 0000
    Vector2i(0,3), # 0001 TL
    Vector2i(0,1), # 0010 BL
    Vector2i(2,0), # 0011 BL TL
    Vector2i(0,2), # 0100 TR
    Vector2i(2,3), # 0101 TR TL
    Vector2i(1,0), # 0110 TR BL
    Vector2i(3,2), # 0111 TR BL TL
    Vector2i(0,0), # 1000 BR
    Vector2i(1,1), # 1001 BR TL
    Vector2i(2,4), # 1010 BR BL
    Vector2i(3,0), # 1011 BR BL TL
    Vector2i(2,2), # 1100 BR TR
    Vector2i(3,3), # 1101 BR TR TL
    Vector2i(3,1), # 1110 BR TR BL
    Vector2i(4,0)  # 1111 BR TR BL TL
]

配列はビットマスク（0000 → 1111）の順序と完全に一致させる必要があります。

---

実行時配置

• タイルを置く – マウスイベントでグローバルカーソル位置をタイル座標へ変換。物理レイヤーのセルを更新し、周囲4つのビジュアルタイルを再計算します。
• タイルを消す – 同様にセルを空白に設定し、影響を受けるビジュアルタイルを更新します。

便利関数

update_all()

はビジュアルレイヤーをクリアして全体を一度に再構築します。レベルデザイン時など、多くのセルが変更された際に有効です。

---

レベル保存

1. WorldMap ノード をシーンツリーから取得
2. 各タイルマップレイヤーを反復処理し、次の情報を配列化

   • pos

     – セル位置

   • source_id

     – タイルID

   • atlas_coords

     – アトラス内座標

   • alt

     （または回転/フリップデータ）– 任意
3. これらをタイルセットパスで識別するキーの下に格納

var data = {
    "physical": _serialize_tilemap(physical),
    "visual"  : _serialize_tilemap(visual)
}

結果は次のような JSON になります。

{
  "physical": {
    "tile_set": "res://Tilesets/physical_tileset.tres",
    "cells": [
      { "pos": [x, y], "source_id": 0, "atlas_coords": [u, v], "alt": 0 },
      ...
    ]
  },
  "visual": {
    "tile_set": "res://Tilesets/visual_tileset.tres",
    "cells": [
      { ... }
    ]
  }
}

Godot エディタの

res://

フォルダは実行時に読み取り専用ですので、JSON は

user://

に保存します。後で再びシーンへインポートできます。

---

EditorPlugin でのインポート

ワークフローを効率化するために、

EditorInspectorPlugin

を作成し WorldMap インスペクタに Import ボタンを追加しました。ボタン押下時：

1. user://

   から保存データを読み込み
2. 新しい WorldMap ノードを生成してタイルマップを配置
3. 元のシーンファイル（

   res://

   ）を書き換え
4. Godot のファイルシステムをリフレッシュし、エディタに更新されたレベルを表示

@tool
extends EditorPlugin

func _enter_tree():
    add_inspector_plugin(
        preload("res://addons/WorldMap_importer/world_map_inspector.gd").new()
    )

func _exit_tree():
    remove_inspector_plugin(
        preload("res://addons/WorldMap_importer/world_map_inspector.gd").new()
    )

インスペクタプラグイン自体はボタンを作成し、インポートルーチンに接続してシーン保存を行います。

---

リソース

• jess::codes – GitHub リポジトリ（配置・ツール全コード）
• Nonsensical 2D – このアプローチの元となった動画
• Oskar Stålberg – 自動タイル化に関する追加参考資料

---

ご覧いただきありがとうございます！ フッターにリンクされたプラットフォームでフォローしたり、RSS で次回記事を受け取ることもできます。