Up to date

This page is up to date for Godot 4.2. If you still find outdated information, please open an issue.

使用圖塊地圖

前言

圖塊地圖 (TileMap) 是一組用來建立遊戲畫面的圖塊 (Tile) 網格。使用 TileMap 來設計關卡有許多的好處。首先,通過圖塊地圖便能通過將圖塊「畫」到網格上來繪製畫面,比起通過一個一個將 Sprite 節點放到畫面上來說快多了。再來,通過圖塊地圖也能製作更大的關卡,因為圖塊地圖有為繪製大量網格進行最佳化。最後,也可以給圖塊地圖加上碰撞區域、遮擋、圖塊的導覽區域,且可以為 TileMap 新增額外的功能。

要使用圖塊地圖,你需要首先建立一個 TileSet。TileSet 是圖塊集,也就是能夠放置到 TileMap 節點上的圖塊的合集。建立 TileSet 之後,你就可以:ref:`使用 TileMap 編輯器 <doc_using_tilemaps>`放置圖塊。

要跟隨這個指南進行操作,你需要一張包含若干圖塊的圖片,每個圖塊的大小都應該相同(較大的物件可以拆成若干個圖塊)。這種圖片叫做*圖塊表*(Tilesheet)。圖塊不一定必須是正方形的:可以是矩形圖塊、六邊形圖塊、等軸圖塊(偽 3D 透視)。

建立 TileSet

使用檔案

本處的示範專案使用了來自 Kenney 製作的「Abstract Platform」藝術包中的下列網格。可以在 此處 找到該藝術包中所有的網格,但本處的示範專案只會使用一小部分。

圖塊表範例,64×64 圖塊

64×64 圖塊的圖塊表。作者:Kenney

新建 TileMap 節點,選中,然後在屬性面板中新建 TileSet 資源:

在 TileMap 節點中新建 TileSet 資源

在 TileMap 節點中新建 TileSet 資源

建立 TileSet 資源後,在屬性面板中點擊該值可以將其展開。預設圖塊形狀是 Square(正方形),但是你也可以根據圖塊圖像中的形狀去選擇 Isometric(等軸)、Half-Offset Square(半偏移正方形)、Hexagon(六邊形)。如果使用了 Square 以外的圖塊形狀,你可能還需要調整 **Tile Layout**(圖塊佈局)和 **Tile Offset Axis**(圖塊偏移軸)等屬性。最後,如果你想要讓圖塊被圖塊座標裁剪,還可以啟用 **Rendering > UV Clipping**(渲染 > UV 裁剪)屬性。這樣就能夠保證圖塊無法繪製到它們在圖塊表上分配的區域之外。

在屬性面板中將圖塊大小設定為 64×64,與範例圖塊表相配對:

將圖塊大小設定為 64×64,與範例圖塊表相配對

將圖塊大小設定為 64×64,與範例圖塊表相配對

如果依賴於自動圖塊建立(就像我們即將要做的那樣),您必須在建立*合集***之前**設定圖塊大小。合集將確定哪些圖塊可以新增到TileMap節點(因為並不是圖像的每一個部分都是有效的圖塊)。

在編輯器底部面板中點擊 TileSet,然後點擊左下角的“+”號圖片按鈕增加一個新的合集:

使用底部面板來給 TileSet 建立一個新合集

使用底部面板來給 TileSet 建立一個新合集

建立合集之後,你必須為其分配圖塊表。在底部面板的左欄中選中合集,然後點擊**紋理**屬性的值,選擇**快速載入**(或**載入**)。請在顯示的檔對話方塊中指定影像檔的路徑。

為新建立的 TileSet 合集載入圖塊表圖像

為新建立的 TileSet 合集載入圖塊表圖像

指定有效的圖像後,會問你要不要自動建立圖塊。請回答**是**:

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

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

這將根據您之前在 TileSet 資源中指定的磁貼尺寸自動建立磁貼。這將大大加快初始磁貼設定的速度。

備註

使用基於圖像內容的自動瓦片生成功能時,瓦片表中 完全 透明的部分將不會生成瓦片。

如果不希望地圖冊中出現瓦片表中的瓦片,請選擇瓦片組預覽頂部的橡皮擦工具,然後按一下希望刪除的瓦片:

使用橡皮擦工具刪除 TileSet 地合集中不需要的圖塊

使用橡皮擦工具刪除 TileSet 地合集中不需要的圖塊

您也可以按右鍵磁貼,選擇 刪除 ,作為橡皮擦工具的替代。

小訣竅

與 2D 和 TileMap 編輯器一樣,您可以使用滑鼠中鍵或右鍵平移整個 TileSet 面板,並使用滑鼠滾輪或左上角的按鈕進行縮放。

如果你想從幾個 tilesheet 圖片中摘取一個 TileSet 的圖塊,請在繼續處理之前建立其他合集並為它們一一分配紋理。也可以通過這種方式為每個圖塊使用一個圖片(儘管建議使用 tilesheets 以提高可用性)。

您可以調整中間的列中合集的屬性:

在專用屬性面板中調整 TileSet 合集屬性(TileSet 面板的一部分)

在專用屬性面板中調整 TileSet 合集屬性(TileSet 面板的一部分)

可以在合集上調整以下屬性:

  • ID: 識別字(該 TileSet中的唯一),用於排序。

  • 名稱: 合集的人類可讀名稱。在此處使用描述性的名稱來方便管理(例如“地形”,“裝飾”等)。

  • 邊距: 圖像邊緣上的邊距不應選擇為圖塊(以像素為單位)。當你下載了邊緣上有邊距的 tileSheet 圖像(例如,用於表明歸屬),增加這個數值可以方便調整。

  • 間距: 以像素為單位的地合集上的每個圖塊之間的間距。如果你使用的 tilesheet 圖像包含輔助線(例如每個圖塊之間的輪廓),則增加間距將會很方便調整。

  • 紋理區域大小: 以像素為單位的合集上的每個圖塊的大小。在大多數情況下,這應該與 TileMap 屬性中定義的圖塊大小相配對(儘管並不是必需的)。

  • 使用紋理內邊距: 如果選用,則在每個圖塊周圍新增一個1像素的透明的邊緣,以防止啟用篩選時紋理滲出(bleeding)。除非你由於紋理內邊距而遇到渲染問題,否則建議預設將其啟用。

請注意,更改紋理邊距,間距和區域大小都有可能會導致圖塊丟失(其中一些將位於合集圖片的座標之外)。如要自動從 TileSheet 再生圖塊,請使用圖塊集編輯器頂部的三個垂直點功能表按鈕,然後選擇 在非透明紋理區域中建立圖塊

在修改合集屬性後自動重新建立圖塊

在修改合集屬性後自動重新建立圖塊

使用場景合集

自 Godot 4.0 以來,您可以將實際的 場景 放置為圖塊。這允許您將任何節點集合用作圖塊。比如說,您可以使用場景圖塊來放置遊戲元素,例如玩家可以與之互動的商店。還可以使用場景圖塊來放置 AudioStreamPlayer2D (用於環境聲音)、粒子效果等。

警告

與合集相比,場景圖塊具有更大的性能開銷,因為每個場景都是為每個放置的圖塊單獨產生實體的。

建議僅在必要時使用場景圖塊。要在沒有任何高級操作的圖塊中繪製精靈,請使用合集代替

對於本例,我們將建立一個包含 CPUParticles2D 根節點的場景。將此場景保存到場景檔(與包含 TileMap 的場景分離),然後切換到包含 TileMap 節點的場景。打開 TileSet 編輯器,在左列中建立一個新的 場景集合

使用程式碼來連接訊號

使用程式碼來連接訊號

建立場景合集之後,你就可以根據自己的需要在中間欄內為場景合集輸入描述名稱。選中這個場景合集,然後建立一個新的場景槽:

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

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

在右欄中選中這個場景槽,然後使用**快速載入**(或**載入**)來載入包含粒子的場景檔:

在 TileSet 編輯器中建立場景槽,然後為其載入場景檔案

在 TileSet 編輯器中建立場景槽,然後為其載入場景檔案

現在你的 TileSet 中就有了一個場景圖塊。切換到 TileMap 編輯器之後,你就可以在場景合集中選擇則個場景圖塊,然後和其他圖塊一樣進行繪製。

將若干合集合並為單個合集

在單個TileSet資源中使用多個合集有時可能很有用,但在某些情況下可能會變得繁瑣(特別是如果您每個圖塊使用一個圖像)。Godot允許您將多個合集合並成一個單獨的合集,以便更輕鬆地組織。

如果要這樣做,你必須在TileSet資源處建立了不止一個atlas。在atlas列表下找到“three vertical dots”的功能表按鈕,然後選擇**合集合併合工具**:

在建立多個合集後,打開合集合並工具

在建立多個合集後,打開合集合並工具

這將打開一個對話方塊,在該對話方塊中,您可以通過按住 ShiftCtrl 鍵並同時點擊多個元素來選擇多個合集:

使用合集合並工具對話方塊

使用合集合並工具對話方塊

選擇 合併 將以選擇的合集合並成一個合集圖片(在 TileSet 的單個合集)。沒有合併的合集將會在 TileSet 被移除,但是 原來的 tilesheet 圖片會被保留在檔案系統裡 。如果你想在TileSet 資源保留沒有合併的合集,選擇 合併(保留原來的合集)

小訣竅

TileSet 具有一個 圖塊代理 系統。圖塊代理是一張對應表,它允許通知使用了給定 TileSet 的 TileMap,以便將一組給定的圖塊識別字替換為另一組圖塊識別字。

合併不同合集時會自動設定圖塊代理,但也可以通過 管理圖塊代理 對話方塊手動設定,你可以使用上面提到的“三個豎點”功能表存取該對話方塊。

當你更改了合集 ID 或想用另一個合集的圖塊替換一個合集的所有圖塊時,手動建立圖塊代理可能會很有用。請注意,編輯 TileMap 時,你可以用相應的對應值替換所有網格。

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

現在我們已經成功建立了一個基本的 TileSet。我們現在可以開始使用 TileMap 節點,但它目前缺乏任何形式的碰撞偵測。這意味著玩家和其他物體可以直接穿過地板或牆壁。

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

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

要為每個圖塊定義碰撞、導覽和遮罩形狀,首先需要為 TileSet 資源建立實體層、導覽層或遮擋層。為此,請選擇 TileMap 節點,按一下屬性面板中的 TileSet 屬性值進行編輯,然後展開 實體層 並選擇 新增元素

在 TileSet 資源屬性面板(TileMap 節點內)中建立實體層

在 TileSet 資源屬性面板(TileMap 節點內)中建立實體層

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

在 TileSet 資源屬性面板(TileMap 節點內)中建立導覽層

在 TileSet 資源屬性面板(TileMap 節點內)中建立導覽層

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

在 TileSet 資源屬性面板(TileMap 節點內)中建立遮擋層

在 TileSet 資源屬性面板(TileMap 節點內)中建立遮擋層

備註

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

唯一需要注意的是,圖塊的遮擋多邊形屬性是合集屬性面板中 渲染 分節的一部分。請確保展開該部分,以便編輯多邊形。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

小訣竅

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

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

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

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

在(TileMap 節點的)TileSet 資源屬性面板中建立自訂資料層

在(TileMap 節點的)TileSet 資源屬性面板中建立自訂資料層

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

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

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

請注意,屬性的名稱不會出現在編輯器中(只會顯示索引號,與定義順序一致)。例如,假設存在上面例子中的自訂資料層,那麼將圖塊的 damage_per_second 中繼資料設定為 25、將 destructible 中繼資料設定為 false 就是這樣的:

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

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

自訂資料也可以進行:ref:圖塊屬性的繪製 <doc_using_tilemaps_using_tile_property_painting>

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

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

建立內容

備註

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

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

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

Godot 提供的*地形*系統就能夠自動進行圖塊的連接。這樣就可以自動使用“正確”的圖塊變體。

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

備註

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

選中 TileMap 節點,在屬性面板的 TileSet *資源*中建立一個新的地形集:

在(TileMap 節點的)TileSet 資源屬性面板中建立地形集

在(TileMap 節點的)TileSet 資源屬性面板中建立地形集

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

產生金鑰儲存區

產生金鑰儲存區

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

備註

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

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

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

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

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

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

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

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

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

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

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

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

一次為多個圖塊指定屬性

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

使用多個圖塊選擇

如果希望一次配置多種屬性,請選擇 TileSet 編輯器頂部的 選擇 模式:

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

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

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

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

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

使用匯出樣板

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

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

在編輯器中執行腳本。

在編輯器中執行腳本。

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

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

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

建立內容

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

小訣竅

Since Godot 4.2, you don't have to create alternative tiles to rotate or flip tiles anymore. You can rotate any tile while placing it in the TileMap editor by using the rotation/flip buttons in the TileMap editor toolbar.

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

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

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

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

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

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

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

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

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

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

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

  • Rendering > Transpose: If true, the tile is rotated 90 degrees counter-clockwise and then flipped vertically. In practice, this means that to rotate a tile by 90 degrees clockwise without flipping it, you should enable Flip H and Transpose. To rotate a tile by 180 degrees clockwise, enable Flip H and Flip V. To rotate a tile by 270 degrees clockwise, enable Flip V and Transpose.

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

  • **Rendering > Modulate:**渲染圖塊時的顏色乘數。

  • Rendering > Material: 目前圖塊使用的材質。可以使用此選項為單個圖塊應用不同的混合模式或自訂著色器。

  • Z Index: 目前圖塊的排序。數值大的圖塊會渲染在同一層中的其他圖塊之上。

  • Y 排序原點: 用於基於 Y 座標(以像素為單位)進行圖塊排序的垂直偏移。這允許在自上而下的遊戲中使用圖層,就好像它們處於不同的高度一樣。調整此項可以幫助緩解對某些圖塊進行排序的問題。僅在放置圖塊的 TileMap 圖層上 Y Sort Enabled 為「true」時才有效。

你可以通過點擊在備選圖塊旁的 “+” 圖示來建立一個基於該圖塊的新的備選圖塊。該操作與在選擇基本圖塊後並右鍵選擇 “建立備選圖塊” 等價。

備註

當建立一個備選圖塊時,其基本圖塊的任何屬性將不會被繼承下來。如果你希望備選圖塊與基本圖塊的屬性相同,那麼你需要在備選圖塊中重新設定這些屬性。