圖磚地圖編輯器 — 免費線上圖磚地圖製作工具與關卡編輯器
做出你自己的圖磚地圖編輯器
匯入圖磚集，在網格上畫出一張圖磚地圖，然後直接走進去。免費線上圖磚地圖編輯器與關卡製作工具 — 不必下載、不必註冊，在瀏覽器裡就能跑。
圖磚地圖編輯器就是三樣東西：網格、圖磚集、筆刷。你匯入 PNG，或從提示詞生成一組圖磚，設定一個格尺寸，跨圖層塗滿格子，把要擋人的格標成碰撞，然後匯出。這一頁的圖磚地圖編輯器直接在瀏覽器裡跑：不必下載、不必帳號、沒有建置步驟，而且你第一眼看到的就是編輯器本身，不是它的截圖。
下面每一段講的都是這個工具實際會做什麼、以及它在哪裡會出錯。為什麼一張四周留了 1 px 邊距的圖集，只填圖磚尺寸就會匯入錯誤。為什麼每條邊兩種狀態的自動圖磚規則需要 47 種變體，而不是 16 種。TMX 裝得下哪些 PNG 裝不下的東西。以及為什麼能按下播放、實際走一遍你剛畫好的地圖，會直接改變你修錯的速度。
圖磚地圖編輯器（即時工具）
這個即時工具就放在本頁最上面。畫布是一張網格，圖磚集在旁邊，圖層清單則是一疊彼此獨立的網格，你可以一層一層隱藏、鎖定。塗一格只要點一下。按住拖曳會連續塗過一整排格子。矩形工具填滿一個區域，洪水填充處理整片空地，橡皮擦則把格子清回下一層。
真正在做事的只有四項能力。網格替整份文件固定一個數字：以像素為單位的格尺寸，之後每一支筆刷、每一個圖層、每一次匯出都以這個單位計算。筆刷決定一次點擊寫入什麼：單一圖磚、矩形區塊、洪水填充、直線，或擦除。圖層把各自獨立的網格疊起來，讓地形、裝飾和碰撞可以分開編輯。碰撞把某一格標記為實心，並存成資料而不是畫進圖裡，所以重畫一面牆時，永遠不必連它的阻擋範圍一起重做。
從塗格到試玩之間，沒有存檔對話框，也沒有編譯步驟。編輯器寫出的文件就是執行時讀的文件，這直接消掉了一整類 bug：地圖在某個程式裡看起來正確，一載入另一個程式就偏移半個圖磚。
- 網格以像素為單位的格尺寸，整份文件設定一次。繪製時以覆蓋層顯示，可以隨時關掉。
- 筆刷單一圖磚、矩形、洪水填充、直線與橡皮擦。按住拖曳就能連續塗過一整排格子。
- 圖層一疊各自獨立的網格，可逐層切換可見度與鎖定。地面、細節、碰撞是三層，不是三個檔案。
- 碰撞逐格標記的實心遮罩，放在獨立圖層上，以資料形式匯出，讓引擎不必去解讀圖面就能讀懂。
匯入圖磚集，或直接生成一組
進來的路有兩條。匯入你手上已經有的 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
新增一個叫 ground 的圖層。先畫基礎地形，這一層就是攝影機或尋路系統會讀成可行走地面的那一層。
04
新增一個叫 detail 的圖層。牆、道具和裝飾都畫在這裡，這樣要隱藏或改風格都不會動到地面。
05
新增一個叫 collision 的圖層。玩家不能進去的每一格，都在上面塗一格實心標記。除此之外，這一層在畫面上保持空白。
06
除了 collision 以外全部隱藏，把地圖讀成剪影。找牆線裡的缺口，也找空地上落單的零星格子。
07
按下播放，走一遍地圖，把你漏掉的格子補上。走過一條走廊一趟，抓到的碰撞錯誤比你把畫面縮到多小都還多。
自動圖磚與 47 格圖磚集解析
自動圖磚是圖磚地圖編輯器裡負責「依周遭決定畫哪一塊圖磚」的那部分。你不必手動挑牆角，只要塗上任何一塊牆圖磚，編輯器就會檢查鄰格、組出位元遮罩，再換成對應的變體。在旁邊再塗一道牆，兩格都會跟著更新。
最單純的版本只看四個鄰格：北、東、南、西，得到 2 的四次方，也就是 16 種組合。這種圖磚集很好畫，但它會在一個很特定的地方失手：內角。想像一格地板，北邊和東邊各有一道牆，其他什麼都沒有。這不是什麼罕見情況，L 形房間的內側到處都是這個樣子。16 格圖磚集裡沒有哪個變體能同時在這一格的北側和東側畫出邊，於是你會得到一個多出來的地板像素、一條畫了兩次的邊框，或一個看得見的洞。
47 格 blob 圖磚集（也有人直接叫 blob tileset）把四個角也加進來。老實追蹤全部八個鄰格會得到 2 的八次方，也就是 256 種組合，而其中大多數是多餘的：一個角只有在緊鄰它的兩條邊都是實心時才會改變畫面。夾在兩條空邊之間的角，四種狀態畫出來完全一樣。單單套用這一條化簡，就能把 256 種情況收斂成 47 種不同的結果，那個數字就是這樣來的。
編輯器通常把 blob 集存成一張查找表，用 8 位元遮罩當索引：邊用 1、2、4、8，角用 16、32、64、128。你塗一格時，編輯器會重算這一格的遮罩，也重算每個同樣開了自動圖磚的鄰格，所以一次點擊最多會改寫九格。實務上的結論是：自動圖磚應該有自己的地形圖層。把手放的物件混進同一層，每次自動圖磚更新都得判斷「蓋掉它們可不可以」。
| 規則 | 不同圖磚數 | 破綻在哪 |
|---|---|---|
| 四條邊，每條兩種狀態 | 16 | 內角。北邊和東邊都有牆的一格地板，找不到正確的變體。 |
| 八個鄰格，角只在兩條相鄰邊都是實心時才計入 | 47 | 實務上看不出問題。大多數地形圖集出的就是這一種 blob 集。 |
| 八個鄰格，所有組合都計入 | 256 | 不是 bug，是浪費：其中 209 種組合畫出來的結果跟另一種完全相同。[更正：209] |
Tiled map 與 tile map — 你指的是哪一種？
兩種不同的搜尋會走到這一頁，而它們要的是不同的東西。圖磚地圖編輯器是一個類別：任何能在網格上塗圖磚、產出一張地圖的工具都算。Tiled 是這個類別裡的某一套特定程式，也就是在 mapeditor.org 發佈的桌面編輯器，很多人打 tiled map editor 其實是在指這套程式的名字。
如果你指的是那個類別，本頁的即時工具就是一套圖磚地圖編輯器，而且不用安裝。如果你指的是那個品牌，你大概要的是能打開手上現有檔案的工具——桌面流程產生的 TMX 專案和 TSX 圖磚集——並且讓你不必在這台機器上裝任何東西就能繼續做事。Tiled 替代方案那頁講得很直接：哪些檔案帶得過去、哪些設定帶不過去，以及兩邊的匯出格式怎麼對齊。
機制上的差別在於文件放在哪裡。桌面編輯器把專案寫到本機磁碟，要重新打開就得靠那台機器裝著那套程式。瀏覽器編輯器把文件留在這次工作階段和瀏覽器儲存空間裡，靠的是匯出檔夠不夠完整、能不能在別的地方把地圖重建起來。所以匯出格式才是兩者之間真正的橋樑，下一節講的就是這個。
匯出你的地圖（PNG / TMX / JSON）
三種格式，三種用途。挑選的依據是「誰要讀這個檔案」，不是哪個名字聽起來比較正式。
PNG 是一張平面影像。匯出器以格尺寸乘上地圖尺寸來算圖，所以一張 40×25、每格 32 px 的地圖會變成 1280×800 像素；圖層可以壓成一張圖，也可以每一層寫成一個檔案。它適合做視覺稿、縮圖、選單背景，或拿去跟美術溝通。不要拿它當交付給引擎的格式：PNG 不帶網格、不帶圖磚身分、也不帶碰撞，下游除了看顏色之外，分不出牆和地板。
TMX 是 Tiled 的 XML 交換格式，也是圖磚工具生態裡最接近共通語言的東西。它帶著圖層、圖磚集參照、逐格屬性、物件層和自訂屬性，大多數引擎和轉換器都讀得動。有一個細節造成了大部分的 bug：TMX 裡的圖磚 ID 是整張地圖共用的，靠每個圖磚集的 firstgid 做位移。把兩張圖集合併時這個位移填錯，所有用到第二張圖集的格子都會載入成第一張的圖磚。不會跳任何錯誤，就只是看起來不對。
JSON 是大多數引擎和網頁執行環境直接吃進去的格式。通常它是一串圖層，每一層帶一個扁平的圖磚索引陣列加上格尺寸，碰撞則放在另一個獨立陣列。因為地圖是讀取端在執行時組出來的，列順序的慣例就很要緊：弄反的話整張地圖會上下鏡射——在有海岸線的地圖上一眼就看得出來，在對稱的地城裡則完全看不出來。空格也需要有明確定義的值，有些格式用 0、有些用 -1，選錯就會在每個空隙裡塞進一塊真的圖磚。
| 匯出 | 它是什麼 | 適合用來 |
|---|---|---|
| PNG | 以格尺寸乘地圖尺寸算出來的影像，可壓成一張，或每層一個檔案。 | 視覺稿、縮圖、選單背景。不隨檔帶走任何網格或碰撞資料。 |
| TMX | Tiled 的 XML 交換格式，包含圖層、圖磚集參照與物件層。 | 在編輯器與引擎之間搬移地圖，或把地圖交給另一個工具。 |
| JSON | 以圖磚索引陣列表示的圖層，外加格尺寸和一個獨立的碰撞陣列。 | 在啟動時直接載入引擎或網頁執行環境。 |
走進你的地圖（可試玩示範）
本頁的可試玩示範是 The Cyclops' Island，一款等角視角的像素遊戲，用的圖磚地圖就是在同一套編輯器裡畫出來的。按下播放，攝影機會直接落進地圖裡。碰撞層變成牆，地面層變成角色走的地板，細節層則依位置畫在角色後面或前面。
這一步是大多數工具介紹頁會跳過的。畫完地圖再匯出，代表你第一次以玩家尺度看到關卡，是在另一個程式裡、用另一台攝影機、經過一次建置之後。就地試玩則把關卡設計變成一分鐘能跑十次的循環：畫一條走廊、走一遍、發現它寬了一格、重畫。
等角投影多了一件正交地圖完全不必操心的事：繪製順序。畫面上位置越低的圖磚離攝影機越近，所以算圖端要按深度排序，大致是先比列、再比圖層，否則角色會被畫在理應遮住它的牆前面。症狀是精靈走到牆後面時，從牆頭冒了出來。在示範裡看到這個現象，成因是深度排序，不是碰撞遮罩。
接下來地圖可以往兩個方向走。留在 2D，它就是圖磚地圖加上一套角色控制器。帶進 3D Game Builder，同一張網格就變成幾何：每一格擠出成一塊地磚或一面牆，Mini World 用的就是這個做法。角色那一半交給 Agent Sprite Forge。不管你走哪條路，你畫的那張網格都不會變。
走進它真正所屬的那個世界
精靈是一個無處可站的角色。最後這一步是別人沒提供的：把你剛做好的圖集，放進一個有人可以四處走動的世界裡——一座小島、一顆行星、一個下雨的街角。這個網站上的每一個世界都是從一段文字描述做出來，並發佈成一個可以直接玩的頁面。
常見問題
圖磚地圖編輯器要錢嗎？ +
不用。網格、圖磚集匯入、自動圖磚、碰撞圖層、每一種匯出格式和試玩預覽全部免費可用。匯出檔不會壓浮水印，地圖數量也沒上限。
需要註冊或安裝什麼嗎？ +
不需要。它在瀏覽器裡跑，不用帳號、不用下載。這也代表你的成果只存在這次工作階段和瀏覽器儲存空間裡，所以任何你不想重畫的東西就匯出。比起清掉網站資料，一份 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 Game Builder
全部 31 個完成品——3D 世界、遊戲、場景——都放在同一頁，每一個都能玩。