当前位置：首页 > news >正文

godot实现tileMap地图

news 2025/9/22 10:47:22

前言

前一个文章，我们使用了godot+c#实现使用状态机处理玩家的状态，接下来我们开始实现地图.
如前面所说，我们是制作2D横板游戏为例，所以实际地图会按照这个方向制作地图,实际运行结果如下

在这里插入图片描述

素材导入

按照前面文章，我们的素材不是很符合要求，因此我这边进行引入了一个素材

basic-140-tiles-grassland-and-mines

打开之后是这样的

在这里插入图片描述

滑动到下面，找到DownLoad和我前面的文章引用玩家素材的过程一样

在这里插入图片描述

下载之后解压放到游戏项目根目录，这个Tiles就是解压之后的文件，后面我们需要用到Assets文件夹下的文件

在这里插入图片描述

无限滚动背景

现在，我们的场景地图是很粗糙的，并且一旦走到头，如果单纯放置图片的话，那么超出固定的背景图片区域之后，我们背景就会变成没有图片的状态，因此我们需要进行设置

PS:要使用我接下来说的，要求你背景的两端是可以接续的，否则会看到明显的间隙,以导入的图片如下为例，是接续的

在这里插入图片描述

我们这里使用ParallaxBackground
那么这个是什么组件?在我们给场景添加节点的时候，就有标注,他的备注是

用于创建视差滚动背景的节点。 ParallaxBackground 使用一个或多个 ParallaxLayer 子节点来创建视差效果。每个 ParallaxLayer 可以使用 ParallaxLayer.motion_offset 以不同的速度移动。这在 2D 游戏中可以创造一种深度错觉。如果没有与 Camera2D 一起使用，你必须手动计算 scroll_offset。

注意：每个 ParallaxBackground 都是在各自的 Viewport 中绘制的，无法在不同 Viewport 之间共享，见 CanvasLayer.custom_viewport。在分屏游戏等使用多个 Viewport 的场景下，你需要每个需要绘制的 Viewport 创建单独的 ParallaxBackground。

在这里插入图片描述

接下来。我只是对他进行一个简单运用，如果需要了解更多，请查找其他资料

首先，我们新建一个Node2D节点，在他的节点下创建子节点ParallaxBackground，然后在ParallaxBackground的子节点下创建ParallaxLayer节点，这个节点是专门用于ParallaxBackground配合使用的，然后，在我们的ParallaxLayer下创建一个Sprite2D2D图像节点.点击这个图像节点然后拖动背景图到检查器的Texture图像纹理属性,并调整图片的缩放，使其覆盖视口

在这里插入图片描述

如我这里检查器的Transform的scale都设置的x轴和y轴都设置了3倍，并且调整图片位置覆盖视口宽高

在这里插入图片描述

假如现在在下方加一个碰撞体充当地面，然后让玩家行走，为了让画面始终跟随玩家，我们需要在玩家节点下新增一个Camera2D节点

在这里插入图片描述

注意，记得调整玩家的碰撞体形状大小，以适应后面的地图，加完之后，你此时启动游戏画面发现会是这样的

在这里插入图片描述

这个是因为我们还有关键参数未设定,在ParallaxLayer的检查器的Motion下有一个Mirroring属性，我们需要将其设定为图片宽度像素乘以缩放倍率,因为我们这个游戏是2d横版游戏，因为只需要横向无限滚动即可,另外说一句Motion有一个Scale属性，是控制背景图移动快慢的，一旦值是(0,0)就不会参与滚动

我们找到我们的背景图，悬停，是可以看到图片的宽高的

在这里插入图片描述

这里显示我们的长是496,高是272,结合我们前面的缩放倍率3.0
所以，我们的Mirroring，应该设置为(1488,0)

在这里插入图片描述

再次运行结果如下,可以看到，玩家在图片左边边缘，但是左右移动实际是无限滚动的,需要注意的是，这里我只是演示，实际缩放倍率需要根据自己项目来，更多的还需要考虑玩家跳跃之后的高度也要覆盖，并且如果需要覆盖Y轴的无限滚动，设置另一个Y轴值即可

在这里插入图片描述

TileMap制作

设置图块

如上我们就实现了横轴无限背景图滚动,然后我们开始制作我们的地图,在原来的制作背景的场景下的主节点Node2D下新建子节点TileMapLayer,在点击它之后找到检查器的Tile Set属性，在它身上鼠标右键新建

在这里插入图片描述

然后我们在中下方会出现一个tileMap相关的功能窗口,
其中TileSet是维护我们的地图的资源
TileMap是将我们维护好的地图资料，绘制在我们的场景中
点击TileSet开始导入我们导入好的地图资源，然后我们会看到图块源和图案，我们点击图块源，然后下面的有一个+号，点击之后后出现一个图集和场景合集,我们点击图集，找到我们导入的Assets.png图片，引入

在这里插入图片描述

然后会提示是否自动创建图块,这个根据我们的实际项目情况来，假如说，这个素材，是用于专门创建地形的，并且指定全是同一种地形，全部都可以引用到你的tileMap，你可以选择需要，否则如果存在部分图块你是不需要的，你就选择否，那么为了方便演示，我选择是

在这里插入图片描述

然后tileMap功能窗口中间上方，会出现三个按钮设置 选择 绘制
设置的作用是让你选择那些图块可以参与进行绘制到场景
选择是根据自己选择的图块，进行设置一些参数，如添加碰撞体等
绘制是赋予图块属性，如物理碰撞层，导航层等
这里我只是进行一些简单的解释描述，更具体请查找其他资料参考

这里，我需要绘制一些物理碰撞层的图块，因此需要在绘制调整一些属性

首先，在我们的检查器下，找到Physics Layers属性，点击添加元素

需要注意的是，添加元素之后有两个属性
Collision Layer代表的是这个物理层所在的层级
Collision Mask 代表的是这个物理层所在的层级可以和哪些层级发生碰撞
如果我们此时点击玩家节点的根节点，我们会发现它检查器有一个Collision属性

在这里插入图片描述

有一个Layer和一个Mask作用是一样的，需要两者可碰撞的层级在设定可碰撞范围才可以发生碰撞

添加好之后，我们就可以在绘制，进行选择编辑的属性，选择物理，然后它会出现一个淡蓝色的方块,这个方块是针对每一个图块需要设置碰撞的形状范围

在这里插入图片描述

选择我们需要添加碰撞体的图块，可以看到我们的图块成功赋予了物理碰撞

在这里插入图片描述

但是有一个问题，我们右边一点图块有一个坡度,我们希望的是物理层只需要加到有图片的地方,因此需要点击我们的图块，然后调整我们的碰撞体形状,然后再次点同一个图块调整碰撞体形状

在这里插入图片描述

左边的碰撞体形状，可以看到被调整了，最初有四个点，可以拖动点更改形状，也可以点击线的边缘鼠标左键添加点 鼠标右键删除点,如果需要恢复形状，点击竖排的三个点，有一个重置为默认图块形状

在这里插入图片描述

按照如上我们依次设置好我们的斜坡

在这里插入图片描述

绘制图块

按照如上，我们简单的给图块绘制了碰撞物理层，其他设定请参考别的资料,然后我们需要把图块绘制在场景中

首先，我们点击中下的TileMap然后选择图块,确保在选择模式下进行绘制

在这里插入图片描述

它这里上方有一排按钮，分别是
选择工具:针对已经绘制在场景的图块进行选中，并且移动绘制的位置
绘制工具将图块绘制在场景
直线工具:将设置好的图块进行选中，绘制成一条直线
矩形工具:在点击绘制工具的基础上，点击它，可以将选中的图块批量绘制成一个矩形，解决重复劳动效率低下问题
油漆桶工具:对连续接续的相同图块区域替换为选中的图块
取色:对已经绘制在场景的图块进行取色，下次绘制可以绘制和它一样的图块
橡皮擦:针对绘制在场景的图块进行删除，可以和矩形工具配合使用
其他功能不常用，就不多介绍。更具体，请参考其他资料