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

等角像素藝術繪製在 2:1 的菱形網格上：每個圖塊的寬度正好是高度的兩倍，而高度是以垂直排列的像素來描繪，而不是用透視相機模擬出來的。32×16 是最常用的圖塊尺寸，64×32 用於較大的場景，16×8 用於小型道具與角色。一旦接受了 2:1 的比例，其餘每一個決定——精靈的佔地、行走循環、接縫、深度排序——都會由此推導而來。

本頁會依照你實際建構的順序，依序介紹網格、圖塊、精靈，以及四方向與八方向的角色圖集。接著會談到多數教學略過的一步：把同一套菱形網格變成瀏覽器中真正可行走的 3D 世界，讓相機的俯仰角固定與美術相符，並使圖塊成為幾何。Neta Studio 的 3D 遊戲建構器就是我們用來完成最後一步的工具，這也是為什麼這裡的投影細節值得做到完全正確。

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

等角像素藝術是一種旋轉投影，而非透視投影。世界的 X 軸與 Y 軸在畫面上都呈對角走向——一個往右下、另一個往左下——而垂直軸則以單一像素筆直向上延伸。沒有任何線條收斂，沒有消失點，深度是一種你必須手動維持的慣例：在畫布上位置越低代表越近，像素堆疊越高代表越高。

兩條地面軸的比例都是橫向 2、縱向 1，這使每一條地面邊緣與水平線約呈 26.57°。嚴格說來那是二測投影；真正的等角投影在三條軸上有相同的透視縮短，約在地平線上方 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。把這個順序寫在圖集旁邊的文字檔裡。經典的錯誤是一份以東為首撰寫的圖集卻以南方為首匯入，導致某個方向面朝反方向，而回報的問題會變成「走路動畫看起來怪怪的」。

影格數與時間控制

行走循環以每秒 8 到 12 格播放就很清楚。四格、每秒 8 格是每格 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 圖塊自動拼接組合能原封不動地從正交工作轉移過來——只有美術不同。除非你已經畫好了對角專用的情況，否則不要啟用它們，不然你會得到轉角瑕疵，或在兩個地面圖塊不一致處出現一像素的縫隙。

• 47 圖塊自動拼接組合涵蓋所有四鄰與八鄰的組合，包括九塊組合所遺漏的對角專用情況。圖塊數與正交的自動拼接組合相同；只有美術改變。
• 九塊組合中心、四塊單邊圖塊、四塊轉角圖塊。繪製成本低，涵蓋大多數地面轉換，只有在你的擺放規則禁止產生對角專用情況時才會失效。
• 鏡射變體當圖塊沒有光源提示時，水平翻轉地面圖塊是免費的變化。永遠不要鏡射牆面或有受光的道具：光源方向會隨之翻轉，圖塊就不再與鄰居相符。

從 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 中保留像素外觀，就以較低的內部解析度渲染，再用最近鄰濾鏡放大，並把相機位置吸附到整數螢幕像素。否則紋素中心會落在片段之間，角色行走時美術就會蠕動，讀起來像是貼圖錯誤，即使美術本身沒問題。

Neta Studio 的 3D 遊戲建構器會取用一段文字描述，並在瀏覽器中以固定俯仰的正交相機建出真正的 Three.js 世界——可行走、不需要本機工具鏈。Mini World 是這件事的小尺度版本，也是在投入大型地圖之前，測試一套圖塊集與一組角色是否正確呈現的最快方式。The Cyclops' Island 是一個完成品的範例世界，你可以四處走動，親眼看看投影如何運作。至於角色，Agent Sprite Forge 會以指定的儲存格尺寸產生精靈圖集，這正是讓軸心在各方向間保持一致的原因。

等角像素藝術軟體

本頁所有內容都能在具備網格的點陣編輯器中完成。專用工具額外提供的，是圖塊感知能力：一種圖塊地圖模式，能顯示你正在繪製的圖塊與其鄰居的關係，讓你在繪製時就看見接縫，而不是在蓋印兩百次之後才發現。

依你必須產出的內容來選擇工具，而不是依功能清單。圖塊需要網格、圖塊預覽與穩定的調色盤。角色需要洋蔥皮、統一的儲存格，以及能帶上軸心的圖集匯出。地圖則需要一個能儲存圖塊座標的工具，因為一張 PNG 不是一張地圖。

• Aseprite具備圖塊地圖模式、圖塊網格、洋蔥皮，以及能帶上影格標籤與軸心的 JSON 圖集匯出的點陣編輯器。圖塊預覽是它被用於圖塊集的原因：你可以在繪製時就看見接縫。
• LibreSprite源自同一套程式碼的開源編輯器。圖塊工作流程大致相同；請預期後期功能較少。
• Krita 與 Photoshop通用點陣編輯器。格線輔助與對稱功能能幫你畫出菱形，但兩者都沒有圖塊地圖模式，所以你只能手動蓋印。位移濾鏡——把畫布位移半個圖塊大小，然後看中間——仍然是找出明度接縫最快的方法。
• Tiled地圖編輯器，不是美術工具。儲存圖塊座標，支援 2:1 圖塊尺寸的等角方向，並匯出圖層資料。在一個工具裡繪製，在另一個工具裡擺放。
• Neta Studio 的 3D 遊戲建構器以瀏覽器為基礎。一段文字描述會變成 Three.js 中可遊玩的等角世界，所以你完全跳過本機工具鏈與匯入步驟，並測試美術在正確相機俯仰下是否清楚呈現。
• Agent Sprite Forge為角色產生精靈圖集，這通常是一套等角素材中最耗時的部分。在產生之前先固定儲存格尺寸與方向數量；以不同儲存格尺寸建出的圖集將無法放入你的圖塊。

走進它所屬的世界

精靈是一個無處可站的角色。最後這一步是其他人都沒提供的：把你剛建好的圖集放進一個有人能四處走動的世界——一座小島、一顆行星、一個下雨的街角。本網站上的每一個世界都是由一段文字描述製成，並發布成一個你能遊玩的頁面。

常見問題