[Godot3游戏引擎实践]平台跳跃小游戏(一)-搭建游戏世界

欢迎阅读Godot3平台跳跃游戏实践系列文章，本系列将从创建工程开始，记录一个平台跳跃小游戏的制作过程，文章中如有错误或不妥之处欢迎指出。

演示效果

上一篇文章中，我们初步了解了Godot引擎的安装、项目创建及编辑器的基本使用，并且准备好了游戏用到的各类资源。本篇正式开始开发，进行游戏世界的搭建，初步搭建的效果：

初步搭建的效果

本篇涉及以下内容：

• 图片资源导入
• Sprite Sheet（精灵表）图片的使用
• TileMap（瓦片地图）的使用

在开始之前，我对Godot编辑器的界面布局按个人习惯进行了一些调整。上一篇文章中大家可能注意到了，开发过程中会频繁在Scene面板与Inspector面板之间来回操作，按照默认布局它们相隔十万八千里，一家人最紧要是齐齐整整，我统一把它们放到了右边。这一步不是必须的，开心就好。

点击面板右上角的按钮可以设置面板位置，设置好后通过菜单Editor->Editor Layout->Save Layout保存布局。

面板位置设置

调整后的界面

图片资源导入

本文中游戏世界的搭建主要是指地图的绘制，将其比作画画，需要先准备好颜料与画布，然后调出合适的色彩，最后在画布上肆意涂抹。

图片素材便是颜料，图片准备好了之后，需要将其导入到项目中。首先我们创建好素材文件夹，之后素材将统一放在素材文件夹下，方便管理。
在File System面板中右键res://，按层级依次新建Assets/Images/Tiles三个文件夹。这一步可以按个人喜好创建，甚至不建文件夹也没问题。

新文件夹

接着找到素材里地图瓦片的SpriteSheet图片文件。如果你和我用的是同样的图片资源（Kenny·Platformer Art Deluxe），那么它叫做tiles_spritesheet.png，使用文件管理器的搜索功能可以找到。

tiles_spritesheet.png

将图片文件拖入到刚才创建好的文件夹中，File System面板现在应该是这样：

导入spritesheet

如果使用的图片素材是像素画，或者不够高清，为了达到像素完美显示（Pixel Perfect）避免模糊，还需要在Import面板中进行调整。Import面板默认跟Scene面板在一起，我把它放到了最右侧：

导入设置

Import面板中的Import As选项可以选择当前文件的导入类型，比如位图、图片、纹理材质等等。Preset...选项选择当前类型对应的属性预设。默认导入类型是Texture，如果使用像素画，那么Preset...应该选择2D Pixel。调整完毕后，点击最下方的Reimport按钮重新导入。

这里我使用的素材虽然不是像素画，但分辨率并不够高，为了避免模糊，Preset选择2D Pixel然后点击Reimport按钮重新导入。

什么是Sprite Sheet（精灵表）？简单来说，SpriteSheet通常是一张由许多个等大的图片素材按表格形式拼成的图片，一张SpriteSheet可以包含一个完整的地图瓦片集、一个角色的所有动画帧等等。

为什么使用SpriteSheet？我感觉用单个文件也OK？SpriteSheet统一管理了相同类型的图片素材，在Godot中使用也更加方便，更重要的是，读取单个文件比读取一堆文件开销要小。

调整设计尺寸

有了颜料，我们还需要准备画布。游戏世界需要在一个合适的窗口大小下显示，如何确定这个大小呢？这取决于使用的图片素材尺寸以及设计者的主观意愿。
观察现在使用的图片素材可以得知，每块地图瓦片的大小是70x70像素，背景图片（bg_grasslands.png）的大小是1024x512像素。由于图片素材的大小限制，我们不能把游戏分辨率设计的太高，以16:10的窗口比例计算的话，那窗口大小便是1024x640.

素材的大小.png

那么打开菜单Project->Project Settings项目设置，左侧下拉找到Display->Window一项，右侧Size中设置我们确定好的窗口大小，并确保Resizable选项是默认勾选的。

窗口大小设置

可能各位看官就会有疑问了，都把窗口分辨率设定死了，还怎么适配不同分辨率的设备？其实这个窗口大小只是游戏的设计大小，并没有把最终的窗口大小固定下来，我们在制作游戏时仍然可以超出这个范围。而最终运行在不同分辨率的设备上时，Godot会根据我们的拉伸设置进行屏幕适配，确保在不同设备上有良好的体验，后续文章将会介绍这部分内容。

绘制瓦片地图

回顾上一篇文章中提到的，游戏是由场景组成的，场景又由节点组成。游戏关卡可以制作成一个场景，而关卡中的地图就是其中的一个或多个节点。那么首先需要新建一个场景，点击工作区上方的＋按钮新建场景。

新建场景

创建好场景后，点击Scene面板中的2D Node按钮创建一个根节点，随后右键根节点，选择Add Child Node，在新建节点对话框上方的搜索栏中输入TileMap，选择并点击创建。

创建TileMap节点

在Inspector面板中，展开Cell，将Size属性设置为相应的瓦片大小，这里是70x70.

瓦片大小设置

制作瓦片集

颜料与画布都准备就绪，接下来需要用调色板调出合适颜色。点击Tile Set属性右侧，选择New TileSet新建一个TileSet（瓦片集）。

创建TileSet

单击新建的TileSet，会发现工作区底部多了一个TileSet菜单，点击它可以展开或收起TileSet编辑面板。

TileSet面板

接下来需要将SpriteSheet图片制作成TileSet，首先点击TileSet面板底部左侧的＋号添加图片文件，选择刚才导入的tiles_spritesheet.png，添加完后：

TileSet添加SpriteSheet

我们可以用这个添加后的SpriteSheet里的不同部分创建不同的瓦片预设。面板右上角有三个按钮，分别是New Single Tile（单独的一个瓦片）、New Auto Tile（自动瓦片）、New Atlas(一整个地图瓦片集)。

现在使用的素材并不适用于AutoTile，所以我们点击New Atlas创建地图瓦片集。创建之后似乎没什么反应？点击下方任一瓦片，一些选项多了出来，右侧的Inspector面板也有了变化。

可以发现Godot帮我们在SpriteSheet中画好了蓝色网格，但是网格的尺寸似乎有些不对？
我们找到右侧的Inpector面板中的Snap Options选项，进行如下修改：

• Offset属性保持0x0，Step属性改为70x70，Separation属性改为2x2；

下方Selected Tile选项中：

• Subtile Size属性改为70x70，Subtile Spacing属性改为2：

TileSet属性调整

至于为何要这么调整，观察一下SpriteSheet图片里瓦片的排列规律就知道了。

然后选取我们需要用到的范围。TileSet面板中点击Region按钮，确保下方的「抗」字按钮是亮的（其实是是否贴合网格的意思），在下方选取你要用到的区域，贪心如我直接全选了。

TileSet范围选择

开始绘制

TileSet制作完毕，接下来就可以开始画地图啦。点击Scene面板里的TileMap节点，会发现工作区右侧多了一个面板，这就是我们刚才创建的TileSet预设。面板上部是当前TileMap包含的瓦片集，下部是当前选中瓦片集包含的所有瓦片，点击你喜欢的瓦片，左键绘制，右键擦除：

TileMap绘制

上方的这些按钮可以让瓦片旋转或翻转，扫把按钮可以还原更改：

TileMap绘制-瓦片旋转

我们先画一些看看效果，可以注意到工作区里有一个淡紫色的线框，表示我们之前设置的窗口大小。

初步画好的地图

别忘了保存场景，不然我们至今为止的努力就全部木大了。这里我在res://下新建了一个Levels文件夹，把场景保存为Level1.tscn.

保存场景

至此我们的游戏世界有了一个雏形，下一篇文章中将给游戏世界润色，加入背景显示，并介绍如何让游戏适配不同分辨率的设备。

下一篇：[Godot3游戏引擎实践]平台跳跃小游戏(二)-完善游戏世界