从零开始的 Godot 之旅 — EP11：初识瓦片地图

从零开始的 Godot 之旅 --- EP11：初识瓦片地图

在之前的章节中，我们已经成功创建了一个能跑能打的玩家角色。不过，这位勇士目前还只能在一片虚无的混沌中徘徊。为了让他能在丰富多彩的世界中冒险，我们需要引入游戏开发中的重要概念------地图。

在 Godot 引擎中，瓦片地图 (TileMap) 正是构建 2D 游戏世界的利器。本章将带大家初识瓦片地图，亲手搭建我们的第一个游戏场景。

什么是瓦片地图

所谓瓦片地图，顾名思义，就是像铺地砖一样，通过重复使用小块图像（称为"瓦片"或 Tile）来拼接出巨大的游戏地图。每个瓦片通常是固定大小的图像（如 16x16、32x32 像素）。通过巧妙排列这些小方块，我们可以高效地构建出森林、城镇、地下城等复杂场景，既节省内存，又便于编辑。

在 2D 游戏中，常见的瓦片地图主要分为两种类型：

正交瓦片地图 (Orthogonal TileMap)：瓦片以矩形网格排列，适用于大多数传统的 2D 游戏（如《超级马里奥》、《星露谷物语》）。

等距瓦片地图 (Isometric TileMap)：瓦片以菱形网格排列，能产生伪 3D 的视觉效果（如《饥荒》、《帝国时代 2》）。

相对来说，等距瓦片地图的逻辑稍显复杂。作为游戏开发的新手（其实是我自己还没完全参透），本章我们将重点介绍最基础也最常用的正交瓦片地图。

准备素材

工欲善其事，必先利其器。在开始绘制之前，我们需要准备一套瓦片素材。本章我们将使用下面这张简单的素材图：

请按照以下步骤操作：

在 scenes（场景）目录下新建一个名为 maps 的目录。
在 maps 目录下创建一个 assets 文件夹。
将下载好的瓦片素材放入其中，并重命名为 tileset.png。

创建场景

在 Godot 中，地图本身也是一个场景。

点击左上角的 Scene 菜单，选择 New Scene 创建新场景。

将新场景命名为 Map01，并保存到刚刚创建的 maps 目录下。

小贴士：在 Godot 中，场景（Scene）是游戏的基础组成单位。角色是场景，UI 是场景，地图自然也是一个场景。这种设计让我们可以灵活地组合和复用各种元素。

添加 TileMapLayer 节点

选中场景的根节点，点击添加子节点（或按 Ctrl+A / Cmd+A），搜索 TileMap。这里请注意选择 TileMapLayer 节点。

注意：请选择 TileMapLayer 而不是 TileMap。
在 Godot 4.0 及后续版本中，官方对瓦片地图系统进行了重构，引入了 TileMapLayer 节点来替代旧版的 TileMap 节点。虽然旧版节点仍保留用于兼容，但新版功能更强大且逻辑更清晰，建议大家从现在开始习惯使用新节点。

选中刚创建的 TileMapLayer 节点，你会发现底部面板多了一个 TileMap 选项卡，但目前它会提示"没有 TileSet 资源"。

创建 TileSet 资源

在开始绘制之前，我们需要先理解两个核心概念：TileSet 和 TileMap。

我们可以用"乐高积木"来打个比方：

TileSet（瓦片集） 就像是一盒乐高积木。它定义了盒子里有哪些形状的积木（瓦片），以及每块积木的属性（如碰撞体积、导航网格、地形规则等）。它是我们的"素材库"。
TileMapLayer（瓦片地图层） 就像是拼搭积木的底板。我们从 TileSet 这个盒子里拿出积木，按格子铺在这个底板上，最终拼出城堡或森林。

现在，我们来创建这个"积木盒"。

选中 TileMapLayer 节点，在右侧检查器（Inspector）中找到 Tile Set 属性。
点击右侧的 [空] 按钮，选择 新建 TileSet。

创建好 TileSet 后，底部面板会自动切换到 TileSet 选项卡。将我们准备好的 tileset.png 素材直接拖入这个面板。

拖入后，Godot 会弹窗询问："是否自动在不透明区域创建图块？"（Automatically create tiles in the atlas?）。直接点击是（Yes）。Godot 会自动扫描图片，将有内容的区域切分为一个个瓦片。

调整瓦片尺寸

如果你使用的是和我一样的素材，你会发现自动切分的网格和图片对不上。这是因为素材中每个瓦片的实际尺寸是 20x20 像素，而 Godot 默认的瓦片大小是 16x16 像素。

我们需要在 TileSet 面板右侧的 Setup 栏中，将 Texture Region Size 修改为 20x20。

注意：这里只需要修改 Texture Region Size （纹理区域大小），不要修改 TileSet 属性里的 Tile Size（那是地图网格的大小，通常保持默认或根据需求调整，但在本例中我们先只调整纹理切分大小）。

现在我们已经配置好了 TileSet，接下来就可以开始挥洒创意了！

绘制瓦片地图

一切准备就绪，开始绘制！

确保选中 TileMapLayer 节点。
在底部面板切换到 TileMap 选项卡（注意不是 TileSet 了）。

你会看到一个类似画图工具的界面：

左侧工具栏：提供了画笔、矩形框选、油漆桶填充等工具。
右侧瓦片库：展示了我们刚刚导入的瓦片素材。

选中 画笔工具，然后在右侧选择你想要绘制的瓦片，接着在中间的网格区域点击鼠标左键，就可以将瓦片"画"在地图上了。

快速绘制草地

为了演示，我们来快速绘制一片草地。

在右侧瓦片库中，按住鼠标左键拖动，选中几个不同的草地瓦片（多选）。
在左侧工具栏中，选中 矩形工具。
启用 随机散布（Dice 图标/Place Random Tile）。这个功能非常实用，它会在你绘制时随机从选中的瓦片中挑选一个，这样画出来的草地不会千篇一律，看起来更自然。
在地图区域拖动鼠标，画出一大片草地。

就这样，一个最简单的草地场景就诞生了！（虽然除了绿草啥也没有，但好歹是个落脚地了 [笑哭]）

将地图添加到主场景中

最后一步，我们需要把画好的地图放入游戏主世界。

调整层级 ：为了不让地图遮挡住玩家，我们需要调整图层顺序。选中 TileMapLayer 节点，在检查器中找到 Z Index 属性，将其设置为 -1。这样地图就会永远显示在玩家（默认 Z Index 为 0）的下方。
实例化场景 ：回到主场景（Main Scene），点击 实例化子场景 （链接图标），选择我们刚刚制作的 Map01.tscn。

运行游戏，你会发现我们的主角终于不再是漂浮在虚空中，而是脚踏实地站在了草地上！

小结

至此，我们已经成功绘制并加载了第一个游戏地图。虽然它现在还只是一片简单的草地，但这是构建庞大游戏世界的第一步。

在下一节中，我们将为地图添加更多细节------树木、灌木、石头、围墙，并学习如何设置碰撞，让玩家真正能与这个世界产生交互，而不是像幽灵一样穿墙而过。

敬请期待！