用笨方法學做 autotile 用的 tileset


3樓貓 發佈時間:2023-10-10 00:32:28 作者:mnikn Language

我看了很多次 autotile 和 tileset 相關的視頻了,看視頻時能理解,但是到了自己真正要做 autotile 要用的 tileset 時基本上不知道怎麼做,想來想去原因應該是 tileset 的 tile 比較多,做起來不知道 autotile 時怎麼對應,所以我把每一個 tile 的製作的對應方式都記錄下來。 tileset 的形式我是參考YouTube視頻“# Godot 4 Tutorial - Heart Platformer P7 - Autotile + Sloped Tiles”,可以作為參考對比。

autotile 的規則

在做 autotile 用的 tileset 時,先簡單講下 autotile 的規則,由於我用 godot,這裡就以 godot4 的 autotile 設置方式為例, godot4 中 autotile 的規則有 Match Corners and Sides、Match Corners、Match Sides 三種,Match Corners、Match Sides 實際上都是簡化版本,例子中是以 Match Corners and Sides 為例。
在設置 autotile 時,每個 tile 會被細分為 9 個小塊,以下面的 1-9 標記為例,這 9 個小塊的設置方式決定了當前這個 tile 是否會出現。
當你設置了 “5” 時,代表著當前的 title 啟用,如果沒有設置 “5” 的話,即使再怎麼設置其他小塊,這個 title 也不會啟用。 那旁邊 1~9 的小塊標記又是什麼意思呢?這個代表著當前 title 在什麼情況下出現。1~9 小塊標記的是其他 tile 出現的方向,如 1 是左上方、4 是正左方、9 是右下方這種。如你只標記了 “4” 和 “5” 的話,當前 title 就會在只有正左方有 tile,同時其他方向(左上方、左下方、正上方等等)沒有 title 的情況下,當前 title 才會使用。

開始做 titleset

迴歸正題,我們從零開始做一個完整 autotile 用的 tileset,這裡每個 tile 的大小是 16x16,首先看看最終圖的 autotile 設置方式:
其中主要的難點在於銜接用的 tile 太多,根本不知道怎麼對應,不過實際上銜接用的 tile也是從基礎 tile 演變來的,我們先做基礎 tile。

基礎 tile

基礎大塊 9 格 首先是基礎的大塊 9 格,可以說後面其他 tile 都是從這 9 格演變來的:
對應 auto tile 的設置方式:
豎長條 3 格 豎長條的 3 格,一般是從大塊 9 格中拿邊緣然後拼接:
對應 auto tile 的設置方式:
橫長條 3 格 橫長條的 3 格,一般是從大塊 9 格中拿邊緣然後拼接:
對應 auto tile 的設置方式:
單格 最後一個單獨的一格 tile,一般是從大塊 9 格中拿邊緣然後拼接成一格:
對應 auto tile 的設置方式:
基礎 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

© 2022 3樓貓 下載APP 站點地圖 廣告合作:asmrly666@gmail.com