本教程课程专为希望立即开始尝试自己图像的用户设计！
在开始本课程之前，我们建议先完成以下入门内容：
Tutorial: Beginner Course
在本课程中，我们将继续使用初始教程中使用的相同项目。
如果您已删除该项目，请在继续之前返回初始教程并重新创建教程项目。
1 个赞
步骤 1：让我们向舞台添加图像
1. 下载以下示例图像：
2. 打开您的教程项目。
3. 在 [文件系统] 窗口（左下角）中，选择您想要存储图像的文件夹。
您也可以通过在文件系统中右键单击来创建新文件夹。
4. 将下载的图像从文件资源管理器拖放到 [文件系统] 中的选定文件夹。
您现在应该能在选定文件夹中看到 test_picture.png 已列出。
注意：这不仅适用于图像，也适用于所有类型的资源——您必须先将它们导入到文件系统中，然后才能在项目中使用。
5. 选择任意图层，然后将 test_picture.png 从 [文件系统] 拖放到舞台。
6. 图像现在应该出现在舞台上。
当放置 PNG 等图像文件时，会自动创建一个名为 Sprite2D 的节点，并将该图像分配为其纹理。
7. 关于 Sprite2D：
当您放置 PNG 等图像文件时，会自动生成一个 Sprite2D 节点。
Sprite2D 是一个简单的图像节点——它无法执行操作，但非常轻量，非常适合用于贴纸或背景装饰等用途。
步骤 2：让我们更改背景
1. 接下来，让我们更改背景图像。
在左侧的 [场景] 面板中，您会注意到三个图层：DistantView、MiddleView 和 NearView。
这三个图层共同构成了背景。
在本教程项目中，背景被分为三个图层，以创建视差滚动效果。
2. 与步骤 1 一样，每个图层都包含一个 Sprite2D 节点。
该节点存储背景图像。
选择 DistantView 下的 Sprite2D。
在右侧的 [检查器] 窗口中，您会看到一个名为 Texture（纹理）的属性——这是当前分配的图像。
3. 让我们使用教程项目中包含的一张替换背景图像。
在左下角的 [文件系统] 窗口中，打开文件夹 templates > backgrounds。
这些是为每个图层预先制作好的背景图像。
4. 打开 03_DistantView 文件夹，并将 B_004_snow_03.png 拖拽到之前的 Texture 字段中。
5. 您可能会注意到，尽管这是一个小的垂直 PNG 图像，但背景显示为宽图像。这是为什么？
这是因为我们使用了一个名为 Parallax2D 的特殊 Godot 节点来创建视差背景效果。
每个“View”节点（例如 DistantView）本质上是一个重命名的 Parallax2D 节点。
让我们看看内部结构。选择 DistantView 节点。
6. 在 [检查器] 中，您会看到几个属性。
以下是每个属性的简要说明：
| 属性 | 描述 |
|---|---|
| Scroll Scale（滚动缩放） | 控制图层随相机移动的移动量。值越小移动越慢，使图层看起来更远。前景元素请使用大于 1 的值。 |
| Scroll Offset（滚动偏移） | 为视差效果添加偏移量。现在可以忽略此项。 |
| Repeat Size（重复尺寸） | 指定图像重复的大小。通常设置为与纹理图像相同的大小。如果替换为自定义图像，请务必更新此项。 |
| Autoscroll（自动滚动） | 自动按设定方向滚动图层——适用于飘动的云朵。在此示例中，它以每秒 3 像素的速度向右滚动。 |
| Repeat Times（重复次数） | 设置背景重复的次数。它从中心向外扩展，顺序为：右、左、右、左。 |
尝试调整这些设置，或替换中间和近景图层中的图像。然后测试运行您的项目以查看效果。
如果您想使用自己的自定义图像，请按照步骤 1 中的步骤导入它。别忘了更新 Repeat Size 以匹配您的图像。
注意：
背景 002_forest 和 003_cave 是专为室内视差场景设计的。
如果直接使用它们，NearView 可能会出现错位。
要修复此问题，请将 NearView > Node2D > Transform > Position 的 Y 位置 从 360 更改为 -180。
步骤 3：让我们添加一个新的图块
现在，让我们创建一个新的图块层，并尝试加载您自己的图块图形。
如果您还没有准备好任何图块素材，请随意使用以下示例图块：
1. 为图块层创建一个新节点。
在 [场景] 窗口中，选择 BaseLayer，然后点击 ＋ 按钮。
2. 在节点创建对话框中，选择 TileMapLayer。
在搜索栏中输入 “tile” 以筛选结果。
TileMap，这是一个旧版的遗留节点。
3. 选择新创建的层并分配一个 TileSet。
在 [检查器] 窗口中，点击 TileSet 旁边的下拉菜单，然后选择 New TileSet。
4. 点击 TileSet 展开并开始配置它。
- Tile Size（图块大小）：将其与您的图块大小匹配（例如，示例图块为 24px）。
- Physics Layers（物理层）：添加一个新的物理层（点击 +），以便图块可以设置碰撞。
如果不这样做，玩家将无法站在图块上。
本教程假设使用正方形图块，但您可以根据需要将其图块形状更改为等轴测或六边形。
5. 切换到位于底部中央的 TileSet 面板。
此选项卡允许您管理图块。
将您的图块图像从 [文件系统] 拖放到此面板中。
6. 将弹出一个用于图块切分的窗口。
确认图块大小正确，然后点击“是”。
7. 系统会询问您是否要作为自动图块（Auto Tile）导入。
由于示例图块以及您自己的图块很可能并非专为自动图块设计，请选择 No（否）。
自动图块将在下一步中介绍。
8. 图块现在将显示出来，并已按正确大小切分。
如果出现任何问题，请使用垃圾桶图标删除并重试。
接下来，让我们定义 碰撞区域（墙壁检测）。
切换到 Select（选择） 选项卡，拖拽选择所有图块。
9. 图块设置面板将打开。
前往 Physics（物理） > Physics Layer 0（物理层 0）。
如果您没有看到此选项，请返回并确保已在步骤 4 中添加了物理层。
10. 使用“添加点”工具点击每个图块的四个角，以定义碰撞多边形。
再次点击最后一个点以闭合形状。应会出现红色的碰撞轮廓。
提示：
- 点击左上角时要小心，放大视图有助于避免误点。
- 使用蓝色箭头工具移动点，或使用红色的“X”工具删除点。
- 如果某些图块不是完美的正方形，请单独选择它们并相应调整点的位置。
11. 将面板切换到“TileMap”视图，并开始将图块放置在您的场景中。
选择一个图块并点击以放置它。
由于已定义碰撞，在测试运行时玩家应该能够站在这些图块上。
在 Godot 中，场景树中位置较低的节点会绘制在前面。
如果您想更改绘制顺序，请在场景窗口中将TileMapLayer向上或向下拖动。
您已成功创建并配置了自己的自定义图块！
然而，手动设置每个图块可能非常耗时。
在下一步中，我们将探索 自动图块（Auto Tiles） 以加快流程。
步骤 4：自动图块
ACTION GAME MAKER 使用 Godot 的地形系统来实现自动图块功能。
更多详情：
https://docs.godotengine.org/en/4.x/tutorials/2d/using_tilesets.html#creating-terrain-sets-autotiling
此功能允许灵活地创建自动图块，但在 ACTION GAME MAKER 中，如果您按照特定格式准备图块图像，它们将自动加载为自动图块，无需手动设置。
现在让我们尝试该功能。
1. 首先，下载下方的测试自动图块图像并将其导入到您的文件系统（File System）中。
2. 与步骤 3 一样，选择您想要加载图块的 TileMapLayer。
示例图块大小为 24×24。
如果您在步骤 3 中使用了不同的大小，您可能想使用现有的图层，例如 [Base]。
3. 打开底部中央的 TileSet 面板，将 test_autotile.png 从文件系统拖入其中。
如前所述，将出现一个切片窗口——点击 是（Yes）。
4. 接下来，当被问及是否将其加载为自动图块时，这次请点击 是（Yes）。
这将自动配置：
- 碰撞检测（墙壁设置）
- 地形设置（自动图块逻辑）
现在该图块即可作为自动图块使用。
5. 将底部面板从 TileSet 切换为 TileMap，并选择“地形（Terrains）”选项卡。
您应该能在类似 Terrain_Set X → auto_tile_00 的列表下看到新创建的图块。
6. 选择“地形（Terrains）”并尝试放置自动图块。
您会注意到图块的形状会根据其相邻图块自动变化。
此示例图块清晰地可视化了连接规则，帮助您理解自动平铺的工作原理。
7. 您可以使用相同的格式创建自己的自动图块，无论图块大小如何，它都能正常工作。
为了帮助您，这里有一个透明的 自动图块模板，您可以在设计自己的图块时作为参考：
在此处继续图形课程：