圖塊地圖編輯器 — 免費線上圖塊地圖製作工具與關卡編輯器
製作你自己的圖塊地圖編輯器
匯入圖塊集，在網格上繪製圖塊地圖，然後走進其中。免費線上圖塊地圖編輯器與關卡製作工具 — 無需下載、無需註冊，在你的瀏覽器中執行。
圖塊地圖編輯器由網格、圖塊集與筆刷組成。你匯入 PNG，或依提示詞生成一組圖塊，設定單一儲存格尺寸，在各圖層上繪製儲存格，將實心儲存格標記為碰撞，然後匯出。本頁的圖塊地圖編輯器在你的瀏覽器中執行：無需下載、無需帳號、無需建置步驟，而且你第一眼看到的就是編輯器本身，而不是它的截圖。
以下內容說明這項工具實際的功能，以及它在哪裡會出錯。為什麼一張帶有 1 px 邊距的圖集，若你只輸入圖塊尺寸就會匯入錯誤。為什麼每邊兩種狀態的自動圖塊規則需要 47 個變體，而不是 16 個。TMX 能攜帶哪些 PNG 無法攜帶的資訊。以及為什麼能按下播放、走進你剛繪製的地圖，會改變你修正錯誤的速度。
圖塊地圖編輯器（即時工具）
即時工具就在本頁最上方。畫布是一個網格，圖塊集放在旁邊，圖層清單則是一疊各自獨立的網格，你可以逐一隱藏與鎖定。繪製一個儲存格只需點一下。拖曳則可繪製一整排儲存格。矩形工具能填滿一個區域，洪水填滿能處理開闊地面，橡皮擦則能清除並露出下層圖層。
四項能力撐起整個流程。網格為整份文件固定一個數字，也就是以像素為單位的儲存格尺寸，每一支筆刷、每一個圖層與每一次匯出都以這個單位衡量。筆刷決定點一下會寫入什麼：單一圖塊、矩形區塊、洪水填滿、線條或擦除。圖層堆疊各自獨立的網格，讓地形、裝飾與碰撞都能獨立編輯。碰撞會將儲存格標記為實心，並以資料形式儲存，而非繪製進美術圖中，因此重新繪製一面牆時，永遠不必重做它的阻擋範圍。
從繪製到遊玩之間，沒有儲存對話方塊，也沒有編譯步驟。編輯器寫出的文件，就是執行環境讀取的文件，這消除了整類錯誤：地圖在某個程式中看起來正確，一載入另一個程式就偏移半個圖塊。
- 網格以像素為單位的儲存格尺寸，為整份文件設定一次。以覆疊層繪製，你可以在繪製時將它關閉。
- 筆刷單一圖塊、矩形、洪水填滿、線條與橡皮擦。按住並拖曳可繪製連續的一排儲存格。
- 圖層一疊各自獨立的網格，具備逐層的可見度與鎖定。地面、細節與碰撞是三個圖層，而不是三個檔案。
- 碰撞位於獨立圖層上、以逐格為單位的實心遮罩，以資料形式匯出，讓引擎無須檢視美術圖即可讀取。
匯入圖塊集或生成一組
有兩條路可以進入。匯入你已擁有的 PNG，或依文字提示詞生成一組圖塊並用它來繪製。兩者最後都抵達同一個地方：一張對齊好的圖塊圖集，就放在畫布旁邊。
如果你兩種都不想畫，免費圖塊集庫是一套目錄，收錄了各種常見儲存格尺寸的現成圖集。Agent Sprite Forge 處理問題的另一半，也就是角色與道具，它們遵循與地形不同的規則，而且每個動作通常需要更多影格。
匯入你自己的 PNG
編輯器在載入任何東西之前，會先詢問圖塊尺寸，而那個數字必須與美術圖完全相符。一張 256 乘 256、由 16 px 圖塊組成的圖集，是 16 欄乘 16 列。如果圖集邊緣有 1 px 的邊距、圖塊之間有 1 px 的間距，這是美術工具常見的預設值，那麼單純的算術會得出錯誤的欄數，所以請一併輸入邊距與間距，或修剪圖集。一旦弄錯，網格就會歪斜：第一欄看起來沒問題，之後的每個圖塊都會偏移，誤差還會沿著整張圖集累積。
另外有三件事會破壞圖塊集的匯入。圖塊是 15 或 33 px，因為美術圖被以非整數倍率縮放。美術圖繪製時超出了 1 px 進入鄰格的儲存格，這會沿著每一道接縫顯示出鄰接圖塊的一條細線，而且當引擎開啟濾鏡取樣時會更嚴重。還有透明區域其實是黑色的 alpha 通道，一旦地圖被算繪，就會把每個空的儲存格變成實心區塊。
依提示詞生成一組圖塊
改為描述這組圖塊：儲存格尺寸、視角、調色盤，以及你需要的圖塊角色，例如地板、牆、牆角、門與水岸。AI 圖塊集生成器會回傳一張已對齊所要求儲存格尺寸的圖集，因此匯入時無須計算邊距。
把結果當成起點。生成出來的圖塊集在表面表現上很強，在連續性上卻很弱：第十六個地板圖塊很少能與第一個無縫接合，而邊緣圖塊通常需要重新繪製，自動圖塊才會接受它們為相連的地形。
繪製圖塊、新增圖層與碰撞
一張能長久保持易於編輯的地圖是三個圖層，而不是一個。地面存放玩家行走的地形。細節存放所有繪製在上方的東西，例如牆、樹木、木箱與貼花，讓你能在不動到地面的情況下重新調整風格或隱藏它。碰撞則不放任何你看得見的東西：它是一份玩家無法進入的儲存格遮罩。
把碰撞以資料形式保留在它自己的圖層上，而不是當成烘焙進地形的深色圖塊。如果阻擋範圍被繪製進地面美術圖中，編輯美術圖就會改變關卡設計，而編輯關卡設計又會改變美術圖。有了獨立圖層，你可以任意重新繪製地板多少次，牆都會留在原本的位置。
要留意的失效模式，是牆面當中有一個未標記的儲存格。在一道四十格長的牆裡少了一個碰撞儲存格，就是一個玩家能穿過的洞，而且在正常縮放下看不見。能抓到它的例行程序：隱藏除了碰撞以外的所有圖層，把地圖看成剪影，並檢查輪廓是否連續無缺口。
01
在你繪製任何東西之前，先設定一次儲存格尺寸。16、24、32 或 48 px 是常見選擇，每個圖層都會沿用這個值。
02
匯入圖塊集，並確認網格線落在美術圖的邊界上。現在就修正對齊，而不是等你畫了一百個儲存格之後才修。
03
新增一個名為「地面」的圖層。先繪製基礎地形；這是攝影機或尋路系統讀取為可行走地面的圖層。
04
新增一個名為「細節」的圖層。在此繪製牆、道具與裝飾，讓它們能在不干擾地面的情況下被隱藏或重新調整風格。
05
新增一個名為「碰撞」的圖層。在玩家不得進入的每個儲存格上繪製一個實心標記格。除此之外，讓這個圖層保持視覺上空無一物。
06
隱藏除了碰撞以外的所有圖層，把地圖看成剪影。尋找牆面當中的缺口，以及開闊地面中零星落單的儲存格。
07
按下播放，走一遍地圖，修正你漏掉的儲存格。走一趟走廊，能找到的碰撞錯誤比任何程度地縮小檢視都還要多。
自動圖塊與 47 圖塊集解說
自動圖塊是圖塊地圖編輯器中，依據周遭環境決定要繪製哪個圖塊的部分。你不必手動挑選牆角，只要繪製任何一個牆圖塊，編輯器就會檢查相鄰的儲存格，建立位元遮罩，並換上相符的變體。在第一面牆旁再繪製第二面牆，兩個儲存格都會更新。
這條規則的簡易版本檢視四個相鄰方向，北、東、南、西，得到二的四次方，也就是 16 種組合。這組圖塊很容易繪製，卻會在一個特定地方失效：內角。設想一個地板儲存格，北邊有牆、東邊有牆，其餘皆無。這不是什麼罕見情況，L 形房間的內側處處都是這副模樣。16 圖塊集沒有任何變體能沿著單一儲存格的北側與東側同時繪出邊緣，因此你會得到一個落單的地板像素、一條加倍的邊框，或一個看得見的破洞。
47 圖塊的團塊集，也稱為團塊圖塊集，則加入四個角落。天真地追蹤全部八個相鄰方向會得到二的八次方，也就是 256 種組合，而其中大多數是多餘的：一個角落只有在與它相連的兩條邊都被填滿時，才會改變畫面。位於兩條空邊之間的角落，在它的四種狀態下描繪出來的結果完全相同。套用這一項化簡，就把 256 種情況收斂成 47 種不同的情況，這個數字就是這麼來的。
編輯器通常將團塊集儲存為以 8 位元遮罩為索引的查找表：邊用 1、2、4、8，角用 16、32、64、128。當你繪製時，編輯器會重新計算被繪製儲存格以及每個同樣套用自動圖塊的相鄰儲存格的遮罩，因此點一下最多可能改寫九個儲存格。實際的後果是，自動圖塊需要有自己的地形圖層。把手動放置的道具混進那個圖層，每一次自動圖塊更新都必須判斷覆寫它們是否可接受。
| 規則 | 不同圖塊數 | 失效之處 |
|---|---|---|
| 四條邊，各兩種狀態 | 16 | 內角。北邊與東邊皆有牆的地板儲存格，沒有正確的變體。 |
| 八個相鄰方向，僅在兩條相鄰邊都被填滿時才計入角落 | 47 | 實務上看不出問題。這是大多數地形圖集隨附的團塊集。 |
| 八個相鄰方向，計入每一種組合 | 256 | 不是錯誤，而是浪費：其中 209 種組合描繪出來的結果與另一種完全相同。〔更正：209〕 |
Tiled 地圖與圖塊地圖 — 你指的是哪一個？
有兩種不同的搜尋會來到這裡，而它們想要的是不同的東西。圖塊地圖編輯器是這個類別：任何能在網格上繪製圖塊並產生地圖的工具。Tiled 則是這個類別裡的某一個特定程式，也就是發布於 mapeditor.org 的桌面編輯器，而人們在指名那個程式時，經常會輸入 tiled map editor。
如果你指的是這個類別，本頁的即時工具就是一款圖塊地圖編輯器，而且無須安裝。如果你指的是那個品牌，你想要的很可能是一款能開啟你手上既有檔案的工具，也就是桌面工作流程所產生的 TMX 專案與 TSX 圖塊集，並讓你繼續工作，而不必在你目前使用的機器上安裝任何東西。Tiled 替代方案頁面直接涵蓋了這一點：哪些檔案可以沿用、哪些設定不行，以及兩者的匯出格式如何對應。
就機制而言，差別在於文件存放在哪裡。桌面編輯器會把專案寫入本機磁碟，並仰賴該機器安裝了程式才能重新開啟它們。瀏覽器編輯器則把文件保存在工作階段與瀏覽器儲存空間中，並仰賴匯出內容足夠完整，讓你能在其他任何地方重建地圖。這使得匯出格式成為兩者之間真正的橋梁，也就是下一節要談的內容。
匯出你的地圖（PNG／TMX／JSON）
三種格式，三種用途。依將要讀取檔案的是什麼來選擇，而不是依哪一種聽起來最正式。
PNG 是一張平面影像。匯出器會以儲存格尺寸乘以地圖尺寸來算繪地圖，因此一張 40 乘 25、儲存格為 32 px 的地圖會變成 1280 乘 800 像素，圖層則可壓平成一張影像，或每個圖層各寫成一個檔案。用它來製作模型稿、縮圖、選單背景，或與美術人員溝通。不要用它作為交付給引擎的檔案：PNG 不帶網格、不帶圖塊身分，也不帶碰撞，因此下游除了靠顏色之外，無法分辨牆與地板。
TMX 是 Tiled 的 XML 交換格式，也是圖塊工具生態系中最接近通用語言的東西。它帶有圖層、圖塊集參照、逐圖塊屬性、物件圖層與自訂屬性，而且大多數引擎與轉換器都能讀取。有一個細節造成了大多數的錯誤：TMX 中的圖塊 ID 是跨地圖中每一個圖塊集的全域 ID，並以每個圖塊集的 firstgid 作為位移。合併兩張圖集時若把那個位移弄錯，每個使用了第二張圖集的儲存格，載入時都會用到錯誤圖集裡的圖塊。不會有任何錯誤。它就只是看起來不對。
JSON 是大多數引擎與網頁執行環境直接取用的格式。它通常是一份圖層清單，每一層持有一個扁平的圖塊索引陣列，外加儲存格尺寸，並以另一個獨立陣列表示碰撞。由於取用方是在執行時建構地圖，列順序的慣例就很重要：把它反過來，整張地圖就會垂直鏡射，這在有海岸線的地圖上一目了然，在對稱的地牢裡卻看不出來。空的儲存格也需要一個已定義的值，因為有些格式用 0、有些用 -1，選錯了就會在每個空隙裡放進一個真實圖塊。
| 匯出格式 | 它是什麼 | 用途 |
|---|---|---|
| PNG | 以儲存格尺寸乘以地圖尺寸算繪而成的影像，可壓平或每個圖層一個檔案。 | 模型稿、縮圖、選單背景。不隨附任何網格或碰撞資料。 |
| TMX | Tiled 的 XML 交換格式，帶有圖層、圖塊集參照與物件圖層。 | 在編輯器與引擎之間搬移地圖，或交付給另一項工具。 |
| JSON | 以圖塊索引陣列表示的圖層，外加儲存格尺寸與另一個獨立的碰撞陣列。 | 在啟動時直接載入引擎或網頁執行環境。 |
走進你的地圖（可遊玩示範）
本頁的可遊玩示範是 The Cyclops' Island，一款以同一編輯器繪製的圖塊地圖所建構的等角像素藝術遊戲。按下播放，攝影機就會降入地圖之中。碰撞圖層化為牆，地面圖層化為角色行走的地板，細節圖層則依所在位置描繪在角色的後方或前方。
這是大多數工具頁面會略過的一步。繪製地圖並匯出它，意味著你第一次以玩家尺度看到關卡，是在另一個程式、另一台攝影機、經過一次建置之後。就地遊玩則把關卡設計變成一種每分鐘能跑十次的循環：繪製一條走廊、走一遍、發現它寬了一格、重新繪製。
等角投影多了一件事，是正交地圖永遠不必考慮的：描繪順序。螢幕上位置較低的圖塊離攝影機較近，因此算繪器會依深度排序，大致上是先依列、再依圖層，否則角色會被描繪在理應遮擋它的牆的上方。症狀是角色圖像走到牆後方時，會從牆頂穿出來。當你在示範中看到這種情況，原因是深度排序，而不是碰撞遮罩。
從那裡開始，地圖可以往兩個方向走。保持 2D，它就仍是一張圖塊地圖，只是上面加了一個玩家控制器。把它帶進 3D 遊戲建構工具，同一個網格就會變成幾何，每個儲存格拉伸成一塊地板或一面牆，這正是 Mini World 背後的做法。Agent Sprite Forge 涵蓋角色那一側。無論走哪個方向，你繪製的網格都不會改變。
走進它所屬的世界
角色圖像是一個無處可站的角色。最後一步是別人都沒有提供的那一步：把你剛建好的圖集放進一個有人能走動的世界 — 一座小島、一顆行星、一個下雨的街角。這個網站上的每個世界都是由一段文字描述製成，並發布成一個你能遊玩的頁面。
FAQ
圖塊地圖編輯器是免費的嗎？ +
是的。網格、圖塊集匯入、自動圖塊、碰撞圖層、每一種匯出格式，以及可遊玩預覽，全都能免費使用。匯出檔不會有浮水印，地圖數量也沒有限制。
我需要註冊或安裝任何東西嗎？ +
不用。它在瀏覽器中執行，無需帳號、無需下載。這也意味著你的作品保存在工作階段與瀏覽器儲存空間中，所以請匯出任何你不想重新繪製的東西。JSON 或 TMX 檔案是比清除網站資料更好的備份。
我可以使用自己的圖塊集嗎？ +
可以。匯入一張 PNG，並把確切的儲存格尺寸告訴編輯器；若圖集有邊距與間距，也一併輸入。會破壞匯入的三件事是：儲存格尺寸與美術圖不符；圖塊以非整數倍率縮放，導致量起來是 15 或 33 px；以及美術圖繪製超出了儲存格的邊界，這會沿著每一道接縫出現一條細線。
我可以匯出到 Unity 或 Godot 嗎？ +
可以，但不是以原生場景的形式。Unity 的 Tilemap 與 Godot 的 TileMapLayer 都需要各自專屬的資源與地形資料，因此實務上的做法是把 PNG 圖塊集帶進引擎、在引擎中重建調色盤，並使用相同的儲存格尺寸，從我們的 JSON 匯出檔載入地圖本身。如果你的引擎有能讀取 TMX 的轉換器，TMX 是更好的交付格式。
我該用多大的圖塊尺寸？ +
挑一個並持續沿用。小幅像素藝術用 16 px，大多數俯視角與等角作品用 32 px，若你以更高解析度繪製則用 48 px 以上。數字本身不如一致性來得重要：玩家角色最好有整數個圖塊高，通常是兩個，這樣碰撞框才會對齊網格，而不是跨壓在網格上。
它適用於 RPG 與銀河惡魔城類型嗎？ +
兩者都適用，只是吃力點不同。RPG 需要大地圖與大量放置的物件，因此靠物件圖層以及一組小而精選的圖塊調色盤來承擔。銀河惡魔城類型則需要碰撞的精確度：單格走廊、與跳躍高度完全相符的天花板淨空，以及牆面當中沒有落單的可行走儲存格。匯出前，請在高倍率縮放下把碰撞圖層當成剪影檢查一遍。
它在行動裝置上可用嗎？ +
編輯器能在手機或平板電腦上開啟並以觸控繪製，但它是為滑鼠優先打造的。拖曳繪製與右鍵擦除都有觸控的對應操作；矩形填滿、圖層管理與精確的單格編輯，沒有指標裝置就會比較慢。在平板電腦上繪製是可行的，但要完成一張大地圖則不然。
我可以在哪裡找到免費圖塊集？ +
免費圖塊集庫提供了各種常見儲存格尺寸的圖集，無須調整即可匯入。如果你需要特定的東西，例如一種調色盤、一種視角、一組確切的圖塊角色，AI 圖塊集生成器能依提示詞生成一張你所要求儲存格尺寸的圖集。Agent Sprite Forge 涵蓋角色與道具。
返回 3D 遊戲建構工具
全部 31 個已完成的 3D 世界、遊戲與場景都在同一個頁面上 — 每一個都能遊玩。