如何製作圖塊地圖 — 附免費編輯器的逐步指南

學習如何製作圖塊地圖，大致上就是按正確順序做出四個決定：儲存格尺寸、圖塊集的排版、圖層堆疊，以及碰撞要放在哪裡。這些決定一旦拍板，繪製地圖就變成機械式的操作。

以下步驟依循我們在 Neta Studio 中，把一段文字描述變成可遊玩世界時所用的順序：挑選或生成圖塊集、固定格線、先鋪地形再處理細節、切分圖層，最後讓自動拼接處理邊緣。這裡的一切都不需要安裝。編輯器直接在瀏覽器中執行，而且底下每個數值日後都能更改，不必重繪地圖。

什麼是圖塊地圖？（清楚定義＋圖解）

圖塊地圖是一張由索引構成的格線，而不是一張由圖片構成的格線。每個儲存格儲存一個整數，指向圖塊集裡的某一塊圖塊，渲染器會查出這個索引，並在儲存格位置畫出該圖塊。一張 20×12、儲存格為 32 px 的地圖，就是 240 個整數，涵蓋 640×384 像素。

這種間接指向正是重點所在。一塊草地圖塊在圖集中只儲存一次，卻被數百個儲存格引用，因此地圖檔案能保持精簡、載入迅速。由於圖塊地圖是資料而非美術圖，你可以用雜訊函式生成它、以文字編輯它、在 Git 中比較兩個版本，或在鏡頭移動時分塊串流載入。

本頁最上方的圖解，是用我們自家的圖塊在 12×8、32 px 的格線上拼出來的。草地填滿內部，沙地沿著左緣與底緣延伸，水則位在沙地盡頭的右下角。以資料來解讀：第 3 欄、第 0 列的儲存格存的是草地索引，第 0 欄、第 7 列的儲存格存的是水角索引，其餘每個儲存格存的都是一般的沙地索引。原點在左上，x 向右遞增，y 向下遞增。如果你的引擎使用左下原點，地圖會上下顛倒，直到你把列索引翻轉為「總列數減 1 再減 y」。

• 格線欄與列，在地圖建立時就固定。20×12 的地圖與 40×24 的地圖，在同一鏡頭縮放下表現差異很大。
• 儲存格尺寸單一儲存格的像素佔比：16、32、48 或 64。它必須與圖塊集的圖塊尺寸完全一致，否則取樣會落在圖塊中間。
• 圖塊集合索引所指向的那張圖片，加上它有多少欄與多少列的定義。
• 索引圖層每一層的每個儲存格各一個整數。地面圖層是密集的，細節圖層大多為空，而碰撞圖層存的是旗標而非圖像。

什麼是圖塊集？（以及它有何不同）

圖塊集是那本圖畫書；圖塊地圖則是引用它的那一頁。圖塊集擁有像素：一張圖集，加上規定該圖集例如是 8 欄、每欄 32 px 圖塊的規則。圖塊地圖擁有配置：哪個索引位在每一層的哪個儲存格裡。

這兩個詞經常被混用，因為多數編輯器把它們並排顯示在同一個面板裡，也因為單一檔案格式能把這個區分隱藏起來。在 Tiled 中，這個區分很明確，圖塊集檔案與地圖檔案是分開的。在 Unity 中，Tile 資源存放角色圖，而 Tilemap 元件存放儲存格。在 Godot 中，TileSet 與圖塊地圖圖層是各自獨立的資源。

實際上的後果是：更改圖塊集會改變每一張引用它的地圖，而更改圖塊地圖只會改變一個關卡。把 32 px 的圖集換成 48 px 的圖集，每個索引仍能解析，但每張地圖現在會以不同尺度繪製，邊緣還可能取樣到相鄰的圖塊。把圖塊集當成一個附有版本號的已發布介面來看待。

步驟 1：挑選或製作圖塊集

你有兩條路：沿用現成的圖集，或生成一張。現成圖集較快，但你會連帶承接它的調色盤、儲存格尺寸與授權條款。在它之上建四十張地圖之前，先檢查授權，並確認它是格線式圖集，而非打包式圖集。打包式圖集為每塊圖塊儲存矩形座標，而非統一的儲存格，這會讓索引更困難、自動拼接也更彆扭。

如果地形必須符合特定調色盤，就生成它。Agent Sprite Forge 能依照文字描述產出一致的儲存格尺寸圖塊圖集，這消除了最常見的錯位來源：圖集裡有一塊圖塊寬 33 px，只因美術人員在儲存格外加了一筆高光。

無論走哪條路，第一遍都不是在畫圖，而是在測量。以 100% 縮放開啟圖集，數一數欄與列，並把儲存格尺寸寫在團隊其他人都找得到的地方。

• 單一儲存格尺寸每塊圖塊的寬與高都相同，包括大部分為空的圖塊。若匯出工具依閱讀順序打包，32 px 圖集裡只要有一塊 33 px 的圖塊，就會使它之後的每個索引都位移。
• 真正的透明用透明度，而不是白色。帶有不透明白色背景的圖集，在瀏覽器中會在你的天空上畫出白色方塊。
• 有記錄的格線記錄欄數、列數以及是否有邊距。索引運算是「列 × 欄 ＋ 欄」，從 0 起算，由左至右、由上至下讀取。
• 間距的決定有邊距的圖集會在儲存格之間加 1 或 2 px，以減少紋理滲色，代價是取樣運算要多一個偏移量。在落下第一筆之前就決定你要用哪一種。

步驟 2：設定圖塊尺寸與格線

儲存格尺寸由三件事決定：玩家實際遊玩的縮放、你的目標渲染解析度，以及你願意畫多少美術。在 1920 px 寬的視口上，16 px 的圖塊可橫向排列 120 個儲存格，這代表每螢幕能塞進大量關卡，細節空間卻極少。64 px 的圖塊則可排 30 個儲存格，並有足夠的像素畫出一棵看得清的樹。

最硬的限制是算術。儲存格尺寸必須能整除圖集。一張 256 px 寬的圖集在 32 px 下正好是 8 欄；在 48 px 下則是 5.33，於是最後一欄只是圖塊的一小部分，其後的每個索引都會偏移。圖集尺寸不是美感選擇，而是儲存格尺寸的倍數。

使用整數縮放。如果視口不是格線的整數倍，儲存格就會落在半像素上，濾波會取樣到兩塊相鄰的圖塊，整張地圖便會出現一條一像素寬的接縫。從兩端修正它：引擎使用最近鄰濾波，鏡頭縮放使用整數。

步驟 3：先畫地面，再畫細節

分遍繪製，永遠先畫地形。地形是你會改動的東西；裝飾則是你不想移動的東西。先放好六十棵樹，接著把海岸線往左移四個儲存格，那些樹瞬間全都站在水裡。

從單一圖塊開始。用一個草地索引填滿整張地圖，在遊玩縮放下觀察輪廓，然後才讓自動拼接處理邊緣。細節在形狀底定之後才加入，碰撞則在細節之後，因為發現某個道具可被走過去，屬於碰撞編輯，而不是重新繪製。

把玩家看得到的一切都畫上去。空白的儲存格會預設顯示渲染器在地圖後方所畫的內容，那通常不是你想要背景。在鏡頭上設定背景顏色，比依賴清空過的畫布更保險。

步驟 4：加入圖層、深度與碰撞

圖塊地圖一旦切分成圖層，就不再扁平。最少可用的堆疊是三層：密集的地面圖層、稀疏的細節圖層，以及完全不存放圖像的碰撞圖層。如果地圖中有任何東西應該遮住玩家，那麼早在角色之上的覆蓋圖層就值得加入。

深度來自同一張格線。在俯視角地圖中，依每個物件的底邊排序：腳部位置最低者最後繪製。對圖塊而言這是免費的，因為儲存格的 y 已經編碼了位置。對移動中的角色，你需要逐物件排序，並搭配具確定性的平手規則，通常是物件的 y 加上它在儲存格內的小數偏移。少了這個，同一列上的兩個物件會在不同影格間閃爍。

碰撞以相同維度的平行陣列對應到格線上。在圖塊集中為每塊圖塊設定實心旗標，這樣畫一道牆時也順帶標記為實心，並用碰撞圖層做逐張地圖的覆寫。逐儲存格旗標無法表達斜坡、單向平台或儲存格內的薄牆。那些屬於疊在格線之上的獨立物件，而非圖塊地圖。

• 地面圖層密集：每個儲存格都存有一個索引。這是唯一能安全自動拼接的圖層。
• 細節圖層稀疏，空白處透明。樹木、岩石、貼花。這裡的任何東西都不該意外阻擋移動。
• 覆蓋圖層繪製在角色之上：樹冠、橋樑、屋頂。任何應該遮住玩家的東西。
• 碰撞圖層沒有圖像。一個與地圖同尺寸的布林陣列，以圖塊集的實心旗標為初始值，並就例外情況手動編輯。

步驟 5：自動拼接與 47 圖塊集

自動拼接是那種會默默出錯的部分。一塊有八個鄰居的地形圖塊，有 2 的 8 次方，也就是 256 種可能的鄰域組合。唯有當兩條相鄰的邊都填滿時，角落才有意義，而這個對稱性把 256 種情況收斂成 47 塊獨特圖塊。這就是為什麼多數引擎與編輯器，每種地形都採用一組依既定排版排列的 47 圖塊集。

你也會遇到 16 圖塊集，它只讀取四條側邊的鄰居、忽略角落，以及 2×2 迷你圖塊集，其中每個儲存格由四塊四分之一圖塊繪成，因此 13 到 16 塊迷你圖塊就能涵蓋所有情況。16 圖塊集較易繪製，但會產生鈍拙的角落。迷你圖塊法需要的圖像較少，卻迫使你以四分之一為單位繪製每種地形，這會軟化像素美術。

如何製作出自動拼接卻沒有縫隙的圖塊地圖

遮罩就是整套機制。對每個儲存格，從它的八個鄰居建立一個 8 位元整數：位元 0 代表北，位元 1 代表東北，位元 2 代表東，依此類推順時針排列。挑一個順序，寫在程式碼旁，並且永不更改。差一個位元的遮罩仍會產出看似合理的地形，這就是為什麼不一致的慣例能存活數個月，才有人注意到角落錯了。

接著把遮罩轉成圖塊索引。有兩種做法：完整 256 項的查找表，生成起來輕而易舉，除錯也容易，因為你可以把它整列印出來；或是 47 項的表加上一個對稱函式。除非目標有記憶體限制，否則就用完整表。它能消除整整一類的角落錯誤。

在動手接上自動拼接前，值得先了解的失敗模式

地圖邊緣的接縫，來自對越界儲存格的處理不一致。一次決定好地圖之外的世界是空的、還是相同地形，並把這條規則套用到每種地形。

第二個常見的失敗是覆寫。自動拼接會改寫它掌管的儲存格，因此你為了特定外觀手繪的任何單一圖塊，都會在下一遍消失。要不就在自動拼接後鎖定地形圖層，要不就把手動覆寫存進一份最後才執行、獨立的清單。

可以打開來玩的圖塊地圖範例

閱讀一張能運作的地圖，比閱讀對它的描述學到更多。獨眼巨人島是一張可遊玩的地圖，建構在單一地形集上，並有獨立的碰撞圖層。沿著海岸線走，觀察沙地轉為水面的地方在哪裡切換圖塊：那些就是實際用上的 47 種塊狀情形。

Mini World 是較小的範例。打開它，看看圖層堆疊 — 地面、細節與覆蓋 — 以及一張地圖要用多麼少的細節圖塊，才能看起來像完成了，而不是空蕩蕩。

3D 遊戲建構器採用同一張格線，並將它擠出成立體。每個儲存格變成一個方塊，碰撞圖層變成垂直的牆，y 軸排序則變成 Three.js 場景中真實的深度。如果你的 2D 地圖本身是協調的，3D 版本幾乎不費吹灰之力；如果圖層是混雜的，擠出的過程會立刻暴露出來。

• 獨眼巨人島一張能走動的地圖，用來在遊玩速度下、而非編輯器縮放下，研究自動拼接的地形邊緣。
• Mini World一個小型格線，方便在不捲動的情況下檢視圖層堆疊。
• 3D 遊戲建構器同一張圖塊地圖擠出成方塊，碰撞圖層變成幾何，深度也變成真的。

圖塊集範本下載（PS／Aseprite 格線）

範本只是繪圖輔助，不是必需品。它是一張透明畫布，每個儲存格都有參考線，安全區域有一像素內縮標記，頂列與左欄有索引編號，讓你在繪製時看得出索引會落在哪裡。把它墊在底層畫，匯出前再隱藏它。

讓範本配合專案。一張 512×512 的畫布可容納 16×16、每格 32 px 的格線。若改用 16 px 儲存格，同一個檔案可容納 32×32 的格線，此時你應該調低參考線不透明度，因為在那樣的密度下，參考線會蓋住圖像。

走進它所屬的那個世界

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

FAQ