PixelLab 替代方案 — 從像素精靈到可走入的 3D 遊戲素材
做一個你自己的 pixellab 替代方案
PixelLab 產生 2D 像素素材。Neta 產生像素精靈與 3D 模型——接著把它們放進一個你能走進去、逛一圈的世界。免費,在瀏覽器裡跑。
會去搜 PixelLab 替代方案的人,起點通常是一個很具體的卡點:像素圖本身沒問題,但你想把這些圖放進去的那個場景根本還不存在。PixelLab 產生 2D 像素素材:角色精靈、走路循環、多方向旋轉組、圖磚集、UI 外框。它做得很好。它沒做的是,把這些素材放進一個你能走動的空間裡。
Neta Studio 在同一個瀏覽器分頁裡把兩半都包了。你先產生像素精靈,再把它們丟進一個真正的 Three.js 世界,裡頭有深度、有碰撞、有你能用 WASD 操作的正機。不用安裝、不用匯出引擎專案、也沒有另一條素材管線要你手動保持同步。這一頁講的是 PixelLab 到哪裡為止、3D 場景從哪裡開始,以及你要怎麼判斷自己到底需不需要後半段。
快速回答
PixelLab 做的是 2D 像素素材。精靈、動畫影格、多方向旋轉、等角組、圖磚集、UI 元件,上面再加修補(inpainting)與風格保留的編修。對像素美術這個問題來說,這是完整的答案。它的邊界在於:素材不是場景。一張精靈表沒有位置、沒有深度、沒有碰撞器、也沒有正機。如果你的遊戲是固定正機加上圖磚網格,這條界線永遠不會擋到你。但如果你要的是一個能讓人走進去的空間,那素材就是輸入而不是輸出,你需要的是能把它擺進去的東西。
PixelLab 做得好的地方
把這四項強項講清楚很重要,因為正確的替代方案取決於你實際上用的是哪一項。
第二,多方向與等角旋轉。一張基礎精靈可以變成 4 方向或 8 方向的整組,再加上對齊 2.5D 網格的等角版本。這是大多數產生器會跳過的部分,而它往往也正是決定一張精靈能不能用在真正的遊戲裡、而不只是躺在 mockup 裡的那個部分。
第三,風格保留的編修與修補。你可以幫一頂頭盔改色、修好一條斷掉的手臂、或把軀幹延長,而不必整隻角色重新產生、把你已經認可的那版弄丟。第四,環境與圖磚集產生:草地、石頭、水面、牆體套件,邊緣處理一致,所以圖磚接起來不會有接縫。
- 一致的 AI 動畫從單一參考圖產生的走路循環,會在各影格之間維持同一套調色盤與比例。影格之間的飄移是 AI 像素動畫最典型的失敗模式,而讓角色在 6 到 8 個影格裡維持同一個造型,是這裡最難的部分。
- 多方向與等角旋轉一張精靈變成 4 或 8 方向的整組,再加上對齊菱形網格的等角旋轉。方向數要在開始前就決定,因為每個方向都是一次獨立的產生流程。
- 風格保留的編修與修補局部編修會留在既有的調色盤與線條粗細之內。當錯的只是某個小細節、而整張精靈重新產生會讓你失去已經認可的那版時,這就很有用。
- 環境與圖磚集產生地形、道具與牆體套件以整組方式產生,邊緣處理互相匹配,所以一張 32x32 的圖磚跟隔壁那張接起來看不到接縫。
2D 素材與 3D 素材
2D 素材解決的是貼圖。3D 素材解決的是空間。這是兩個不同的問題,失敗模式也不同,而把兩者混為一談,正是很多人不停在工具之間跳來跳去、最後什麼都沒做完的原因。
第一種需求型態是固定正機。在側視平台遊戲或俯瞰視角 RPG 裡,精靈就是物件本身的全部呈現。玩家需要知道關於一個角色的所有事情,都裝在一個影格裡。深度是用繪製順序假造出來的:Unity 裡的 sorting layer、Godot 裡的 Y-sort、自製渲染器裡的一個索引值。這方法可行、成本低,而且在保真度上一點都不虧。這裡 2D 工具就是正確的工具,換成 3D 管線不會讓它變好。
第二種需求型態是玩家會移動的正機。正機一旋轉,或玩家一走過某個物件,8 方向的精靈組就不夠用了。你只有八個角度,正機有無限個角度,而這個落差會表現成:角色在面朝方向之間硬切,世界卻平滑地滑動。素材這時必須變成帶貼圖的幾何體、或是一面朝向正機的 quad,或兩者都要。這就是那條線:正機固定,2D 就夠完整;正機移動,你就需要在 3D 空間裡擺放。
| 你在做什麼 | 素材必須做到什麼 | 哪個工具合適 |
|---|---|---|
| 側視平台遊戲,固定正機 | 每個狀態一張精靈;深度靠排序順序 | 2D。PixelLab 就夠了。 |
| 俯瞰視角 RPG,4 或 8 方向 | 每個角色一組旋轉,地圖要圖磚集 | 2D,再加上你引擎裡的圖磚地圖編輯器 |
| 等角場景,正機角度鎖死 | 等角圖磚與旋轉過的精靈 | 兩者都行。正機永遠不轉的話,2D 更省。 |
| 可探索場景,玩家操作正機 | 帶貼圖的幾何體,或把精靈做成朝向正機的 quad | 3D 管線。Neta 就是為這種情況而做的。 |
| 第一人稱或第三人稱走動 | 模型、材質、碰撞體 | 只有 3D 能做。精靈組涵蓋不了。 |
在這裡產生一張精靈
像素精靈在這一頁也涵蓋到了。這個產生器跑的是跟 PixelLab 同一類的任務:描述一個主體,拿回一張精靈,背景透明,影格版面可以直接切。真正決定輸出能不能用的,是決策的順序。
Agent Sprite Forge 在 Neta Studio 裡處理這件事。重點是它跟餵給 3D 那一側的是同一套工具鏈,所以這裡產生的精靈可以直接當成站牌(standee)擺進場景,不必先匯出到另一個程式再重新匯入。
01
用一句話描述主體:主體、輪廓特徵、調色盤。「裝甲蛙騎士,綠配黃銅,肩膀寬」每次都勝過一整段設定故事。
02
先決定畫布尺寸,其他都排在後面。圖磚和小道具用 32x32,角色用 64x64,只有在精靈會被放大顯示時才用 128x128。現在就對齊你引擎的圖磚尺寸或 Pixels Per Unit,不要等到你用錯的解析度認可了一張精靈之後才回頭調。
03
決定方向數。固定正機的遊戲用 1,俯瞰網格用 4,角色會平滑轉向就用 8。每個方向都是一次獨立的產生流程,所以這既是美術決策也是成本決策。
04
決定影格數。靜態道具用 1,待機用 4,走路循環用 6 到 8。影格多不等於好:32x32 之下八個影格已經超出這塊畫布能承載的細節,多出來的影格只會糊掉。
05
把原點設在角色的腳底,不是圖片中心。中心原點是角色一擺進場景就浮在半張精靈高的地方、離地飄著的最常見原因。
06
先鎖定調色盤,再要求那圈 1 像素的深色外框。替一張還沒認可的精靈描邊,等於浪費一次你最後會丟掉的流程。
玩一個用素材搭出來的場景
素材會變成世界,靠的是有東西決定它站在哪、以及什麼會擋住玩家。差別就只在這裡,而且涉及的設定數量很少。
失敗模式出現在這裡,不在產生器裡。兩個站牌放在同一個座標會 z-fighting:把其中一個偏移幾公分就好,不要跟深度緩衝區硬拚。一張開了透明通道但沒做 alpha test 的精靈,跟牆面之間的排序會錯,因為渲染器分不出哪些像素是實心的。而一面經過 alpha test 的 quad 投出的陰影,如果陰影材質沒有用同樣的門檻做 alpha 測試,會渲染成一塊實心矩形。
01
產生或匯入精靈。透明 PNG,原點在腳底。
02
擺上去。建構器會在該位置放一面朝向正機的 quad,所以精靈就變成 3D 空間裡的站牌,而不是一層平面圖層。
03
對照世界網格設定縮放。一格等於一個世界單位。一個兩格高、64 像素的角色,quad 高度就是 2;寬度依長寬比推出來,不要手動設。
04
把材質設定成像素美術該有的樣子。Point 過濾、關掉 mipmap、alpha test 設 0.5、關掉透明。在 32x32 的貼圖上開 mipmap 又用雙線性過濾,是產生的像素美術一進 3D 場景就糊掉最常見的單一原因。
05
在腳底加碰撞。用膠囊或方塊碰撞器。精靈是平的,碰撞器不是,而且它本來就不該是。
06
走進去。第一人稱或跟隨正機,WASD,滑鼠視角。如果場景在會動的正機下還是讀得對,擺放就算完成了。
PixelLab、thepixellab、the pixel lab — 同一個工具嗎?
是。PixelLab、thepixellab、the pixel lab 和 pixel lab 是同一個查詢的四種打錯方式。搜尋引擎會把空格跟開頭冠詞折進同一個實體,所以四種打法的結果都指向同一個產品。並沒有一個叫「the pixel lab」的獨立工具,也沒有另一個叫「pixel lab」的產品躲在這些變體後面。
打錯字的變體檢索結果很薄,這是結構性原因,不是熱門程度的問題。一個查詢如果背後沒有其他競爭實體,產生的就是導覽型結果:產品自己的頁面,沒別的了。比較型內容、替代方案清單、教學文,都是針對一個品類寫的,而拼錯字不是一個品類。三個字的版本又更弱,因為「pixel lab」這個詞會散到不相關的用法上,比如影像處理和印刷工作,結果就完全不是在講精靈了。如果你要解的是 3D 那一半,該下的查詢是關於場景建構或 3D 遊戲素材,而不是同一個產品名的另一種拼法。那部分由 3D game builder 涵蓋。
| 查詢變體 | 它指向什麼 | 你該怎麼用它 |
|---|---|---|
| pixellab | 產品本身 | 把它當基準查詢 |
| thepixellab | 同一個產品,開頭冠詞被折進來 | 沒什麼不同。結果一樣。 |
| the pixel lab | 同一個產品,空格被折進來 | 看自然搜尋結果,不是最上面的廣告版位 |
| pixel lab | 散到這個詞不相關的用法上 | 加上「sprite」或「animation」把像素美術的語意逼出來 |
| pixellab 替代方案 | 比較型意圖;3D 那一半沒被處理到 | 從你的正機出發,不要從工具名出發 |
你究竟需不需要 3D 素材?
大概不需要。大部分在搜 PixelLab 替代方案的人並不需要 3D 管線,而加上一條管線是真的要花時間的。一個網格要先有 UV 展開跟材質,才開始看起來像個東西。一張精靈兩者都不用。在你認定 3D 版本是升級之前,先把這筆成本老實算一遍。
有一條中間路線可以避掉大部分成本:留著像素精靈,把它們以朝向正機的 quad 擺進 3D 場景。你得到深度、會動的正機、自由擺放,而且完全不用建模或綁骨架。3D game builder 就是為這種情況而做的,而這也是唯一一種你不用做兩遍工就能同時拿到兩半的情況。
- 正機固定時,2D 就是對的側視、俯瞰,或鎖死的等角角度。正機永遠不轉的話,再多的幾何體也加不了精靈本來就沒帶的資訊,你只是為了一條螢幕上看不出差別的管線付錢。
- 動畫節奏就是遊戲本身時,2D 就是對的精確的影格數、刻意安排的停頓、只出現一格的預告動作。這要在精靈表裡逐像素寫,不是在插值的骨架上做。
- 當像素網格就是辨識度時,2D 就是對的如果你的視埠很小、每個像素都是刻意的,3D 場景會以任意角度重新取樣那個網格。外觀不會被保留,只會被平均掉。
- 玩家操作正機時,3D 才值得走動式場景、可探索關卡、任何「轉頭看」本身就是體驗一部分的東西。8 方向的精靈組涵蓋不了連續旋轉。
- 場景本身就是成品時,3D 才值得一個 demo、一件作品集、一個你想讓別人打開瀏覽器分頁就能逛的關卡。那個可走動的體驗才是成品,不是精靈。
- 你需要多種尺寸與自由擺放時,3D 才值得任意尺寸的道具、放在地形上的物件、一個從任何角度接近都要讀得對的空間。位置和旋轉變成真正的數值,而不是繪製順序。
走進它該屬於的那個世界
精靈與場所之間的落差,就是這一頁的重點。打開這條落差的另一側:一個等角 3D 世界,素材是產生的、場景是描述出來的,而且它就跑在你原本會用來匯出 PNG 的同一個瀏覽器分頁裡。
常見問題
PixelLab 免費嗎? +
去看它目前的定價頁,不要看第三方的摘要,因為方案會變,而我們不會引用一個可能已經過期的數字。我們這邊的話,精靈產生器和 3D 遊戲建構器都能在瀏覽器裡免費使用,不用安裝任何東西。
PixelLab 能做 3D 模型嗎? +
不行。它輸出的是 2D 點陣素材:精靈表、旋轉組、圖磚、UI。沒有網格、沒有 UV 展開、沒有材質。等角輸出看起來有立體感,但它不是;那是一張畫在菱形網格上的平面圖片,正機一動它不會跟著轉。
產生的精靈能用在 Unity 或 Godot 裡嗎? +
可以。你匯出一張 PNG 精靈表加上影格中介資料。在 Unity 裡,匯入時選 Sprite Mode: Multiple,把 Pixels Per Unit 設成跟你的圖磚尺寸一致,Filter Mode 設 Point,Compression 設 None。在 Godot 裡,匯入精靈表、關掉貼圖過濾,再從上面切出各個區域。兩邊都要把壓縮關掉,因為引擎壓縮是匯出的像素美術一進來就變糊最常見的原因。
thepixellab 跟 pixellab 是同一個嗎? +
是。搜尋引擎把開頭冠詞當成雜訊,所以兩種拼法指向同一個產品,變體背後沒有另一個獨立工具。三個字的「the pixel lab」還是同一個查詢,只是在結果裡更弱。
最好的免費替代方案是什麼? +
取決於你缺的是哪一半。如果你要的是 2D 像素素材,PixelLab 在這個工作本身就已經完整,換工具什麼都換不到。如果你要把這些素材放進一個能走動的場景,Neta Studio 兩半都涵蓋:產生精靈,把它以朝向正機的 quad 擺進 Three.js 世界,在腳底加一個碰撞器,在瀏覽器裡走一圈。
我需要自己畫東西嗎? +
不用。你寫描述,選畫布尺寸、方向數、影格數。但仍有兩個決定是產生器沒法替你做的:精靈尺寸要對上你的圖磚網格,方向數要對上你的正機行為。這兩件事造成的重工,比美術品質本身多得多。
回到 3D Game Builder
全部 31 個完成的 3D 世界、遊戲與場景都在同一頁——每一個都能玩。