跳转至

01-引擎安装与瓦片系统基础

1 下载引擎和导出模板

首先进入官网Godot Engine - 免费开源的 2D 与 3D 游戏引擎，下载安装godot。
教程使用的godot版本为4.6.1。我们需要考虑版本兼容性问题，Godot大体上村寻语义化版本的思路，所以同一个大版本中的小版本和补丁版本，一般都足够能兼容和迁移。只有在跨大版本，比如从3.x到4.x，才需要小心对待。

在界面中点击上面的Godot Engine下载游戏程序本体，下面的.NET是c版本。


Pasted image 20260420234544.png

之后下滑找到Export templates是导出游戏的模板，也需要下载。


Pasted image 20260420234645.png

将下载的引擎本体解压，解压的文件夹名最好删除其.exe后缀，注意解压得到的就是引擎本体了，所以要设置好解压位置，或者解压后手动迁移。

下载Export template之后，把它和引擎本体放在相同目录先。引擎本体其实并不大


Pasted image 20260420235833.png

这里我为了直观看到各个文件的大小
在powershell中执行下面的指令

Get-ChildItem | Select-Object Name, @{Name="Size"; Expression={"{0:N2} MB" -f ($_.Length / 1MB)}}

得到
Name                                     Size
----                                     ----
Godot_v4.6.2-stable_export_templates.tpz 1,193.91 MB
Godot_v4.6.2-stable_win64.exe            164.40 MB
Godot_v4.6.2-stable_win64_console.exe    0.19 MB

可以看到template达到将近1.2GB，而引擎主体只有164MB。

除了官网之外，我们其实也可以在 GitHub 的 Godot 仓库的 release 页面找到更多版本和下载内容，不过对于新手同学来说呢，我不太建议从 GitHub 下载，因为版本和构建选项会更多，反而容易干扰你的注意力。

2 创建项目

打开Godot_v4.6.2-stable_win64.exe ，点击左上角的“创建”按钮，点击“浏览”，选择合适的目录和项目名WTField_tutorial。其他渲染器之类的目录先保持默认。
默认打开的是 3D 视图，所以我们现在引擎上方点击 2D 按钮，切换到 2D 工作区。
我们点击左上角的创建 2D 场景按钮，先创建一个根节点。


Pasted image 20260421084429.png

我们可以先把节点理解成一个各司其职的小零件，那比如显示图像，处理碰撞，播放声音，而场景就是把这些零件按树状结构组织起来之后形成的一个可用的功能单元。

角色可以是一个场景，子弹可以是一个场景，整个关卡同样也可以是一个场景。

这时候我们可以先试着把这个场景跑起来，点击右上角的三角形运行按钮，它会让我们要选择主场景是哪一个，因为在项目开发过程中，我们往往会创建很多个场景，主菜单可能是一个场景，游戏对局可能是另一个场景，甚至不同关卡也可能各自是独立的场景，所以这里我们直接选择当前这个场景。

由于我们还没有保存，它会提示我们选择运行前的保存位置，严谨一点的话呢，我们可以先创建一个文件夹，专门用来存放场景文件和场景对应的脚本文件，然后把这个场景文件名也改成 game。


Pasted image 20260421084810.png

文件夹名和场景都应使用小写

这里还有一个值得顺手一提的小细节，我们的文件夹名字和场景都使用小写，也就是类似 snake_case 这种蛇型命名法，这是 Godot 官方推荐的最佳实践.

因为 Windows 和默认配置下的 macOS 文件系统是不区分大小写的，而 Linux 发行版的文件系统默认区分大小写，Godot 导出到 PCK 虚拟文件系统又是区分大小写的，所以如果你的资源名风格前后不统一，导出项目的时候呢，就可能会踩到大小写有关的坑。

3 素材导入与像素风格设置

在文件系统面板右键选择“在文件管理器中打开”，将解压后的 resource 文件夹（三个子文件夹分别对应音频autio、字体font、纹理texture）复制进去，引擎会自动导入。
Pasted image 20260421085359.png
随便将一个图片拖入到场景中，就可以在左侧看到godot自动帮我们创建了一个新的节点。


Pasted image 20260421085644.png

在编辑器中按住鼠标滚轮（即中键）可以拖动地图，滚动滚轮可以缩放。按下alt,并按下鼠标滚轮拖动地图，也可以缩放地图。

此时如果把编辑器放大一点，就可以看到图片变得非常模糊。这是因为像素游戏需要特殊设置。点击“项目”->“项目设置”，在“渲染”->“纹理”中，将默认的纹理过过滤改为 Nearst（最近邻）

  • Nearst（最近邻）：直接采取最邻近的像素颜色，边缘利落，符合像素风格观感。
  • 线性过滤：会参考周圆像素进行平滑混合，导致像素边缘发糊。

之后我们选中这个新创建的节点，按下“delete”键把它删掉。接下来我们就要开始进入真正的游戏场景开发了。

严谨呢，我们把这个叫 Node 2D 的根节点也命名称和场景相同的名字。在场景内部节点的命名上，最推荐使用大驼峰秘密法，也就是每个单词首字母都大写的这种方式，养成统一的命名风格和项目习惯能减少后期的麻烦。

4 瓦片系统

4.1 新建TileMapLayer

我们先在 Game 节点右键，选择添加子节点，然后在上方做的框输入 t，你会看到这里有两个名字很像的节点，一个是 timap，一个是 time maper

time map 已经被标记为弃用，也就是旧版的地图节点，官方不再推荐在新版本中继续使用，所以我们直接使用 timeap layer。

我们可以在官网上找到各种节点的说明书。进入官网，点击右上角选择进入文档。之后点击左下角把语言切换到zh-cn的简体中文版本。


Pasted image 20260421090714.png

之后点击左上角的搜索框，输入tile，在搜索结果里点击“使用TileSet”，就可以进入tileset的教程。使用 TileSet — Godot Engine (4.x) 简体中文文档


Pasted image 20260421091001.png

4.2 新建TileSet

回到项目本身，

  • 点击创建按钮，新建一个 TileMapLayer 节点。
  • 为了后面和装饰物瓦片层区分开，我们这里直接按 F2 或者右键重命名，把它改成 GroundTileMapLayer。
  • 然后在右侧的检查器里可以看到Tile Set这里是空的。点击新建 TileSet。
  • 这时候你会注意到在下方的面板里以哦个那个有两个子页面，分别叫 TileMap 和 TileSet。
    • TileMap是用来带在二维网格上摆放瓦片、绘制地图的节点
    • TileSet则是它要使用的瓦片资源库，里面不只是存放瓦片图片，还可以给每种瓦片附加碰撞、导航、遮挡等额外信息。
  • 可以把TileSet理解为颜料本身，而TileMap就是调色板。而TileMapLayer是我们实际执行绘画操作的画布。

Pasted image 20260421160427.png

回到项目里，

  • 我们要先创建图集，选择TileSet这个子页面。
  • 点击最下方的加号按钮，选择图集。
  • 然后在打开的窗口中找到我们的静态瓦片纹理。
  • 双击选中之后，它会询问我们是否自动创建图块。点击“是”就可以。

Pasted image 20260421154336.png

接着把下面的这个面板拉大一些。就能看到Godot能够按照图片中的瓦片区域，将其切分成了小单元格。
后面我们就可以直接拿这些切好的瓦片，开始铺设真正的地面地图了。


Pasted image 20260421154413.png

现在点击下方的 TileMap 页面，就可以选择瓦片进行绘制了。点击右上角的运行按钮，我们就能看到绘制出来的瓦片已经一模一样地出现在游戏窗户中。

接下来开始绘制地画。我们先在下方窗口里选择矩形工具，填充出 \(16 \times 16\) 的地图区域打一层底。


Pasted image 20260421154520.png

选择其他类型的瓦片丰富一下地图区域。按住shift可以同时选择多个瓦片。


Pasted image 20260421160054.png

4.3 添加动态瓦片

这些是静态瓦片的添加方法。对于带动画的动态瓦片，我们需要按照下面的步骤操作：

  • 来到TileSet页面，点击添加“+”按钮
  • 询问是否自动创建图块时点击“否”，因为我们需要手动指定动画帧序列，不需要它现在帮我们自动切好。如果手快选择了“是”，则需要点击上面的选择按钮，框选全部自动生成的瓦片，按下delete键把它们删掉。

Pasted image 20260421154741.png


Pasted image 20260421154808.png


Pasted image 20260421154834.png

  • 之后点击TileSet里面的“设置”，在右侧的瓦片图集中，拖拽框选第一列下方的四个瓦片网格。最上方的瓦片比较特殊，我们稍后处理。
  • 切回选择面板，点击第一个亮级的瓦片，之后在左侧的动画属性里，你会看到速度和模式。
    • 速度决定动画每秒播放多少针。
    • 模式决定是同步播放还是随机播放。

  • 上面三行瓦片(按住shift点击可以多选)可以设置速度为 8.0，模式为 Random。最后一行传送带瓦片可以设置速度为 8.0，把模式设置为 Default。
    Pasted image 20260421155125.png
    第一帧的属性设置好之后，下面就是把后面的动画帧加进去。

  • 重新选择纵向的四个Tile，在左侧展开 Frames，点击三次添加元素按钮，把每个片都设置成了四帧动画。


Pasted image 20260421155229.png

之后回到TileMap中选择动态瓦片.png， 第一个瓦片，就可以在地图中自由防止了，并且可以在编辑器中立即看到它的动画效果。

4.4 装饰物瓦片层

动态瓦片最上面两行动画不是铺在地板里的，而是盖在地面瓦片之上的。可以把它理解为装饰物瓦片层或者覆盖物瓦片层。它的下面是我们已经画好的地板瓦片层


Pasted image 20260421160322.png

  • 所以需要创建一个新的瓦片层，把它命名为OverlayTileMapLayer.
  • 然后在右边新建TileSet，再到下方窗口里添加图集。选择刚才那张“动态瓦片.png”，依旧在弹出的提示中选择“否”，不要自动创建瓦片。

  • 接着在“设置”面板下，框选第一帧图。
    这时可以发现，如果直接按照默认方式来做，这个纵向占据了两个单元格的瓦片会被当作两个独立图块。

  • 先切换到“选择”面板，把刚才添加的面块删掉。

  • 在“设置”面板里，在“纹理区域大小”这里，把Y方向的尺寸改成32。因为我们的素材基础单元格是\(16\times 16\) 像素的, 而这个装饰物瓦片实际上是 \(16\times 32\)
    Pasted image 20260421161255.png

  • 现在再重新点击第一个图块进行设置即可。


Pasted image 20260421161423.png

  • 将速度设置为4.0，点击添加元素，把后续的三个关键帧都添加进来。
  • 之后进入TimeMap，选中第一个图块，就可以把它绘制到地图上了。
  • 然后在场景树中点选根节点，就能在编辑器中预览到比较接近最终效果的地图画面了。

Pasted image 20260421161940.png

  • 此时可以进一步丰富一下画面。

5 Camera2D节点

然后点击运行，我们会发现地图只所在了画面左上角小小的一块区域中。就算把窗口最大化，画面中的内容也没有变大。


Pasted image 20260421162316.png

5.1 调整Offset和Zoom

为了让画面居中显示，我们需要在场景中添加一个Camera2D的节点。


Pasted image 20260421162526.png

现在我们场景中每个格子是\(16\times 16\)，场景中一共有\(16\times 16\) 个格子，所以整个场景的像素就是 \(256\times 256\).

  • 我们选择Camera2D节点，在右侧设置Offset为地图尺寸的一半。也就是x=128px, y=128px
  • 如果我们还想让画面中的内容更大一些。我们需要设置Zoom属性。我们这里把Zoom设置为x=2, y=2，从而把画面中的内容放大2倍。
Camera2D的Zoom属性

将鼠标悬停在Zoom上可以看到这个属性的描述。Zoom属性越大，画面里的内容就会越大，看到的范围就会越小。
Pasted image 20260421164123.png
如果我们想让画面中的内容放大到原来的2倍，就可以把Zoom属性设置为x=2, y=2

5.2 调整嵌入模式

这样设置之后再运行项目


Pasted image 20260421164227.png

可以看到画面已经被居中了，并且也放大了一点。全屏化后，可以看到外面都是黑色区域。这是因为我们上方的嵌入模式在默认状态下为“固定大小”选择“保持宽高比”后串钩周围的黑色被填充起来了。


Pasted image 20260421164336.png


Pasted image 20260421164717.png


Pasted image 20260421164755.png

但是即便如此，画面内容还不够大。当我们缩小窗口，还可能出现画面无法完全显示的问题。


Pasted image 20260421164824.png

5.3 设置窗口拉伸模式

接下来，我们就要看一组像素游戏的常见设置了

  • 我们通过最上方菜单栏进入“项目”“项目设置”

Pasted image 20260421165030.png

  • 在“显示->窗口->拉伸->模式”中可以看到默认的disbled是不进行拉伸。我们想要画面铺满整个窗口，所以需要修改为canvas_items

Pasted image 20260421165113.png

设置 display/window/stretch/mode

设置 display/window/stretch/mode: String = "disabled"
定义如何将基础大小进行拉伸，从而适应窗口或屏幕的分辨率。

  • "disabled": 不进行拉伸。场景中的一个单位对应屏幕上的一个像素。显示 > 窗口 > 拉伸 > 比例 在该模式下无效。推荐非游戏应用程序使用。
  • "canvas_items": 将项目设置中指定的基础大小拉伸至覆盖整个屏幕（会考虑 显示 > 窗口 > 拉伸 > 比例）。这样所有东西都是直接按照目标分辨率渲染的。3D 不受影响，但在 2D 中精灵的像素和屏幕像素就不再是 1:1 的关系了，缩放可能导致画面问题。推荐大多数非像素风的游戏使用，尽管像素风游戏也可以使用该拉伸模式（尤其是 3D）。
  • "viewport": 将根 Viewport 的大小设为项目设置中“显示”部分中指定的基础大小。场景会现在这个视口中渲染。最终会将该视口缩放至适合屏幕的尺寸（会考虑 显示 > 窗口 > 拉伸 > 比例）。推荐像素风游戏使用。

5.4 调整背景颜色

在“项目 > 项目设置 > 渲染 > 环境” 中可是默认清屏颜色，我们把它调整到15,15,15的深色


Pasted image 20260421171513.png

设置完窗口拉伸模式和背景颜色之后，最终效果如下图


Pasted image 20260421171645.png

评论

如果你已登录 GitHub，就可以直接在这里评论。