HOME / 第 3 部分 · 2D 游戏开发实战 / 第 29 课
MODULE 3 · 2D 游戏开发实战

第 29 课 · TileMap 瓦片地图绘制

⏱ 预计时长 40 分钟📊 难度 入门📚 模块 第 3 部分 · 2D 游戏开发实战

🎯 本课学习目标

手工摆地面太累，瓦片地图用「贴瓷砖」的方式铺出整张地图。本课掌握 Godot 4 的 TileMapLayer。

📖 详细教学步骤

什么是瓦片地图？概念

瓦片地图（TileMap）把地图切成一个个小格子（瓦片）：

  • 一张「瓦片集图片」包含很多小格子（地面、墙壁、装饰）
  • 用画笔在网格上「涂」出地图，比手摆节点高效 100 倍
  • Godot 4.x 用 TileMapLayer 节点（替代旧版 TileMap）

准备瓦片集图片素材

  1. 准备一张瓦片集图片（网上搜「tileset free」可下载，或自己画 16×16/32×32 格子）
  2. 把图片拖进资源面板导入

💡 瓦片集通常是一张含多格的图，例如 4×4 个 32px 格子 = 128×128 图片。

创建瓦片集并配置操作

  1. 添加子节点 TileMapLayer，命名 Ground
  2. 选中它 → 检查器 Tile Set → 新建 TileSet
  3. 展开 TileSet → TileSetAtlasSource → 添加 → 选瓦片集图片
  4. 在编辑器下方「瓦片集」面板设置格子大小（如 32×32）

用画笔绘制地图操作

  1. 选中 TileMapLayer，进入编辑模式（检查器点「编辑」或双击）
  2. 底部面板出现瓦片集，点击选中一个瓦片
  3. 在主视图鼠标左键拖拽画到网格上
  4. 右键擦除，可用矩形/填充等画笔工具

💡 顶部工具栏可切换画笔类型：单个 / 矩形 / 整行整列 / 填充。

给瓦片加物理碰撞实操

  1. 底部瓦片集面板选中某个瓦片
  2. 切到「物理」标签 → 添加物理层 → 绘制碰撞形状（沿瓦片边缘框一圈）
  3. 玩家站上去就不会掉穿

💡 也可以给整个 TileMapLayer 挂 StaticBody2D 属性（TileMapLayer 自带物理，配置瓦片碰撞即可）。

用代码读取瓦片进阶

运行时按坐标读瓦片：

GDSCRIPTextends TileMapLayer

func _ready():
    # 获取某个格子坐标的瓦片（返回 atlas 坐标或 -1）
    var cell = get_cell_atlas_coords(Vector2i(3, 5))
    print(cell)

    # 设置某个格子
    set_cell(Vector2i(1, 1), 0, Vector2i(0, 0))
⚠️
瓦片显示不出来？

检查：TileSet 是否创建、AtlasSource 是否添加图片、格子尺寸是否与图片一致、是否在编辑模式选中了瓦片。

⚠️
玩家穿过瓦片地面？

瓦片没配物理碰撞。在瓦片集面板给对应瓦片画上物理形状。

🧪 动手试一试

🏋️ 课后练习

用瓦片地图铺出一块 10×5 的地面 + 几面墙，让玩家在上面自由行走不掉落。

TileMapLayer + TileSet 配置 + 给瓦片加物理形状。

💡

先画地形再调碰撞，用「调试→可见碰撞形状」检查。

💡

瓦片地图还可以做装饰层（不加物理）与地形层（加物理）分开。

🎓 本课小结

TileMapLayer 用瓦片集铺地图：建 TileSet → 配 AtlasSource → 画笔绘制 → 给瓦片加物理碰撞；比手摆节点高效得多。