Piskelapp 替代方案 —— 一款也能打造 3D 的免費瀏覽器 Sprite 工具

如果你曾在網址列輸入 piskelapp，你其實已經找到了 Piskel：piskelapp 是這款免費瀏覽器像素藝術編輯器的網域。所以「piskelapp alternative」和「piskel alternative」是同一道問題的兩種問法。並沒有一個叫做 PiskelApp 的獨立產品。人們記得的名字，就是這個網址。

這一頁是這個答案的誠實版本。Piskel 在固定的像素網格上擅長什麼。它在哪裡止步。當一張圖像表必須不再只是一張圖片、而成為一個你能在其中走動的場景裡的材質時，一款瀏覽器 Sprite 工具能補上什麼。沒有排名、沒有下載次數、沒有捏造的效能指標——只有機制、檔案設定，以及失敗模式。

快速解答

piskelapp 是 Piskel 的網域，這款免費的瀏覽器像素藝術編輯器——所以「piskelapp 替代方案」與「piskel 替代方案」通常是同一個問題。當這個網域成為人們記得的名字時，工具本身並沒有任何改變。這款應用程式叫做 Piskel。而這個查詢字串是一個主機名稱。

這個查詢背後的問題幾乎總是以下兩種之一。要不是你想用一款已經向前演進的工具完成同樣的事——更快的畫布、更多圖層、會跟著你到另一台機器的存檔——就是你想要某種 Piskel 從未被打造來成為的東西：一個能產生影格的生成器，以及一個讓那些影格有容身之處的場景建構器。

那些是你時間的不同用法。如果你親手畫下每一個像素，而且喜歡 Piskel 的網格，那麼更換編輯器會讓你付出肌肉記憶的代價，卻幾乎沒有換到什麼。如果你的瓶頸是走一輪動作就要耗掉一個下午，那麼沒有任一款 2D 編輯器能解決，因為瓶頸在於繪製，而不是編輯器。

「piskelapp 替代方案」真正在問的是什麼

把網域抽掉，這句話就是「我需要一個 Sprite 工具」。它會拆解成三項經常被混為一談的需求：繪製，也就是由人移動像素；生成，也就是由模型依一段文字描述畫出影格；以及組裝，也就是影格成為一張圖像表、圖像表成為一段動畫，而動畫成為一個場景。Piskel 把第一項做得很好，也涵蓋第三項的一部分。它對另外兩項沒有任何意見。

在更換任何東西之前，先判斷哪一項是你的瓶頸。大多數離開 Piskel 改用另一款 2D 編輯器的人最後都回來了，因為第二款編輯器同樣是一個網格加上一條工具列。

piskelapp（Piskel）是什麼

Piskel 是一款在瀏覽器中運作的像素藝術編輯器。你打開頁面，設定畫布尺寸——32×32 是預設值，而且依然是合理的選擇——然後在放大的網格上，用鉛筆、油漆桶、遞色、加亮以及少數其他工具作畫。什麼都不必安裝。不會建立任何帳號。編輯器在使用者端執行，所以一旦頁面載入完成，作畫就不必等待網路的來回傳輸。

讓它贏得如今地位的，是那些人們會在同一句話裡提到的部分：洋蔥皮，讓你在製作動畫時，能看見目前影格前後影格以較低不透明度疊在後面；調色盤控制，讓你能建立一組固定的色彩並讓每個影格都維持在其中；一個會以指定影格率與尺寸播放動畫的預覽窗格；以及每個影格的小型圖層堆疊。

匯出才是它真正實用的地方，而且如果你是來尋找替代品的，這也是最值得理解的部分。你可以將目前影格或全部影格匯出為個別的 PNG，匯出成動畫 GIF，以選定的欄數、列數與整數倍率把 Sprite Sheet 匯出成一張 PNG，或將專案存成 .piskel 檔，那是一份描述影格與調色盤的 JSON 文件。

• 洋蔥皮以低不透明度將前一個與後一個影格畫在目前影格後方。你可以控制不透明度以及要顯示哪些相鄰影格。這正是讓手繪循環動畫成為可能、而非全靠猜測的單一功能。
• 調色盤建立或匯入一組調色盤，然後讓每個影格都維持在這些色票之內。色票的索引順序日後很重要：那正是你帶進著色器或調色盤替換程序裡的東西。
• Sprite Sheet 匯出一張 PNG，你的欄數、你的列數、一個整數倍率。這就是引擎或 3D 場景實際取用的檔案。
• GIF 匯出帶有逐格延遲的動畫 GIF。適合分享一段循環，用在遊戲裡則很彆扭：GIF 每個影格上限為 256 色且僅支援 1 位元透明度，所以柔和的邊緣回來時不是變硬就是消失。
• .piskel 專案檔存檔格式是一份保存影格資料與調色盤的 JSON。它能在 Piskel 中重新開啟。它無法在其他編輯器中開啟。
• 免帳號沒有任何東西需要登入。專案存在分頁裡、瀏覽器儲存空間中，以及你下載下來的任何檔案裡。

為什麼人們改為搜尋這個網域

因為產品名稱就是一個網域。只記得一半的人會輸入那串看起來像網址的東西，然後瀏覽器或搜尋框會替它補完。一個同時也是主機名稱的品牌，會無止境地產生網域形狀的查詢，而且即使沒有人再寫關於這個產品的文章，那些查詢依然穩定存在。

第二個原因是這款工具幾乎沒有改變。網格、工具列、洋蔥皮控制項、匯出對話框：它們明顯和多年前一樣。這份穩定正是人們至今仍推薦它的原因。也正是沒有什麼好寫的原因。新功能會產生新頁面；一款穩定的編輯器產生的是穩定、緩慢老去的一組頁面，而網域查詢持續湧入，背後卻沒有新東西。

實際的結果是，搜尋這個網域會回傳應用程式本身、舊教學文，以及寫於當今瀏覽器工具生態出現之前的清單文的混合。這個落差正是這一頁存在的原因。並不是 Piskel 變差了。而是周遭的類別成長出一個生成步驟和一個 3D 步驟，而 Piskel 沒有，因為它從未被指向那些方向。

Piskel 止步之處

這些是可驗證的限制，而非抱怨。每一項都是你能在一個下午內確認的事。

最重要的限制，是從一張完成的圖像表通往一個運行中場景的那條路徑不存在。Piskel 交給你一張 PNG。從那裡開始你就進入了引擎的地盤：匯入設定、濾波模式、圖集內距、軸心點、影格矩形、動畫片段、碰撞框。那些工作是實實在在的，而且正是兩小時的美術任務變成兩天整合任務的地方。

• 沒有生成步驟Piskel 畫的是你畫的東西。沒有提示詞欄位、沒有參考圖上傳、沒有模型提出影格。如果你需要八個方向的走路循環，你就是得畫八個方向。
• 沒有 3D 輸出輸出是點陣影格。沒有網格、沒有攝影機、沒有場景圖，也沒有打光。用在 3D 裡的圖像表，是一張你得自行附加、裁切與對齊的材質。
• 沒有雲端專案沒有帳號就沒有伺服器端專案。換到另一台機器，你就得匯入一個下載下來的檔案。清錯瀏覽器儲存空間，分頁本機的副本也隨之消失。
• 沒有執行環境Piskel 以固定影格率在預覽窗格中播放你的動畫，然後就停在這裡。它不會執行輸入、物理、碰撞或攝影機。
• 僅限整數倍縮放匯出倍率是整數乘數，這是有原因的。一張 32×32 的 Sprite 以 1.5× 繪製，產生的像素會交替為一或兩個螢幕像素寬。編輯器無法修正這點；解法是最近鄰濾波，加上在顯示時採用整數倍縮放。

Piskel 與一款瀏覽器 Sprite 工具的比較

這張表從決定專案的列來比較兩者。每一格描述的是一種機制，而不是一個分數。如果某一列不影響你的工作方式，就忽略它。

依照它們對你造成的成本高低來讀這些列。動畫比較起來很便宜，因為兩款工具都能製作動畫。雲端存檔與 3D 輸出才是改變工作樣貌的列，因為它們決定了你能否把美術交給別人，以及美術完成後有沒有地方可去。

什麼時候 piskelapp 替代方案值得一換

當卡住的那一步是生成或整合時，就該換。也就是下列兩種情況之一：你畫不出專案所需的影格量，或者你畫得出來，但那張圖像表始終到不了場景，因為沒有人想為每個角色手動設定圖集、軸心與片段。

當你享受繪製、而且只需要一個 GIF 或一張圖像表時，就不要換。Piskel 的網格很好，它的匯出對話框也做到了它宣稱的事。花時間評估一款替代品來取代已經順手的工具，就是你沒有花在製作動畫上的時間。

在這裡生成一個 Sprite

生成是 Piskel 中不存在的那一半，所以值得具體說明究竟發生了什麼。你寫下一句話。Agent Sprite Forge 會將它解析成一個主體、一個視角、一組調色盤與一個影格數，然後在你選定的尺寸上，把每個影格點陣化到同一個網格上。由於每個影格共用同一個網格與同一組調色盤，結果無須逐格微調就能打包成圖集。

失敗模式是可預期的，這很有用。含糊的視角詞彙會產生在兩種解讀間擺盪的影格——對一個同時具有行走方向的角色用「面向前方」就會如此。在小畫布尺寸下使用高影格數，會讓每個影格的空間所剩無幾：在 16×16 下放八個影格，每個影格大約只有一百像素的繪製面積，因此細節會變成雜訊。把不同調色盤下生成的輪廓混在同一張圖像表裡，會看起來像兩個角色被硬湊在一起。這三種情況的解法都在那句話，而不是模型。

匯出呼應你對一款 Sprite 工具已有的期待：個別 PNG、一張附欄數與列數的打包圖像表、供檢視用的動畫 GIF，或一組帶有影格矩形、軸心與建議影格率的圖集。從那裡，圖像表不是進入你自己的引擎，就是直接進入同一頁上的世界編輯器。

• PNG 圖像表一張圖片，影格依你的欄數與列數排列。這是引擎或材質載入器最先想要的東西。
• 圖集資料影格矩形、軸心點與建議影格率，讓動畫無須任何人手動建立片段就能播放。
• 逐格 PNG當你想在像素編輯器中修補某一個影格，再自行重新打包圖像表時使用。
• GIF一個快速的檢視成品。它帶有和任何 GIF 相同的 256 色與 1 位元透明度限制。

從圖像表到世界

一張圖像表還不是美術。它是一張材質。在等角場景中，圖像表上傳一次，影格被裁切成 UV 矩形，而這些矩形正是渲染器在動畫推進時所替換的東西。兩項設定完成了大部分的工作。材質濾波維持最近鄰，讓像素保持方正；圖集則在每個影格周圍留一或兩個像素的內距，這樣在遠處發生的任何濾波都不會把鄰格影格的顏色拉進邊緣像素——那是角色輪廓上出現彩色邊紋的常見原因。

攝影機是另一半。像素藝術在正交攝影機、等角角度、大約 2:1 的比例下——以約 30 度的俯仰角呈現 32×16 的圖磚足跡——讀起來才正確。換成透視攝影機，遠處的 Sprite 會比地面網格縮小得更快，即使技術上沒有任何東西壞掉，看起來也不對。以整數級距縮放：1×、2×、4×。1.5× 的縮放會讓你在同一個 Sprite 內看到一像素與兩像素寬的列。

物理與陰影是人們第一次最容易低估的部分。一張面向鏡頭的 Sprite 是一個永遠朝向攝影機的平面四邊形，所以它無法接收真正投射的陰影；與地面的接觸是一張畫在角色下方的獨立柔和圓斑貼花。碰撞以被阻擋圖磚的網格來處理，比用網格碰撞器更便宜——代理程式沿著網格走一條路徑，而它站立的圖磚決定這一步是否被允許。Neta Studio 的 The Cyclops' Island 就是這樣打造的，而 Mini World 是同一套循環的較小版本：生成一張圖像表、把它放入一個圖磚場景、在裡面走動。

• 最近鄰濾波讓 Sprite 像素保持方正。對一張 32×32 的 Sprite 使用雙線性濾波，會得到柔軟、混濁的邊緣，下游沒有任何東西能救回來。
• 圖集內距每個影格周圍一至兩個透明像素的延伸，能在一旦啟用 mipmap 後防止邊緣的顏色滲漏。
• 正交攝影機在任何距離下都符合像素網格。透視攝影機會破壞 Sprite 縮放與圖磚尺寸之間的關係。
• 圓斑陰影貼花面向鏡頭的 Sprite 無法接收投射陰影，所以與地面的接觸是畫出來的，而非模擬的。
• 圖磚網格碰撞被阻擋圖磚的查詢既快速又可預期。在一個圖磚世界中用網格碰撞器，成本更高卻毫無所獲。

走進它所屬的世界

這個網域問題有一個簡短答案和一個冗長答案。簡短的是：它就是 Piskel，而且它是一款 2D 編輯器。冗長的是圖像表完成之後會發生什麼——打開一個由相同像素打造的世界，看看編輯器止步之前的那一步。

FAQ