Tiled 圖磚地圖編輯器線上版 — 免費的瀏覽器版 Tiled 替代方案

圖磚地圖編輯器是一種程式，用一小組重複的圖磚影像來組裝關卡，而不是用一整張手繪大背景。來自 mapeditor.org 的桌面應用程式 Tiled，就是這個概念的參考實作：免費、離線、對各種格線類型都很彈性，而且歷史悠久，至今仍有大量已推出的專案帶著 .tmx 檔案。本頁要談的情況是：你想要同樣的繪製流程，卻不想安裝任何東西，而且想要按下「播放」後，在你剛畫好的地圖裡四處走動。

Neta Studio 讓編輯器在瀏覽器分頁中執行。你匯入圖磚集、設定圖磚尺寸、繪製地面圖層與細節圖層、標記碰撞，然後開始遊玩。格線會變成以 Three.js 算繪的 3D 世界，並具備可操控的角色與真實碰撞。無需下載，沒有需要在多台機器之間保持同步的專案資料夾，還能直接把連結交給別人，讓對方開啟同一張地圖。

Tiled 與線上圖磚地圖編輯器

來自 mapeditor.org 的 Tiled 在很多方面都表現出色。它免費且開放原始碼、可離線執行，多年來一直支援正交、等角、交錯與六角格線。圖層、內含矩形、橢圓、多邊形與折線的物件圖層、自訂屬性、範本、圖磚動畫、碰撞形狀，以及地形／Wang 組合，全都一應俱全。它能讀寫 TMX／TSX XML 以及 JSON 變體，而且這個格式歷史悠久，大多數引擎都有現成的匯出器。如果你的流程本來就會處理 .tmx，Tiled 就是製作它最安全的地方。

麻煩的不是編輯本身，而是它周邊的一切。Tiled 是桌面應用程式，所以每一台碰觸這個專案的機器都得安裝。圖磚集通常是以帶相對路徑的外部 .tsx 檔案來參照，而一旦資料夾被搬移，或協作者的取出位置處於不同層級，這些路徑就會立刻失效。它沒有播放按鈕：你得先匯出，再開啟另一個程式，才知道地圖是否正常。要分享，就得把專案壓縮成 zip，然後祈禱對方那邊的路徑能對得上。

線上圖磚地圖編輯器只改變這三件事，其餘一概不變。免安裝，因為編輯器隨頁面一起送達。不必搬弄檔案，因為圖磚集與圖層都存放在同一個可重新開啟的專案裡。也不必陷入匯出後才能測試的循環，因為地圖在你繪製它的那個分頁裡就能直接遊玩。你確實要付出一些代價：沒有原生外掛、沒有腳本化地圖，而且非常龐大的專案在瀏覽器中會比在桌面上更沉重。但如果這張地圖是用來被觀看、被走動，而不是要送進編譯好的引擎，這筆交易就值得。

什麼是圖磚地圖（以及這個名稱為何讓所有人困惑）

這個詞同時肩負兩種任務，而且彼此衝撞。首字母大寫的 Tiled 是產品名稱。小寫的「圖磚地圖」則是指任何用重複圖磚拼成的地圖。你可以在 Tiled 裡製作圖磚地圖，但也可以在 Godot 的 TileMap 節點、Unity 的 Tilemap 系統、Phaser、自訂匯入器中，或是在這裡製作，完全不必打開 Tiled。

正因為這種分歧，搜尋「圖磚地圖編輯器」的人才會落到兩個不同的地方。有一半的人要的是那款特定的桌面應用程式及其檔案格式。另一半的人只想做出以圖磚為基礎的地圖，並不在意用哪個工具。兩種需求都很合理。如果你屬於第二種，問題就不是哪個編輯器的功能清單更長，而是哪一個能最快把可遊玩的成果送到你眼前。

就結構而言，圖磚地圖是很小的資料。一張圖磚集影像、一個圖磚寬度與高度、以圖磚為單位的格線大小，然後是每個圖層一組圖磚編號陣列，其中零代表空白。在此之上：一個選用的物件圖層，用來存放矩形與折線，以及一張由鍵／值字串構成的屬性表。這就是全部的結構。編輯器只是編輯這些陣列的好用介面，而這也是格式之所以能在工具之間流通的唯一理由。

在線上繪製你的第一張圖磚地圖

第一個畫面分成三個區域：左側的圖磚集面板、中間的地圖畫布，以及右側的圖層清單。先建立一張地圖。選擇正交格線，把格線設為 40 乘 30 個圖磚，並把圖磚尺寸設成與你的圖磚集完全一致。若為 32 乘 32 像素，那就是 1280 乘 960 像素的畫布，是合理的工作尺寸，繪製時也能保持流暢。

接著匯入圖磚集影像。最容易讓匯入出錯的兩個設定是邊距與間距。邊距是整張圖表外圍的空白邊框；間距是圖磚之間的縫隙。如果你的圖表匯出時帶有其中任一項，就輸入那個數字。若是略過，每一欄都會偏移一、兩個像素，地圖就會以一種微妙又令人抓狂的方式出錯。之後，繪製就是單純的繪製：填滿地面圖層，然後在它上方的圖層加上細節。

圖磚地圖範例——現在就能打開的地圖

六個場景以可遊玩的地圖形式隨附，而不是螢幕截圖。每一個都能在瀏覽器中開啟，你可以操控角色在其中穿行，這是確認圖磚地圖是否正常運作唯一可靠的方法。

其中三個是完整專案。其餘是編輯器內的小型示範地圖，各自用來展示一種機制。當你想親眼看看圖層、碰撞與圖磚尺寸是如何設定的，而不是只用讀的，就打開它們。

將 TMX／圖磚集匯入瀏覽器

匯入是解析器，而不是轉換器。我們讀取地圖元素中的方向、寬度、高度、圖磚寬度與圖磚高度，接著讀取圖磚集項目及其 firstgid，以及內嵌影像或對外部 .tsx 的參照。然後依序讀取每個圖層及其圖磚資料。重要的編碼是 CSV 與 base64，有無 gzip 或 zlib 壓縮皆可。如果檔案使用了我們無法解碼的編碼，匯入會中止並指出該編碼，而不是載入一片空白的格線。

保留下來的是結構部分。圖磚集參照會被重新指向你上傳的影像，因此桌面專案中的外部 .tsx 路徑會被取代，而不是被沿用。圖磚尺寸、邊距與間距都會保留下來。圖層順序、可見度與不透明度也會保留。圖磚編號會維持它們在每個圖層內的相對位置，這正是地圖在匯入後看起來一模一樣的原因。物件圖層會以矩形與多邊形抵達，其屬性會被攤平為鍵／值字串。已宣告的圖磚動畫會保留。

無法保留下來的是任何屬於程式碼的部分。Tiled 支援 JavaScript 擴充功能、自訂屬性類別與 C++ 外掛，而這些都無法在瀏覽器分頁中執行。由腳本產生的地圖，在這裡只剩它輸出的圖磚。自訂屬性型別會降級為字串。採用分塊儲存的無限地圖會被攤平成固定格線，這會改變非常龐大地圖的記憶體行為。至於影像集合式的圖磚集——也就是每個圖磚都是獨立 PNG 的那種——雖然可行，但每個圖磚都要耗費一次影像請求。如果你的地圖依賴某個外掛，就繼續在 Tiled 裡製作它。

免費 Tiled 與付費 Tiled

Tiled 是免費的。它是開放原始碼的桌面軟體，並沒有付費等級可供比較，所以一個在描述「免費 Tiled 對比付費 Tiled」的頁面，講的其實是別的東西，通常是商業圖磚集包，或是引擎內附的編輯器。我們並不是在說 Tiled 要收費，因為它並不收費。

真正的分野是安裝與免安裝。Tiled 要求每一台機器都得下載，把圖磚集保存為相對路徑、資料夾一搬動就失效，而且沒有內建試玩，所以你得匯出後再打開另一個程式。瀏覽器編輯器只需要一個分頁，把專案保存在同一個地方，並在同一個視窗裡遊玩地圖。這就是取捨，而且與價格毫無關係。

桌面版確實有勝出之處。外掛、腳本化地圖、完全離線作業，以及擁有大量圖層的超大地圖，都是桌面版的優勢，假裝不是這樣就不誠實了。如果你的流程本來就會處理 .tmx，而且有專人維護，那就留在 Tiled。當這張地圖需要被看見、用連結分享，或需要讓一個永遠不會安裝編輯器的人走進去時，就使用瀏覽器編輯器。

走進它屬於的世界

一個精靈，就是一個無處可站的角色。最後這一步是別人給不了的：把你剛剛做好的圖集放進一個有人能走動的世界裡——一座小島、一顆行星、一個下雨的街角。這個網站上的每一個世界，都是從一段文字描述製作而成，並發布成一個你可以遊玩的頁面。

常見問題