Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

使用圖塊集

前言

圖塊地圖 (TileMap) 是一種以圖塊為單位的網格,用來製作遊戲場景。使用 TileMapLayer 節點設計關卡有幾個優點。首先,你可以直接在網格上「塗畫」圖塊,比起一個一個放置 Sprite2D 節點效率高很多。其次,圖塊地圖針對大量圖塊繪製做過最佳化,可用於更大規模的場景。最後,你還可以為圖塊加上碰撞、遮蔽與導覽等功能。

要使用 TileMapLayer 節點,你需要先建立一個 TileSet。 一組 TileSet 是可以放在 TileMapLayer 節點上的圖塊集合。建立 TileSet 後,你就可以透過 TileMap 編輯器 來使用它們。

依照本教學操作時,你需要準備一張包含多個圖塊、且每個圖塊大小相同的圖片(大型物件可以切分成多個圖塊)。這種圖片稱作 圖塊表 (tilesheet)。圖塊不一定要是正方形,矩形、六角形,甚至等軸(類 3D 視角)都可以。

建立 TileSet

使用圖塊表

本教學使用來自 Kenney「Abstract Platformer」美術包的圖塊。完整資源包可於 這裡 取得,範例僅使用其中部分圖塊表。

64×64 圖塊表範例

64×64 圖塊表。作者:Kenney

新增一個 TileMapLayer 節點,然後在屬性面板中建立新的 TileSet 資源:

在 TileMapLayer 節點內建立新的 TileSet 資源

在 TileMapLayer 節點內建立新的 TileSet 資源

建立 TileSet 資源後,點擊該屬性值可在屬性面板展開相關設定。預設圖塊形狀為「正方形」,也可根據圖塊圖像選擇「等軸」、「半偏移正方形」或「六邊形」。若使用非方形圖塊,可能還需調整 Tile Layout**(圖塊排列)與 **Tile Offset Axis**(圖塊偏移軸)。最後,如果希望依據圖塊座標裁切圖塊,可啟用 **Rendering > UV Clipping,避免圖塊繪製超出台塊表分配區域。

在屬性面板將圖塊大小設為 64×64,以符合範例圖塊表:

將圖塊大小設為 64×64 以符合範例圖塊表

將圖塊大小設為 64×64 以符合範例圖塊表

如果要使用自動建立圖塊(如本教學範例), 必須先 設定圖塊大小,然後再建立 圖塊集(atlas) 。圖塊集會根據設定的大小,決定哪些區塊能加入 TileMapLayer(並非圖片每個區塊都會生成圖塊)。

打開編輯器下方的 TileSet 面板,將圖塊表圖像直接拖曳到面板上。系統會詢問是否自動建立圖塊,請選擇

依據圖塊表圖像內容自動建立圖塊

依據圖塊表圖像內容自動建立圖塊

這會根據你在 TileSet 資源指定的圖塊大小,自動建立所有圖塊,大大加快初期設定流程。

備註

使用自動產生圖塊時,圖塊表中*完全*透明的區域將不會建立圖塊。

如果有不希望出現在圖塊集中的圖塊,可以在圖塊預覽區上方選擇橡皮擦工具,點擊欲刪除的圖塊:

用橡皮擦工具從 TileSet 合集中移除不需要的圖塊

用橡皮擦工具從 TileSet 合集中移除不需要的圖塊

也可以直接按右鍵選擇 刪除 來移除圖塊,無需使用橡皮擦工具。

小訣竅

和 2D 及 TileMap 編輯器一樣,可以用滑鼠中鍵或右鍵平移 TileSet 面板,用滑鼠滾輪或左上角按鈕縮放預覽。

若要將多張圖塊表中的圖塊納入同一個 TileSet,請先建立多個圖塊集(atlas)並分別指定材質。雖然也能每個圖塊都用獨立圖檔,但建議還是使用圖塊表以方便管理。

你可以在中間欄位調整圖塊集(atlas)的屬性:

在 TileSet 面板的專屬屬性面板調整圖塊集屬性

在 TileSet 面板的專屬屬性面板調整圖塊集屬性

圖塊集支援下列屬性調整:

  • ID: 此圖塊集內唯一的識別碼,用於排序。

  • 名稱: 圖塊集的自訂名稱,建議用於描述用途(例:地形、裝飾等)。

  • 邊界: 圖塊表邊緣不作為圖塊的像素寬度。若你的圖塊表有邊界(如標示作者),可適當增加此值。

  • 間隔: 每個圖塊之間的像素距離。若圖塊表每格間有輔助線或間隔,請適當設定此值。

  • 紋理區域大小: 每個圖塊的像素尺寸。通常建議與 TileMapLayer 設定的圖塊大小一致(但不是強制)。

  • 使用紋理邊界: 勾選後會在每個圖塊四周加 1 像素透明邊,避免開啟過濾時出現紋理滲色。建議預設啟用,除非邊界導致算繪問題。

請注意,調整紋理邊界、間隔及區域大小可能導致部分圖塊無法正確分割。若需要重新自動產生圖塊,可在 TileSet 編輯器頂部的「三點選單」下選擇 在非透明紋理區域建立圖塊

變更圖塊集屬性後自動重新產生圖塊

變更圖塊集屬性後自動重新產生圖塊

使用場景集合

You can also place actual scenes as tiles. This allows you to use any collection of nodes as a tile. For example, you could use scene tiles to place gameplay elements, such as shops the player may be able to interact with. You could also use scene tiles to place AudioStreamPlayer2Ds (for ambient sounds), particle effects, and more.

警告

場景圖塊比圖集圖塊有更高的效能負擔,因為每個放置的圖塊都會個別產生一個場景實例。

建議僅在必要時才使用場景圖塊。如果只需要在圖塊中繪製精靈且不需進階操作,請改用圖集

本範例會先建立一個以 CPUParticles2D 為根節點的場景,將它存檔(與包含 TileMapLayer 的場景分開存),然後切換回包含 TileMapLayer 的場景。打開 TileSet 編輯器,在左側欄新增一個 場景集合

在 TileSet 編輯器中建立場景集合

在 TileSet 編輯器中建立場景集合

建立場景集合後,你可以在中間欄位輸入描述名稱。選擇該場景集合,再新增一個場景槽:

在 TileSet 編輯器中選取場景集合後建立場景圖塊

在 TileSet 編輯器中選取場景集合後建立場景圖塊

在右側欄選擇這個場景槽,然後點擊 快速載入**(或 **載入)來載入含粒子的場景檔案:

在 TileSet 編輯器新增場景槽後,載入場景檔案

在 TileSet 編輯器新增場景槽後,載入場景檔案

此時你的 TileSet 已有一個場景圖塊。切換到 TileMap 編輯器後,就能從場景集合中選用並像其他圖塊一樣繪製它。

將多個圖集合併成單一圖集

在同一個 TileSet 資源中用多個圖集有時很方便,但某些情況下(例如每個圖塊用一張圖)會變得很難管理。Godot 提供了將多個圖集合併為單一圖集的功能,讓整理更容易。

要執行此操作,你必須在 TileSet 資源裡先建立至少兩個圖集。然後在圖集列表下方點選「三個垂直點」功能表,選擇 開啟圖集合併工具

在建立多個圖集後開啟圖集合併工具

在建立多個圖集後開啟圖集合併工具

這會開啟一個對話視窗,你可以按住 ShiftCtrl 鍵點擊多個圖集來選取:

使用圖集合併工具對話視窗

使用圖集合併工具對話視窗

選擇 合併 會把選取的圖集合併成一個圖集(即 TileSet 內只剩一個圖集)。未合併的圖集會從 TileSet 中移除,但*原始圖集影像仍會保留在檔案系統*。如果不想移除未合併的圖集,請選擇 合併(保留原圖集)

小訣竅

TileSet 有*圖塊代理*系統。圖塊代理是一個對應表,用來通知 TileMap(使用該 TileSet)將指定的一組圖塊識別碼替換為另一組。

合併不同圖集時會自動設定圖塊代理,也可以透過上述「三個垂直點」選單開啟的 管理圖塊代理 視窗來手動設定。

當你變更圖集 ID 或想用某個圖集的所有圖塊取代另一個圖集時,手動建立圖塊代理就很有用。編輯 TileMap 時,也可將所有格子替換為對應的代理值。

向 TileSet 新增碰撞、導覽和遮擋

我們現在已經成功建立了一個基本的圖塊集。我們現在可以在 TileMapLayer 節點中使用它了,但它目前缺乏任何形式的碰撞偵測。這表示玩家及其他物件會直接穿過地板或牆壁。

如果使用 2D 導覽,還需要為圖塊定義導覽多邊形,以生成導覽網格,供代理用於尋路。

最後,如果你使用 2D 燈光和陰影 或 GPUParticles2D,你可能還希望 TileSet 能夠投射陰影並與粒子碰撞。這就需要為 TileSet 上的 “實體” 圖塊定義遮擋多邊形。

若要能夠定義每個圖塊的碰撞、導航和遮擋形狀,您首先需要為圖塊集資源建立一個物理、導航或遮擋圖層。若要這麼做,請選取 TileMapLayer 節點,在屬性檢視器中按一下圖塊集屬性值進行編輯,然後展開 物理圖層 並選擇 新增元素

在圖塊集資源屬性檢視器中建立物理圖層 (於 TileMapLayer 節點內)

在圖塊集資源屬性檢視器中建立物理圖層 (於 TileMapLayer 節點內)

如果你還需要導覽輔助,可以建立導覽層:

在 TileSet 資源屬性檢視器 (在 TileMapLayer 節點內部) 中建立導航圖層

在 TileSet 資源屬性檢視器 (在 TileMapLayer 節點內部) 中建立導航圖層

如果你需要支援光照多邊形遮擋器,可以建立遮擋層:

在 TileMapLayer 節點內的圖塊集資源屬性檢視器中建立遮擋圖層

在 TileMapLayer 節點內的圖塊集資源屬性檢視器中建立遮擋圖層

備註

本教學的後續步驟專門用於建立碰撞多邊形,但導覽和遮擋的步驟非常相似。它們各自的多邊形編輯器行為方式相同,因此為簡潔起見不再重複這些步驟。

唯一需要注意的是,圖塊的遮擋多邊形屬性是合集屬性檢視器中 算繪 分節的一部分。請確保展開該部分,以便編輯多邊形。

建立實體層後,你可以存取 TileSet 合集屬性檢視器中的 實體層 部分:

在選擇模式下打開碰撞編輯器

在選擇模式下打開碰撞編輯器

你可以在聚焦 TileSet 編輯器時按 F 快速建立矩形碰撞形狀。如果鍵盤快捷鍵不起作用,請嘗試按一下多邊形編輯器周圍的空白區域使其聚焦:

按 :kbd:`F` 鍵使用預設矩形碰撞形狀

F 鍵使用預設矩形碰撞形狀

在這個圖塊碰撞編輯器中,你可以使用所有二維多邊形編輯工具:

  • 使用多邊形上方的工具列可在建立新多邊形、編輯現有多邊形和刪除多邊形上的點之間切換。“三個豎點”功能表按鈕提供了其他選項,例如旋轉和翻轉多邊形。

  • 通過按一下並拖動兩點之間的直線來建立新點。

  • 按右鍵一個點(或使用上述移除工具並左鍵按一下)將其移除。

  • 通過中鍵或右鍵在編輯器中平移。(右鍵平移只能用於附近沒有點的區域)

你可以使用預設的矩形形狀,通過移除其中一個點來快速建立三角形碰撞形狀:

通過按右鍵其中一個角將其移除來建立三角形碰撞形狀

通過按右鍵其中一個角將其移除來建立三角形碰撞形狀

你還可以通過新增更多點,將矩形用作更複雜形狀的基礎:

為複雜圖塊形狀繪製自訂碰撞

為複雜圖塊形狀繪製自訂碰撞

小訣竅

如果你有一個大的圖塊集,為每個圖塊單獨指定碰撞可能會花費很多時間。尤其是在 TileMaps 中往往有許多具有常見碰撞模式(如實心塊或 45 度斜坡)的圖塊。要快速將類似的碰撞形狀應用到多個圖塊,請使用 一次為多個圖塊指定屬性 的功能。

為 TileSet 的圖塊分配自訂中繼資料

你可以使用*自訂資料層*來為各個圖塊分配自訂資料。可以用來儲存遊戲過程中所需的特定資訊,例如玩家接觸該圖塊時應該受到的傷害,以及是否能夠使用物理將圖塊摧毀。

資料是在 TileSet 中與圖塊進行關聯的:放置的所有圖塊使用的都是相同的自訂資料。如果你需要建立擁有不同自訂資料的變體圖塊,可以通過 建立備選圖塊 並為該備選圖塊更改自訂資料來實作。

在 TileSet 資源屬性檢視器中建立自訂資料圖層 (在 TileMapLayer 節點內)

在 TileSet 資源屬性檢視器中建立自訂資料圖層 (在 TileMapLayer 節點內)

針對遊戲中的特定屬性配置自訂資料層的範例

針對遊戲中的特定屬性配置自訂資料層的範例

改變自訂資料的順序不會損壞現有的中繼資料:TileSet 編輯器會在自訂資料屬性的順序發生改變後自動進行更新。

使用上面顯示的自訂資料圖層範例,我們正在指派一個圖塊,使其具有設定為 25damage_per_second 中繼資料,以及設定為 falsedestructible 中繼資料:

TileSet 編輯器的“選擇”模式下編輯自訂資料

TileSet 編輯器的“選擇”模式下編輯自訂資料

自訂資料也可以進行 圖塊屬性的繪製

在 TileSet 編輯器中使用圖塊屬性繪製來分配自訂資料

在 TileSet 編輯器中使用圖塊屬性繪製來分配自訂資料

建立內容

備註

這個功能和 Godot 3.x 中的*自動圖塊*使用了不同的實作方式。地形系統能夠完全替代自動圖塊,功能也更強大。與自動圖塊不同,地形系統支援不同地形之間的過渡,這樣就可以為同一個圖定義多個地形。

與以前不同的是,自動圖塊是一種特定型別的圖塊,而地形只是分配給合集圖塊的一組屬性。使用專門的 TileMap 繪製模式時就會用到這些屬性,該模式能夠對帶有地形資料的圖塊進行智慧選擇。這意味著地形圖塊既可以作為地形繪製,也可以像其他圖塊一樣作為單個圖塊繪製。

“完善”的圖塊集中通常會包含很多變體圖塊,適用於平臺、地板等位置的角落和邊緣。這種圖塊雖然可以手動放置,但是很快就會感覺非常麻煩。在程式式生成的關卡中如果要處理這種情況也很困難,需要編寫大量的程式碼。

Godot 提供 地形 以自動執行這類型的圖塊連接。這讓您可以自動使用「正確的」圖塊變體。

地形按照地形集群組。地形集有固定的模式,包括 Match Corners and SidesMatch CornersMatch sides (配對角落和邊緣、配對角落、配對邊緣)。模式決定了地形集中的地形如何相互配對。

備註

上述模式在 Godot 3.x 中對應的自動圖塊位元遮罩模式為 2×2、3×3或3×3 Minimal。也和 Tiled 編輯器中使用的模式類似。

選取 TileMapLayer 節點,前往屬性檢視器並在圖塊集 資源 中建立一個新的地形集:

在圖塊集資源屬性檢視器中建立地形集 (在 TileMapLayer 節點內)

在圖塊集資源屬性檢視器中建立地形集 (在 TileMapLayer 節點內)

建立地形集後,你**必須**在地形集*中*再建立若干地形:

產生金鑰儲存區

產生金鑰儲存區

在 TileSet 編輯器中,切換到“選擇”模式並按一下圖塊。在中間一欄展開**地形**部分,為圖塊分配地形集 ID 和地形 ID。-1 表示“沒有地形集”和“沒有地形”,因此你必須先將**地形集**設定為大於等於 0 的值,然後才能將**地形**設定為大於 0 的值。

備註

地形集 ID 和地形 ID 互相獨立。從 0 開始,不從 1 開始。

在 TileSet 編輯器的“選擇”模式中配置單個圖塊的地形

在 TileSet 編輯器的“選擇”模式中配置單個圖塊的地形

完成此操作後,你現在可以配置 地形對等位元 部分,該部分在中間一列中可見。對等位元決定了根據相鄰圖塊的情況放置哪個圖塊。“-1”是一個特殊值,指的是空位。

例如,如果一個地磚的所有位都設定為 0 或更大,那麼只有在 所有 8個相鄰圖塊都使用具有相同地形 ID 的圖塊時,它才會出現。如果圖塊的位設定為“0”或更大,但左上、上和右上的位設定為“-1”,則只有在其頂部(包括對角線)有空位時才會出現。

在圖塊集編輯器的選擇模式下配置單個圖塊上的地形對等位

在圖塊集編輯器的選擇模式下配置單個圖塊上的地形對等位

完整圖塊表的配置範例如下:

橫向磁碟區軸遊戲的完整圖塊表範例

橫向磁碟區軸遊戲的完整圖塊表範例

一個橫向磁碟區軸的完整圖塊表範例,帶可見地形對等位

一個橫向磁碟區軸的完整圖塊表範例,帶可見地形對等位

一次為多個圖塊指定屬性

有兩種方法可以同時為多個圖塊分配屬性。根據你的使用情況,一種方法可能比另一種方法更快:

使用多個圖塊選擇

如果您希望同時在多個圖塊上設定各種屬性,請在圖塊集編輯器頂部選擇 選取 模式:

完成此操作後,你可以按住 Shift 鍵,然後按一下圖塊,在右側欄中選擇多個圖塊。你還可以按住滑鼠左鍵然後拖動滑鼠來執行矩形選擇。最後,你可以按住 Shift 然後按一下選定的圖塊,取消選擇已選中的圖塊(不會影響選擇的其他部分)。

然後,你可以使用 TileSet 編輯器中間一列的屬性檢視器分配屬性。只有在此更改的屬性才會應用到所有選定的圖塊。與編輯器的屬性檢視器一樣,在你編輯之前,所選圖塊上的不同屬性將保持不同。

對於數值和顏色屬性,編輯完成後還能在合集中的所有圖塊上看到屬性值的預覽:

使用選擇模式選擇多個圖塊,然後應用屬性

使用選擇模式選擇多個圖塊,然後應用屬性

使用匯出樣板

如果要一次將單個屬性應用於多個圖塊,則可以使用*屬性繪製*模式來實作此目的。

在中間一列配置要繪製的屬性,然後點擊右列中的圖塊(或按住滑鼠左鍵)以將屬性“繪製”到圖塊上。

使用圖塊集編輯器繪製圖塊屬性

使用圖塊集編輯器繪製圖塊屬性

對於手動設定耗時的屬性(例如碰撞形狀),圖塊屬性繪製特別有用:

繪製碰撞多邊形,然後左鍵按一下圖塊以應用它

繪製碰撞多邊形,然後左鍵按一下圖塊以應用它

建立內容

有時,你想使用單一的圖塊圖像(在合集中只能找到一次),但要以不同的方式進行配置。例如,你可能想使用相同的圖塊圖像,但對它進行旋轉、翻轉或調變成不同的顏色。這就可以使用 備選圖塊 來實作。

小訣竅

從 Godot 4.2 開始,你不需要再特地建立備用圖塊來旋轉或翻轉圖塊。直接在 TileMap 編輯器中放置圖塊時,可以透過工具列上的旋轉/翻轉按鈕來調整。

要建立備選圖塊,請按右鍵 TileSet 編輯器顯示的合集中的基本圖塊,然後選擇 建立備選圖塊

在 TileSet 編輯器中按右鍵基礎圖塊建立替代圖塊

在 TileSet 編輯器中按右鍵基礎圖塊建立替代圖塊

如果目前處於“選擇”模式,則可編輯已選中的備選圖塊。如果目前不在“選擇”模式下,你仍然可以建立備選圖塊,但需要切換到“選擇”模式並選擇備選圖塊進行編輯。

如果看不到備選圖塊,請平移到合集圖像的右側,因為在 TileSet 編輯器中,備選圖塊總是出現在給定合集基礎圖塊的右側:

在 TileSet 編輯器中按一下替代圖塊後配置它

在 TileSet 編輯器中按一下替代圖塊後配置它

選擇備選圖塊後,你可以使用中間一列更改任何屬性,就像在基礎圖塊上一樣。但暴露的屬性列表與基礎圖塊不同:

  • 備用 ID: 此可選圖塊的唯一數位識別碼符。更改它會破壞現有的瓦片地圖,所以要小心!此 ID 還控制在編輯器中顯示的可選圖塊列表中的排序。

  • Rendering > Flip H: 如果為``true``,則圖塊水平翻轉。

  • Rendering > Flip V: 如果為``true``,則磁貼垂直翻轉。

  • Rendering > Transpose:**若設為 ``true``,圖塊會先逆時針旋轉 90 度,再垂直翻轉。實際應用上,若要將圖塊順時針旋轉 90 度但不翻轉,請同時啟用 **Flip HTranspose。若要順時針旋轉 180 度,請啟用 Flip HFlip V。若要順時針旋轉 270 度,請啟用 Flip VTranspose

  • Rendering > Texture Origin: 繪製圖塊時使用的原點。可以用來將圖塊進行相對於基礎圖塊的視覺偏移。

  • Rendering > Modulate: 繪製圖塊時的顏色乘數。

  • Rendering > Material: 此圖塊使用的材質。可用來對單一圖塊套用不同的混合模式或自訂著色器。

  • Z Index: 此圖塊的排序順序。數值越高,圖塊會顯示在同一層的其他圖塊之上。

  • Y Sort Origin: 基於 Y 座標(像素)進行圖塊排序時所使用的垂直偏移。這讓你在製作俯視角遊戲時,可以模擬不同高度的圖層。調整這個值有助於解決某些圖塊排序的問題。僅當 TileMapLayer 節點下 CanvasItem > OrderingY Sort Enabledtrue 時有效

你可以點擊備選圖塊旁的大型「+」圖示,建立新的備選圖塊。這等同於選取基本圖塊後按右鍵,再選擇「建立備選圖塊」。

備註

建立備選圖塊時,不會繼承基本圖塊的任何屬性。如果你希望備選圖塊與基本圖塊有相同屬性,必須重新在備選圖塊上設定。