Tiled Map Editor Online — 免費的瀏覽器版 Tiled 替代方案

圖磚地圖編輯器是一種程式，它用一組重複的小圖磚拼出關卡，而不是靠一張手繪的大背景圖。mapeditor.org 的桌面軟體 Tiled 就是這個概念的參考實作：免費、離線可用、對各種網格類型都很寬容，而且歷史夠久，很多已出貨的專案到現在還帶著 .tmx 檔。本頁要談的是另一種情況：你想要同樣的繪製流程，但不想安裝任何東西，還想按下 Play 就走進自己剛畫好的地圖裡。

Neta Studio 把編輯器跑在瀏覽器分頁裡。你匯入圖磚表、設定圖磚尺寸、畫一層地面和一層細節、標好碰撞，然後就能玩。網格會變成用 Three.js 算繪的 3D 世界，有可操作的角色和真正的碰撞。不用下載任何東西，沒有一個專案資料夾得在幾台機器之間保持同步，還能直接把連結交給別人，讓對方打開同一張地圖。

Tiled 與線上圖磚地圖編輯器的差別

mapeditor.org 的 Tiled 做對了很多事。它免費、開源、離線可用，而且支援正交、等角、交錯與六角網格已經很多年了。圖層、帶有矩形、橢圓、多邊形與折線的物件圖層、自訂屬性、範本、圖磚動畫、碰撞形狀、地形／Wang 集合，全都在裡面。它能讀寫 TMX/TSX XML 以及 JSON 變體，格式也舊到大多數引擎都有對應的匯出器。如果你的流程本來就吃 .tmx，Tiled 是最安全的作者端。

卡住的地方不在編輯本身，而在它周邊的一切。Tiled 是桌面程式，所以每台要碰這個專案的機器都得安裝。圖磚表通常是以外部 .tsx 檔搭配相對路徑參照，資料夾一搬動、或協作者的 checkout 深度不同，路徑就斷。它沒有播放鍵：你得先匯出，再開另一套程式才知道地圖到底能不能跑。要分享，就是把專案壓成 zip，然後祈禱對面那端的路徑剛好對得上。

線上圖磚地圖編輯器改變的就是這三件事，其他都沒動。不必安裝，因為編輯器跟著頁面一起載入。不必搬檔案，因為圖磚表和圖層都活在同一個專案裡，隨時能重新打開。也沒有匯出再測試的循環，因為地圖就在你畫它的那個分頁裡可玩。要放棄的東西很實在：沒有原生外掛、沒有腳本化地圖，而且專案一大，在瀏覽器裡就是比桌面重。但如果這張地圖的用途是被看見、被走過去，而不是被編譯進某個引擎，這個交換是划算的。

什麼是圖磚地圖（以及為什麼這個名字讓所有人搞混）

這個詞同時做兩件事，而這兩件事會撞在一起。大寫的 Tiled 是產品名稱。小寫的 tiled map，指的是任何用重複圖磚拼出來的地圖。你可以在 Tiled 裡做圖磚地圖，但也可以在 Godot 的 TileMap 節點、Unity 的 Tilemap 系統、Phaser、自己寫的匯入器，或是在這裡做——完全不用打開 Tiled。

就是這個分裂，讓「圖磚地圖編輯器」的搜尋結果落在兩個不同的地方。一半的人要的是那套特定的桌面程式和它的檔案格式。另一半的人只想做出一張圖磚地圖，不在乎是哪個工具做的。兩種都合理。如果你屬於第二種，問題就不是哪個編輯器的功能列表比較長，而是哪一個最快把可玩的結果擺到你面前。

就機制來說，圖磚地圖的資料量很小。一張圖磚表圖片、圖磚寬高、以圖磚為單位的網格大小，然後每一層一個圖磚 ID 陣列，其中 0 代表空格。在此之上：一個選用的物件圖層裝矩形和折線，加上一張鍵／值字串的屬性表。整個結構就這樣。編輯器只是編輯那些陣列的好用介面，這也是格式之所以能在工具之間搬來搬去的唯一理由。

在線上畫你的第一張圖磚地圖

第一個畫面分成三塊：左邊是圖磚表面板，中間是地圖畫布，右邊是圖層清單。先建立一張地圖。選正交網格，把網格設成 40 x 30 格，圖磚尺寸則設成跟你圖磚表完全一致的數值。以 32 x 32 像素來說，畫布是 1280 x 960 像素，算是好用的工作尺寸，畫的時候也還跟得上。

接著匯入圖磚表圖片。會弄壞匯入的設定有兩個：margin 和 spacing。margin 是整張表四周的空白邊框；spacing 是圖磚之間的間隙。如果你的表匯出時帶了其中任何一個，就把數字填進去。跳過這步，每一欄都會偏掉一兩個像素，地圖看起來就會有種說不出的、令人抓狂的錯誤。之後，畫圖就是畫圖：先填滿地面圖層，再在它上面加一層細節。

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

有六個場景是以可玩地圖的形式出貨，不是截圖。每一個都在瀏覽器裡打開，你可以開著角色在裡面跑，這是檢查一張圖磚地圖能不能用的唯一可靠方式。

其中三個是完整專案。其餘是編輯器裡的小型示範地圖，每個只示範一個機制。當你想看圖層、碰撞和圖磚尺寸是怎麼設定的，而不是讀文字描述，就把它們打開。

把 TMX／圖磚表匯入瀏覽器

匯入是解析，不是轉檔。我們先讀 map 元素的 orientation、width、height、tilewidth、tileheight，再讀圖磚表項目，包括它們的 firstgid，以及內嵌圖片或指向外部 .tsx 的參照。然後依序讀取每個圖層和它的圖磚資料。真正要緊的編碼是 CSV 和 base64，搭配或不搭配 gzip、zlib 壓縮。如果檔案用了我們不解碼的編碼，匯入會停下來並指出是哪一種，而不是載入一張空白網格。

能活下來的是結構性的部分。圖磚表參照會被重新指向你上傳的圖片，所以桌面專案裡那個外部 .tsx 路徑是被取代，而不是被跟著走。圖磚尺寸、margin、spacing 都會保留。圖層順序、可見度、不透明度都會保留。圖磚 ID 在每個圖層裡維持相對位置，這正是匯入後地圖看起來一樣的原因。物件圖層會以矩形和多邊形進來，屬性攤平成鍵／值字串。有宣告的圖磚動畫會保留。

活不下來的是任何本來是程式碼的東西。Tiled 支援 JavaScript 擴充、自訂屬性類別和 C++ 外掛，這些在瀏覽器分頁裡都不會執行。用腳本產生的地圖，在這裡就只是它的輸出圖磚。自訂屬性型別會退化成字串。使用區塊式儲存的無限地圖會被攤平成固定網格，這會改變超大張地圖的記憶體行為。而圖像集合式的圖磚表——每塊圖磚都是一張獨立 PNG——能用，但代價是每塊圖磚一次圖片請求。如果你的地圖依賴某個外掛，就繼續在 Tiled 裡做它。

Tiled 免費版與 Tiled 付費版

Tiled 是免費的。它是開源桌面軟體，沒有付費層級可以比較，所以一個在講 Tiled 免費版與付費版的頁面，講的其實是別的東西，通常是商業圖磚表素材包，或某個引擎內建的編輯器。我們不會宣稱 Tiled 要收費，因為它並沒有。

真正的分界是安裝與不安裝。Tiled 要求每一台機器都下載，把圖磚表保存成相對路徑、資料夾一搬就斷，而且沒有內建的試玩功能，所以你得匯出、再開另一套程式。瀏覽器編輯器只要求一個分頁，專案留在同一個地方，地圖就在同一個視窗裡玩。這就是那個交換，跟價格無關。

桌面版有它贏的地方。外掛、腳本化地圖、完全離線工作，以及很多圖層的超大地圖，都是桌面版的優勢，假裝不是就只是在騙人。如果你的流程本來就吃 .tmx，而且有人負責維護，那就留在 Tiled。當這張地圖需要被看見、需要用連結分享，或需要被一個永遠不會安裝編輯器的人走過去時，就用瀏覽器編輯器。

走進它所屬的那個世界

精灵如果沒有地方站，就只是精灵。最後一步是別人沒提供的：把你剛做好的精灵表放進一個有人能走進去逛逛的世界——一座小島、一顆星球、一個下著雨的街角。這個網站上的每個世界，都是從一句描述生成的，並且發佈成一個可以直接玩的頁面。

常見問題