教程:图形课程#1 背景与瓦片

这是专为那些想要首先尝试使用自定义图像进行各种操作的用户准备的教程课程。
在参加本教程课程之前,建议您先完成以下内容:

此外,本课程将继续使用在第一个教程中创建的项目。如果您已将其删除,请从教程开始处重新准备教程项目。

步骤1:将图片添加到舞台。

  1. 请下载以下示例图片。
    test_picture

  2. 打开教程项目。

  3. 选择左下角文件系统窗口中要放入图片的文件夹。也可以通过右键菜单新建文件夹。

  4. 将刚才下载的图片从资源管理器拖放到文件系统中。您应该会在[文件系统]所选文件夹中看到已导入的 test_pitcture.png。
    image
    请注意,不仅限于图片,所有素材都需要先放入文件系统后再使用。

  5. 选择任意图层,将 test_picture.png 从文件系统拖放到舞台的任意位置。

  6. 您应该会在舞台上看到图片。放置 png 等图片文件时,系统会自动生成一个用于处理图像的 [Sprite2D] 节点,并将其作为纹理分配给该节点。

  7. 放置 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. 背景本是一张纵向的小图,却变成了横向的大图,这是为什么呢?这是因为我们使用了 Godot 的节点 [Parallax2D],它允许进行创建视差背景的设置。各个 View 节点只是将 [Parallax2D] 的名称进行了更改。让我们看看具体内容,请选择 [DistantView] 节点。

  6. 您可以看到检查器中有几个设置项,下面简单说明每一项:

项目 概要
Scroll Scale 指定相对于相机移动1个单位时,图层移动的距离。数值越低,图层移动越慢,看起来越远。对于前景等位于角色前方的对象,请设置1或更大的值。
Scroll Offset 设置视差效果的偏移量,目前可以忽略此项。
Repeat Size 指定重复的大小,通常设置为与所用纹理图像相同的尺寸。当用原始尺寸的图像替换背景时,需要重新设置此项。
Autoscroll 图层会自动向指定方向移动,可用于表现云朵向左流动等效果。在本图中,已设置为每秒向右移动3像素。
Repeat Times 背景重复的次数,以第一张图像的位置为中心,按右、左、右、左的顺序扩展。

不妨尝试修改这些设置,或替换 Middle 和 Near 的图像进行测试。
如果您想使用自己制作的图像,请像步骤1那样将其放入文件系统中再进行应用,此时需要设置 Repeat Size。

注意
002_forest 和 003_cave 是用于表现室内视差效果的素材,直接应用会导致 NearView 位置偏移。使用时,请将 NearView 的 Node2D>Transform>Position 中的 Y 坐标从 360 修改为 -180,即可调整至正确位置。

步骤 3:尝试添加新图块
接下来,为了加载您的图块,请添加一个新的图块图层并创建图块。
如果您没有合适的图块素材,请使用以下示例图块。

  1. 创建用于设置的节点。在场景窗口中选择 [BaseLayer],然后单击 + 按钮。

  2. 将弹出节点选择窗口,请选择 [TileMapLayer] 并创建。在搜索栏中输入“tile”进行筛选,应该更容易找到。
    *请注意,有一个名称相似的 [TileMap],但它是旧功能的节点,请勿混淆。

  3. 选择已创建的图层,在检查器窗口的 TileSet 中选择 New TileSet。


  4. <空> 将变为 TileSet,请再次单击展开并进行设置。
    Tile Size:请调整为您创建的单个图块的大小。示例图片为 24px。
    之后,请选择 Physics Layers 并添加 + 元素。如果没有 Physics Layers,则无法创建墙壁碰撞判定,角色将无法站在图块上。



    *本教程假设图块为矩形,但您可以在 Tile Shape 中更改为四分之一视图或六边形。

  5. 选择后,请检查底部中央的面板,切换到图块设置。这是用于管理图块的标签页。从文件系统拖放您希望加载到面板中的图块。


  6. 将打开用于设置图块分割的窗口。请确认图块大小是否正确,然后单击“是”。

  7. 接下来,您可以选择是否作为自动图块(AutoTile)加载,但示例图块和您的图块可能都不适合自动图块格式。在此请单击“否”。关于自动图块的说明将在下一步骤中进行。

  8. 图块应该已按指定大小分割并加载。如果出错,请使用垃圾桶按钮删除并重新加载。接下来,为图块创建墙壁碰撞判定。切换到选择(Select)标签后,在右侧画面中拖动以一次性选择所有图块。

  9. 将打开图块设置窗口,请展开 Physics > Physics Layer 0。如果不存在,请检查是否在步骤 4 中忘记了创建物理图层。

  10. 选择添加点工具,然后单击四个角以添加墙壁碰撞判定的顶点。选择四个角后,最后再次单击最初添加的顶点以闭合多边形,即完成。红色的墙壁碰撞判定已创建。



    *在添加左上角顶点时,容易误点击缩放比例,请注意。
    *如果顶点偏移,可以选择蓝色箭头工具进行移动。也可以使用红色叉号工具删除顶点。
    *如果您正在创建非正方形的墙壁碰撞判定,请仅选择该图块,编辑顶点以创建正确形状的碰撞判定。

  11. 切换到图块地图面板后,即可放置图块。请选择您喜欢的图块并进行放置。由于已设置墙壁碰撞判定,测试运行时应该可以站立。


    *如果按照说明正确创建,此图块将显示在基础图层的最前面。在 Godot 中,场景画面中位置靠下的节点会优先渲染。如需更改,请尝试通过拖放 TileMapLayer 来调整顺序。

  12. 好了,您已经成功设置了自定义图块,但逐个设置可能有些不便。在下一步骤中,让我们尝试使用自动图块(AutoTile)。

步骤4:自动平铺
ACTION GAME MAKER的自动平铺功能利用了Godot的“地形(Terrain)”功能。

该功能允许用户自由创建自动平铺,以便于操作。但在ACTION GAME MAKER中,如果按照规定的格式创建图像,系统会自动将其识别为自动平铺。
本次将尝试该功能。

  1. 首先,请下载以下测试用平铺图像并将其加载到文件系统中。
    test_autotile

  2. 按照与步骤3相同的步骤,选择要加载的TileMapLayer。本示例的尺寸为24×24。如果在步骤3中使用了不同的平铺尺寸,请指定现有的[Base]图层等。

  3. 打开底部中央面板中的TileSet,将test_autotile.png从文件系统拖放到其中。与之前一样,会弹出平铺分割窗口,请选择“是”。

  4. 在随后的窗口中,询问是否以自动平铺格式加载时,请选择“是”(这与之前不同)。此时,“墙壁判定设置”和“地形设置”将自动完成,并可以将其作为自动平铺使用。

  5. 将底部面板从TileSet切换至TileMap,并选择“Terrains”。您应该能看到刚才创建的平铺被设置为Terrain_Set X的auto_tile_00。
    *如果未显示,尝试先选择另一个节点,然后再重新选择该节点,有时即可显示。

  6. 选择Terrains并尝试放置自动平铺。您可以看到,根据相邻平铺的形状,平铺会自动切换。本示例平铺为了更清晰地展示自动平铺的放置判定逻辑,已将其连接关系可视化。

  7. 只要按照与上述自动平铺相同的格式创建,即使平铺尺寸不是24x24,也可以作为自动平铺加载。为了方便用户创建自定义自动平铺,我们准备了除判定区域外其余部分透明的图像模板。请在制作自定义自动平铺时将其作为参考使用。
    tile_template

图形课程后续内容请见: