像素藝術製作器 — 免費線上像素藝術編輯器與生成器

像素藝術製作器本質上只有四樣東西：網格、鉛筆、橡皮擦、匯出按鈕。其他所有功能 — 圖層、動畫、調色盤管理 — 都只是疊在這個循環之上的便利性。這裡的編輯器跑在瀏覽器裡。你選好畫布尺寸，用一次一個像素的鉛筆作畫，然後下載 PNG。不用安裝、不用帳號、沒有上傳步驟。

大多數工具把這個決定藏起來：網格尺寸是最難回頭的選擇。下游的一切都取決於它 — 一張臉分到幾個像素、眼睛是一格還是兩格、精靈在遊戲引擎裡放大 4 倍之後還能不能看。這一頁講編輯器本身、網格的數學、手繪與生成精靈的差別、把調色盤當預算來管，以及怎麼把你剛畫好的角色放進一個讓人可以走動的 3D 世界。

像素藝術製作器（即時畫布）

畫布就是這一頁。在首屏可見範圍內，你會看到一個固定尺寸的點陣網格、一支每次點擊寫入一個像素的鉛筆、一個把透明值寫回去的橡皮擦、一條調色盤，以及一個匯出 PNG 的按鈕。左鍵作畫，右鍵或按住修飾鍵擦除，畫布中央永遠顯示真正的像素邊界，而不是縮放後的估計值。

開始畫之前，先搞清楚畫布尺寸和檢視尺寸是兩回事。32x32 的畫布放大到 800x800 顯示，資料仍然是 32x32 個像素。縮放改變的是像素渲染出來多大，從來不改變有幾個像素。在放大狀態下匯出，寫出來的還是 32x32 的檔案 — 這是正確行為，而且幾乎每個第一次遇到的人都會嚇一跳。

新手最常弄錯的一項設定，是畫完才決定網格尺寸，而不是畫之前。有人在 64x64 畫布上打了草稿，覺得不錯，然後想把它放進 16x16 的地圖遊戲。把隨手畫的 64x64 精靈用重新取樣縮到 16x16，等於把它毀掉：兩像素寬的細節變成灰色糊塊、單像素輪廓變成兩像素的灰線、顏色數量暴增，因為每一條被平均過的邊緣都發明了一個新色值。如果你已經畫錯尺寸，就用舊版本當視覺參考，直接按目標尺寸重畫。這比任何降採樣都更快也更乾淨，而且會逼你做出小網格本來就需要的簡化。

之後再放大是安全的。之後再縮小不是。選能容納你所需細節的最小網格，並且把花掉的每一個像素都當成花掉了。

像素藝術網格與範本

搜尋像素藝術網格、像素藝術用的網格，或是在網格上畫像素藝術的人，講的其實是同一個東西：一片有界的方格場，一格就是一個像素、一個顏色。網格不是疊在作品上的裝飾。它是解析度契約。半徑 5 的圓不是圓，是一組特定的單像素階梯，你要嘛親手擺出來，要嘛接受範本給的結果。

範本會存在，是因為圓形、等角方塊或 3/4 視角角色的前四排，憑記憶推導既枯燥又很容易差一點點。範本是起點，不是完成品。把形狀貼上去，接著刪掉不屬於你角色的像素，再重繪輪廓，讓打光方向跟你其他畫好的東西一致。

你選的尺寸，是一個用像素表達的預算。8x8 的精靈給一張臉大約 4x4 的空間，這代表輪廓、眼睛、嘴巴不可能同時塞進去 — 你只能選兩樣。16x16 的精靈可以容納單像素輪廓，以及每種材質兩個色階。32x32 的精靈終於有空間表現打光方向。超過 64x64 之後，人會忍不住開始畫筆觸而不是畫像素，讓這個風格之所以成立的嚴格感就開始漏掉了。

非正方形的網格對圖磚很重要。16x32 的畫布是俯視角遊戲裡站著的角色；32x32 的畫布是一塊圖磚。把這兩類放進不同檔案，因為角色精靈和圖磚集裡的圖磚進到引擎之後，對齊規則不一樣。

有些人會在試算表裡做網格，一格一個像素，邊填格子邊縮小畫面檢查整體形狀看不看得出來。這行得通，而且有一個實質好處：你可以複製一塊 6x6 的眼睛，貼進精靈表的每一格，不用重畫。

問題出在匯出。試算表會渲染格線、框線和儲存格內距。如果你把整張表截圖再裁切，你會連帶得到每個像素之間一條一像素寬的暗縫，以及每個儲存格邊緣稍微跑掉的顏色。先把格線和框線關掉，把縮放調成精確的整數倍，然後照像素邊界裁切，而不是用眼睛抓。專用畫布可以完全避開這些問題 — 這就是為什麼試算表是很好的規劃工具，卻是很差的生產工具。

手繪 vs 生成

兩種方法填的是同一塊畫布。手繪寫入的是你親手擺的那些像素。生成寫入的是一組符合描述條件的像素，然後由你來編輯。兩者都不是對方的捷徑；它們回答的是不同的問題。

當你腦中已經看到剪影時，手繪會贏。如果你知道頭盔的形狀、兩眼之間的精確間距，或是這個角色必須怎麼跟既有的四個精靈排在一起，那麼親手擺像素比描述完再修正結果更快。當你在探索時，生成會贏。如果你知道的是概念 — 側視、拿著盾牌的裝甲青蛙 — 但不知道剪影，生成可以用一次產出給你一個起點，而不是讓你做四十個決定。Agent Sprite Forge 能把描述直接生成到一個你可以繼續編輯的網格裡，這點很重要，因為產出是起點，不是交付物。

生成的精靈輸出在縮圖尺寸下看起來合理，放大到 8 倍就一團亂。典型的損傷包括：偏離輪廓一格、飄在旁邊的零星單像素；本該連續的單像素輪廓出現斷口；反鋸齒邊緣帶著不在你調色盤裡的顏色；以及精靈直接碰到畫布邊界。最後一項不只是美觀問題 — 佔滿整張畫布的精靈沒有留白，旋轉、陰影或引擎端任何內距都會把它裁掉。

修法是機械式的，每個精靈花幾分鐘。每次都照同一個順序做，才不會把已經修好的問題又弄回來。

線上、免費、不用下載

免費涵蓋完整的作畫循環：選網格、鉛筆、橡皮擦、填色、編輯調色盤、匯出 PNG。它不會過期，也不會把匯出功能鎖在帳號後面。生成才是實務上有限制的部分，因為產出一個精靈要花算力，而擺一個像素不用。作畫和匯出沒有限流。

作畫和匯出不需要帳號。你畫的東西不會被上傳；圖只留在瀏覽器分頁裡，直到你下載它才離開。瀏覽器端編輯的取捨，跟任何沒有自動存檔的桌面程式一樣：沒匯出就關掉分頁，圖就沒了。在精靈看起來正確的時候就匯出，而不是等它完成。中間版本很便宜。

匯出檔裡就只有那些像素。PNG 為畫布原生尺寸、8 位元 RGBA、保留透明通道。如果你畫在透明背景上，背景就維持透明 — 透明是一個值，不是一種顏色，它會撐過匯出。如果你畫在填色背景上，那個填色會烘進角色後面的每一個像素。想要背景色，就刻意塗一個。想在之後把精靈疊到別的東西上，就讓背景空著，直接匯出。

誠實的分界在生成和其他一切之間。編輯、色彩處理和檔案輸出都在本機執行，你用一次或用一年，行為都一樣。實務限制落在生成上，所以好用的流程是先生成粗略形狀，再把時間花在編輯器裡 — 那裡沒有任何東西被計量。

匯出路徑上的任何環節都不會加浮水印、不會重新取樣、也不會把檔案重新命名成畫布尺寸。你畫什麼就得到什麼。

調色盤與風格

顏色是預算，不是偏好。16 色的調色盤是一種約束，逼你重複使用顏色，而重複使用才讓精靈讀起來像一個完整物件，而不是一堆像素。當同一個中間棕同時出現在皮帶、木柄和靴子上，眼睛會把它們歸成一組，角色就對焦了。256 色的調色盤是足以把自己吊死的繩子：它讓你每次遇到問題就加一個新顏色，結果是整張圖沒有內在邏輯。同一個繪師用兩組互不相關的 60 色調色盤畫出的兩個精靈，看起來會像來自兩個不同的專案。

把調色盤建成色階帶，而不是一個一個顏色。一組堪用的 16 色，是五條各三個色階的色帶，加上一個專門的輪廓色。每條色帶分成基礎色、陰影色、高光色。基礎色是你的中間調。陰影色是把基礎色壓暗並往藍或紫偏，不是只壓暗 — 只降低亮度做出來的陰影，看起來像髒污。高光色是把基礎色提亮並往黃偏。在 16x16 的精靈上，高光大概該覆蓋十分之一的像素；超過這個比例，光源就不再具有方向性。

風格來自你一致套用的規則，不是來自顏色本身。整組角色共用一組調色盤，代表玩家外衣上的紅、敵方旗幟上的紅、補血道具上的紅是完全相同的 RGB 值。這就是全部的訣竅。執行起來不花成本，而它決定了遊戲看起來是有意設計的，還是拼湊出來的。

把你的像素角色變成 3D 世界

交接只有一句話：把精靈以 100% 匯出，當成貼圖匯入，然後以像素網格的整數倍放進世界，讓像素維持方正。

3D 遊戲建構器會把那張貼圖放到一個永遠面向鏡頭的平面上，所以 16x16 的角色從任何角度看都還是 16x16 的角色，而不是在你橫向走動時變成一條薄片。碰撞、重力、跟隨鏡頭都跟精靈無關，這代表你可以之後再換美術，而不用動角色控制器。Mini World 是測試結果的最小場地：一小塊可走動的區域、一個角色、幾個可以撞到的物件。The Cyclops' Island 是更大的測試場，地形高度和視線關係會讓精靈相對於環境的比例對不對，一眼就看得出來。

比例是多數人第一次嘗試就出錯的地方。放任何東西之前先決定換算率 — 一像素等於一世界單位，對 16x16 的精靈太小，對 128x128 的精靈又太大。挑一個倍率，讓角色最後大約是一個門的高度，然後整個專案裡每個角色都用同一個倍率。用兩種不同像素對世界比例建出來的角色，站在一起永遠不會對。

縮放與放大，不要糊掉

像素藝術在構造上就是硬邊。每一種平滑濾鏡 — 雙線性、雙三次、Lanczos — 都是靠平均鄰近像素運作，而平均兩個調色盤顏色會產生第三種不在你調色盤裡的顏色。那個第三色就是糊掉的部分。它不是渲染設定，不能之後再取消；影像一旦被重新取樣，原本的硬邊就沒了。

只以整數倍放大：2x、3x、4x、8x。16x16 的精靈放大 4 倍是 64x64，每個來源像素變成乾淨的 4x4 方塊。放大 2.5 倍的話，有些來源像素變成 2 像素寬、有些變成 3 像素寬，精靈在整個網格上就會出現肉眼可見的不均勻 — 輪廓有些地方粗、有些地方細。除了重新以整數倍匯出，事後沒有辦法補救。

會悄悄毀掉一張乾淨精靈的設定，是重新取樣濾鏡，不同工具把它叫做 Interpolation、Resample、Resample Image，或是 Scale 旁邊的一個 Smooth 勾選框。它在大多數編輯器和圖片檢視器裡預設就是某種平滑模式，而且每次用到就重新濾一次圖。在你動尺寸之前，先把它設成 Nearest Neighbour。同樣的規則也適用於影像編輯器以外的地方：匯入 3D 引擎的貼圖，minification 和 magnification 濾鏡都要設成 nearest，像素貼圖的 mipmap 要關掉，否則鏡頭一移動引擎就會把它平滑掉。在網頁上，對應的設定是 image-rendering 設為 pixelated — 不然瀏覽器把 32x32 的 PNG 縮放到 96 像素寬時會套用自己的平滑處理，在你最後一步把你的工作成果抵銷掉。

還有一點：不要讓 UI 用百分比縮放你的精靈。一個把圖片設成彈性寬度 100% 的容器，會隨視窗落在 2.3 倍或 3.7 倍，精靈在每塊螢幕上看起來都不一樣。以原生像素尺寸渲染，再以整數倍放大，或是直接指定顯示尺寸。

走進它所屬的那個世界

精靈是一個沒有地方站的角色。最後這一步是別人沒提供的：把你剛做好的精靈表放進一個有人可以走動的世界 — 一座小島、一顆行星、一個下雨的街角。這個網站上的每個世界都是從一句書面描述做出來，並發佈成一個可以直接玩的頁面。

常見問題