笨方法:学习制作 AutoTile 用的 Tileset

作者:mnikn
2023-10-17
2 0 0

初衷

我看过很多 AutoTile 和 Tileset 相关的视频,每次看视频时都能理解,但到了自己真正去做 AutoTile 要用的 Tileset 时,基本上不知道如何下手。想了想,原因应该是 Tileset 的 Tile 比较多,不清楚应用 AutoTile 时该怎么对应,所以我用笨办法,把每一个 Tile 的对应制作方式都记录下来。

所用 Tileset 的形式,我参考的是# Godot 4 Tutorial - Heart Platformer P7 - Autotile + Sloped Tiles,有需要的读者也可以参考对比。

AutoTile 的规则

在做 Autotile 用的 Tileset 前,先简单讲下 Autotile 的规则,由于我用 Godot,这里就以 Godot 4 的 Autotile 设置方式为例。Godot 4 中,Autotile 的规则有 Match Corners and Sides、Match Corners、Match Sides 三种,后两种实际上都是简化版本,所以下面以 Match Corners and Sides 为例。

设置 Autotile 时,每个 Tile 会被细分为 9 个小块,以数字 1-9 标记。这 9 个小块的设置方式决定了当前这个 Tile 是否会出现。

当你设置了 “5” 时,代表着当前的 Tile 启用,如果没有设置 “5” ,即使再怎么设置其它小块,这个 Tile 也不会启用。

那旁边 1-9 的小块标记又是什么意思呢?这代表着当前 Tile 在什么情况下出现。9 个数字标记的是其它 Tile 出现的方向,如 1 是左上方、4 是正左方、9 是右下方。举个例子,如果你只标记了 “4” 和 “5” ,那么只有在正左方有 Tile,同时其它方向(左上方、左下方、正上方等等)没有 Tile 的情况下,当前 Tile 才会启用。

开始制作 Titleset

回归正题,我们从零开始做一个完整的 AutoTile 用的 Tileset,这里每个 Tile 的大小是 16x16。首先,看看最终图的 AutoTile 设置方式:

其中主要的难点在于衔接用的 Tile 太多,根本不知道怎么对应。不过,衔接用的 Tile 实际上也是从基础 Tile 演变而来,所以我们先做基础 Tile。

基础 Tile

基础大块 9 格
首先是基础的大块 9 格,可以说,后续其它 Tile 都是从这 9 格演变来的:

对应 AutoTile 的设置方式:


竖长条 3 格
竖长条的 3 格,一般是从大块 9 格中拿取左右边缘,然后拼接:

对应 AutoTile 的设置方式:


横长条 3 格
横长条的 3 格,同样,是从大块 9 格中拿取上下边缘,然后拼接:

对应 AutoTile 的设置方式:


单格
单独的一格 Tile,一般是从大块 9 格中拿取...边缘,然后拼接成一格:

对应 AutoTile 的设置方式:

基础 Tile 完成!

有了上面这些基础的 Tile 后,用 AutoTile 看起来大体是正常的,但如果你画一些不太方正、不规则的 Map 时,会发现连接处有些不协调:

接下来就要做不同情况下衔接用的 Tile 了,这部分也是最复杂的。

衔接用 Tile

衔接用的 Tile 众多,不过大部分其实都是复制粘贴。


大块 16 格
我们从大块 16 格衔接开始,如下图:

发现规律了吗,外围边缘其实和基础 Tile 的 9 格一样,不同的只是里面的衔接内容。而这里的衔接内容要怎么画呢?一般会先画最里面的 4 格,确定左上、左下、右上、右下四角的衔接内容,然后向四方扩散,画周边 Tile,把对应的衔接内容复制过去就好:

对应 AutoTile 的设置方式:


竖长条 4 格
接下来是竖长条的 4 格,一般是从上面的大块 16 格中抽取拼接:

对应 AutoTile 的设置方式:


横长条 4 格
横长条的 4 格,一般是从上面的大块 16 格中抽取拼接:

对应 AutoTile 的设置方式:


单格
四角都有衔接的单格:

对应 AutoTile 的设置方式:


L 型 6 格
最后是零散的、没有边缘的各种衔接内容的排列组合,我把它们称为 L 型 6 格:

对应 AutoTile 的设置方式:

小结

至此,一个 Autotile 用的 Tileset 就基本上完成了。制作过程中,一定会发现有很多重复的地方,实际上,我记得有个工具只要给出几个基础 Tile 就能生成完整的 Tileset,不过我忘记它叫什么了(有了解的朋友可以说下)。印象中要收费,所以我还是自己做出来算了。

上述做好的文件在:https://mnikn.itch.io/autotile-template,有兴趣的话可以看看。


本文为用户投稿,不代表 indienova 观点。

近期点赞的会员

 分享这篇文章

您可能还会对这些文章感兴趣

参与此文章的讨论

暂无关于此文章的评论。

您需要登录或者注册后才能发表评论

登录/注册