等角像素藝術指南 — 圖磚、精靈與角色

等角像素藝術畫在 2:1 的菱形網格上：每一格圖磚的寬度正好是高度的兩倍，高度則是用一整段垂直的像素畫出來，而不是靠透視相機模擬。32×16 是最常用的圖磚尺寸，大場景用 64×32，小道具和角色用 16×8。一旦接受了 2:1 這個比例，其他所有決定——精靈佔用的範圍、走路循環、接縫、深度排序——都是從它推導出來的。

本頁依照你實際動工的順序，依序講過網格、圖磚、精靈，以及四方向與八方向角色組。接著處理大多數教學略過的一步：把同一張菱形網格變成瀏覽器裡真正可以走動的 3D 世界，相機俯仰角固定對齊美術，圖磚則變成幾何。最後這一步我們用 Neta Studio 的 3D game builder，這也是這裡的投影細節值得完全抓準的原因。

快速解答：像素藝術的「等角」到底是什麼？

等角像素藝術是旋轉投影，不是透視投影。世界的 X 軸與 Y 軸在畫面上都走對角線——一個往右下、一個往左下——垂直軸則是以單一像素直直往上。沒有收斂、沒有消失點，深度是一套你得自己維持的慣例：在畫布上位置越低代表越近，垂直的像素越多代表越高。

比例是兩個地面軸都橫 2 對縱 1，這讓每一條地面邊緣都與水平線夾約 26.57°。嚴格說那是二測投影（dimetric）；真正的等角投影三個軸的縮短率相同，視角約在地平線上方 35.264°，地面圖磚比例約 1.732:1。這個名字之所以留下來，是因為大家就是講「等角」，而你找得到的圖磚組幾乎都畫成 2:1。

2:1 網格

2:1 之所以成立，是因為它對得上方形像素。橫 2 縱 1 的邊是一段乾淨的階梯——往右兩像素、往下一像素，重複——所以蓋圖磚時每個邊緣像素都落在整數像素上。真正的 30° 投影比例約 1.732 比 1：每橫移 2 像素就要下降 1.155。那落不到像素網格上，邊緣會在一像素與兩像素的段落之間交替，線就抖了。單一個主角道具你可以手工點那些像素；一套要蓋上千次的圖磚組沒辦法。

真正會踩到的失敗案例，是把方形畫布旋轉 45° 就當成等角。45° 轉出來的方形還是方形：菱形寬高相等，頂面和側面的剪影一樣，相鄰的深度列也不再乾淨分開。第一顆像素就照 2:1 畫菱形；永遠不要拿 16×16 或 32×32 的精靈轉出圖磚。

把圖磚位移記成偏移量。在 32×16 下，往東移動一格是螢幕座標 x +32、y +16；往北移動一格是 x +32、y -16。這一組偏移就是你在放置、精靈移動與深度排序時要用的東西。

畫出你的第一塊等角圖磚

先畫一塊圖磚，再畫一整組。目標是畫出一塊可以直接蓋、不必回頭修的圖磚，意思是每個邊緣像素都待在 2:1 的步階上，而三個看得到的面共用同一條明度階：頂面是基準明度，一面暗一階，另一面暗兩階。

兩個側面是它讀起來像等角的關鍵。如果兩側明度相同，方塊就壓平成六邊形，眼睛就不再讀到高度。挑一個光源方向——慣例是左上——而且專案裡絕對不要改。這樣每塊圖磚、每個精靈對光從哪裡來的認知才會一致。

等角精靈與精靈表

側視精靈佔的是方形範圍，水平走動。等角精靈佔的是菱形範圍，腳踩在這個菱形裡面。整張表的其他事情都從這裡推出來：基準點是菱形的中心，或者如果你習慣用腳來想，就是菱形的下角；貼圖時和它所站的地面圖磚用同一個圖磚原點。

在畫面上移動是對角的。往東移動一格地圖是往右 +32 像素、往下 +16；往北一格是往右 +32、往上 -16。所以朝東的走路循環不是一條水平迴圈——身體沿著 2:1 的斜率漂移，腿同時在跑循環。如果每一格的位移畫在同一條水平線上，角色就會在圖磚上滑行。測試方法：沿對角線放四個複本，確認腳有跟上圖磚中心。

精靈表排成方向為行、影格為列，格子尺寸統一。32×16 的佔地加上 32 像素高的角色，塞得進寬 32、高 48 的格子：16 像素給菱形，上面 32 像素給身體。透明通道保持二值，0 或 255。半透明的邊緣像素在圖集打包或縮放之後會吃進背後的顏色，於是每個角色在深色圖磚上都會帶一圈亮邊。

等角角色（4／8 方向）

四方向是標準做法，因為地面網格有四個對角：東南、西南、東北、西北。這四個朝向涵蓋了沿地圖軸線的所有移動。八方向再加上畫面正方位——北、南、東、西——只有角色同時沿兩個軸斜著走過網格時才會出現。那要兩倍的美術量，而多出來的四行只有玩家同時按住兩個鍵時才看得到。

引擎需要一個可預期的查表方式。要嘛行等於方向索引、列等於影格，要嘛用 directionIndex * framesPerDirection + frame 這種攤平的索引。把順序寫在精靈表旁邊的文字檔裡。經典的 bug 是表以東為第一列製作、卻以南為第一列匯入，結果某個方向整個朝反邊，回報過來就變成「走路動畫看起來怪怪的」。

影格數與節奏

走路循環在每秒 8 到 12 個影格之間讀起來最順。四格、8 fps 是每格 125 毫秒；六格可以讓你畫一個接觸姿和一個通過姿，沿著 2:1 對角線移動更平滑，代價也不高。除非你的中介資料會記錄每個方向各自的影格數，否則每個方向行的影格數要一樣——六格的那一行擺在四格的行旁邊，只要程式一假設網格是均勻的，播放速度就錯了。待機是一或兩格、慢速循環。攻擊與互動放另一張表，格子尺寸一樣，基準點才不會跑掉。

鏡射比較省，而且通常是錯的

把東鏡射成西可以省一半的繪製量。它同時也鏡射了光。如果你的光來自左上，翻轉後的精靈就變成從右上打光，而不對稱的細節——持盾的手、劍鞘、背包背帶——會跑到錯邊。只有在角色左右對稱、而且明暗夠平到沒人看得出來時才鏡射，帶有強烈方向性高光的精靈絕對不要翻。

物件、道具與高度

道具的美術框比它的佔地高。一棵佔地 1×1（32×16）、樹冠再往上 40 像素的樹，需要一個寬 32、高約 56 的格子：16 給菱形，40 給往上長的部分。這個格子尺寸決定一次就要定下來，所有道具都放在同一個模組裡，不然匯入程式就得為每個精靈各自記一組偏移。

跨格道具畫在更大的菱形上。一棟 2×2 的建築佔四格，所以它的地面佔地是 64×32 的菱形，即使美術往上長了 48 或 64 像素。原點放在佔地的中心——對 2×2 的道具來說就是四格交會的那個點——不是精靈外框的中心。用外框置中會讓底部偏掉半格，建築看起來就像飄在自己那塊地的某個角上。

2D 等角渲染的深度排序就是畫家演算法：先按 tileX + tileY 排序，再用每個物件的優先序打破同值。高聳的道具會把這套規則弄壞。放在第 2 列、六格高的塔會蓋掉第 5 列一面本來該遮住它的牆。兩種修法：把高聳道具拆成底座與上半部，各自按它實際佔的列排序；或者給每個精靈一份逐格的佔用遮罩，讓渲染器知道它壓在哪幾列上。

不會重複的圖磚組

等角圖磚組有兩種接縫，修法不同。明度接縫是側面接上下一塊圖磚頂面的地方：如果牆基比地面頂面亮，整張地圖的每道牆都會有一條亮線。圖樣接縫是一整排一模一樣的地面圖磚重複之處——2:1 的步階規律到眼睛大約看三塊就會抓到節奏。

邊緣變化型可以把圖樣藏起來。最小可用的組合是九塊：一塊中心、四塊單邊有轉換、四塊兩條相鄰邊有轉換。轉換要畫成 2 到 4 像素寬、柔軟破碎的帶狀，不是一條直線，否則你只是把接縫搬走，不是消掉。放置時用圖磚座標的雜湊來隨機，不要用一個一直跑下去的隨機數產生器，這樣同一個世界每次重建都一模一樣——當世界是從一段文字描述重建出來的時候，這一點很重要。

相鄰關係圖和正交圖磚組完全一樣：每塊圖磚有四個邊鄰、四個角鄰。這也是為什麼 47 格的 blob 組合可以從正交的工作原封不動搬過來——只有美術不同。沒有畫過的純斜角情況不要開，不然會出現轉角瑕疵，或兩塊地面圖磚對不上時那一像素的縫。

• 47 格 blob 圖磚組涵蓋四鄰與八鄰的所有組合，包括九塊式組合漏掉的純斜角情況。圖磚數量和正交的 blob 組合一樣，只有美術要換。
• 九塊圖磚組中心一塊、四個單邊、四個轉角。畫起來便宜，涵蓋大多數地面轉換，只有在你的放置規則允許產生純斜角情況時才會出錯。
• 鏡射變化型把地面圖磚水平翻轉是免費的變化，前提是這塊圖磚沒有光影提示。牆面或有受光的道具絕對不要鏡射：光的方向會跟著翻過去，圖磚就和鄰居對不上了。

從 2D 等角到可以玩的 3D 等角世界

2:1 菱形就是正交相機在偏航角 45°、俯仰角 30° 下得到的結果。在 30° 時垂直壓縮正好是 sin(30°) = 0.5，所以一塊正方形地面投影成寬度兩倍於高度的菱形——和你畫的像素同一個比例。真正的等角俯仰角 35.264° 會給出 1.732:1，對不上 2:1 的圖磚組。所以一塊 32×16 圖磚剛好對應 1×1 個世界單位，整組 2D 素材可以直接當貼圖貼在平面四邊形上，或擠出成方塊，完全不用重畫。

相機一動，就有兩件事會壞掉。第一，自由環繞：偏航角在 37° 時圖磚邊緣落在像素之間，整張地圖都在閃。把俯仰角鎖在 30°，偏航角吸附到 90° 的整數倍，如果你讓它做旋轉動畫，停下來之前要吸回整數倍。第二，光照：美術裡已經烘了左上光源。如果主光固定在世界座標而相機轉了 90°，美術裡的明暗就和場景對不上了。把主光掛在相機底下，或者把明暗烘進貼圖，讓光維持在畫面相對座標。

如果你想在 WebGL 裡保住像素感，就用低解析度內部渲染，再用最近鄰濾鏡放大，並把相機位置吸附到整數螢幕像素。不然紋素中心會落在像素片段之間，角色一走動畫面就爬，看起來像貼圖 bug，但其實美術沒問題。

Neta Studio 的 3D game builder 吃一段文字描述，在瀏覽器裡用固定俯仰角的正交相機蓋出真正的 Three.js 世界，可以走動，不需要本機工具鏈。Mini World 是同一個東西的小規模版本，也是在投入大地圖之前，最快測出一組圖磚和角色組讀起來正不正確的方法。The Cyclops' Island 是完成品範例世界，你可以走一圈看看這個投影實際運作的樣子。角色的部分，Agent Sprite Forge 會用指定格子尺寸產出精靈表，這也是讓基準點在各方向之間維持一致的原因。

等角像素藝術軟體

這一頁所有東西都能用附網格的點陣編輯器做完。專用工具多給的是圖磚感知：圖磚地圖模式會讓你正在畫的圖磚和鄰居一起顯示，接縫在你畫的時候就看到，而不是蓋了兩百次之後才發現。

照你得產出什麼來選，不要照功能表選。圖磚需要網格、圖磚預覽和穩定的調色盤。角色需要洋蔥皮、統一的格子和會帶上基準點的精靈表匯出。地圖需要能存圖磚座標的工具，因為 PNG 不是地圖。

• Aseprite有點陣圖磚地圖模式、圖磚網格、洋蔥皮，以及帶影格標記與基準點的 JSON 精靈表匯出。它的圖磚預覽就是它被拿來做圖磚組的原因：你一邊畫就一邊看到接縫。
• LibreSprite同一套程式碼基底出來的開源編輯器。圖磚流程大致相同，只是後期功能少一些。
• Krita 與 Photoshop通用點陣編輯器。網格參考線和對稱工具能幫你弄出菱形，但兩者都沒有圖磚地圖模式，只能手工蓋。偏移濾鏡——把畫布位移半個圖磚尺寸再看中間——仍然是找明度接縫最快的方法。
• Tiled地圖編輯器，不是美術工具。它存圖磚座標，支援 2:1 圖磚尺寸的等角方向，並匯出圖層資料。在一個工具裡畫，在另一個工具裡排。
• Neta Studio 的 3D game builder跑在瀏覽器裡。一段文字描述變成 Three.js 裡可以玩的等角世界，所以你可以完全跳過本機工具鏈和匯入步驟，直接測美術在正確的相機俯仰角下讀不讀得出來。
• Agent Sprite Forge產生角色的精靈表，這通常是一組等角素材裡最花時間的部分。產出之前先定好格子尺寸和方向數；用不同格子尺寸做出來的精靈表塞不進你的圖磚。

走進它該待的世界

精靈是一個無處可站的角色。最後一步是別人沒給的：把剛做好的精靈表放進一個有人可以走動的世界——一座小島、一顆行星、一個下著雨的街角。這個網站上每個世界都是從一段文字描述做出來，並發佈成一個你可以玩的分頁。

常見問題