【2D横版游戏开发】godot实现tileMap地图

前言

前一个文章,我们使用了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图像纹理属性,并调整图片的缩放,使其覆盖视口

如我这里检查器Transformscale都设置的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然后选择图块,确保在选择模式下进行绘制

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

其他功能不常用,就不多介绍。更具体,请参考其他资料
然后我对其进行一个简单绘制

  • 启动之后效果如下

可以看到未绘制物理碰撞的正常行走,有设置斜坡的也按照一定的坡度行走

结语

如上,就是使用godot实现tileMap的教学

相关推荐
fanged1 小时前
天马G前端的使用
android·游戏
Brianna Home4 小时前
Godot4.3开发2D游戏全记录
游戏·游戏引擎·godot·游戏程序·动画
molong9315 小时前
Kotlin 内联函数、高阶函数、扩展函数
android·开发语言·kotlin
王维志6 小时前
使用Asp.Net WebApi(.net 8)托管Unity WebGL
unity·游戏引擎·webgl
叶辞树6 小时前
Android framework调试和AMS等服务调试
android
开发游戏的老王8 小时前
虚幻引擎入门教程:虚幻引擎的安装
游戏引擎·虚幻
muyouking118 小时前
Unreal Engine 中的旋转表示:FQuat 与 FRotator 全面解析
游戏引擎·虚幻
慕伏白8 小时前
【慕伏白】Android Studio 无线调试配置
android·ide·android studio
低调小一9 小时前
Kuikly 小白拆解系列 · 第1篇|两棵树直调(Kotlin 构建与原生承载)
android·开发语言·kotlin
跟着珅聪学java9 小时前
spring boot 整合 activiti 教程
android·java·spring