RPG 精靈製作器 — 免費生成 RPG 角色、精靈與圖塊集
製作你自己的 RPG 精靈製作器
用一句話生成 RPG 角色精靈、精靈表與圖塊集。免費、線上、無須繪畫技巧——再把它們放進可遊玩的世界。
RPG 精靈製作器會把一段文字描述變成可用的遊戲美術。你輸入類似「老漁夫、藍色外套、草帽、俯視角、32×32、四影格行走」這樣的句子,產生器就會回傳一張角色精靈、一份精靈表或一組圖塊集,格式為去背的透明背景 PNG。背後的工具是 Agent Sprite Forge,在 Neta Studio 內於瀏覽器中執行。無須安裝任何東西,不用繪圖板,也不用在另一個視窗開著像素編輯器。
RPG 美術的難處不在品質,而在數量。一款小遊戲需要一名玩家、八個 NPC、四個店主,還有二十種敵人變體,其中大多數至少要有兩個方向。在你畫出第一棵樹之前,這就已經大約是四十個角色。大多數做 RPG 的人一個都畫不出來。一個能在幾秒內產出風格一致、略顯樸素的 32×32 精靈的產生器,對一個能完成的專案來說,比一張花了一整個週末的美麗插圖更有價值。
生成你畫不出來的角色陣容
從角色陣容開始,而不是主角。主角是你真正會享受繪製或反覆調整的那一個角色。專案往往死在角色陣容上:鐵匠、鐵匠的學徒、三個穿著略有不同鎧甲的守衛、一名商人、一個小孩、一隻狗、六隻史萊姆和一匹狼。每一個都是一小項美術工作,而四十項小美術工作就是一道牆。Agent Sprite Forge 的存在就是要讓你越過那道牆,讓世界在你耗盡衝勁之前先有人住。
輸入是一段描述,而描述就是整個介面。好的描述會點出四件事:角色是誰、穿著什麼、調色盤,以及視角。「守衛、鎖子甲外罩深藍色罩袍、長矛、俯視角、32×32、兩個方向」行得通。「帥氣的戰士」則行不通,而失敗是可以預期的:產生器挑選泛用的細節,你得到一個灰衣騎士,然後靠重新生成按鈕按了五次,試圖用重擲來修好一個描述問題。
第二種失敗模式是描述過度。在 32 像素寬的條件下,一個角色大致上是一顆頭、一個軀幹和兩條腿。一件披風、一個背包、一條圍巾、一片肩甲和一個發光的護身符,全都在爭奪輪廓上同樣的那十二個像素。道具在小尺寸下不會增加細節,只會增加雜訊。如果你第一次生成的結果是一團難以辨識的東西,請先從句子裡移除項目,再改其他任何東西。3D 遊戲建構工具,以及像 Mini World 和 The Cyclops' Island 這樣的世界,都採用同樣的原則:先求形體可辨識,裝飾其次。
生成範例
三種輸出形式幾乎涵蓋了 RPG 的所有需求。每一種都匯出為帶有 alpha 通道的 PNG,而且各自落在不同的位置。這些差異比美術風格更重要,因為網格錯了的精靈表,無論精靈看起來多好都無法使用。
單一姿勢
一個角色、一個影格、一個檔案。一張 32×32 的透明 PNG 是最小的可用單位。這是你在為站立的 NPC、櫃檯後的店主、路標、寶箱,或一個永不移動的敵人時所生成的東西。它會匯出成單一儲存格的 PNG。
它會以材質的形式放進平面或面向攝影機的看板上。在 3D 遊戲建構工具中,一個放在看板上的單一姿勢精靈,就足以撐起一整個由靜態 NPC 組成的村莊,而且因為沒有動畫狀態,也就沒有東西會壞掉。如果你的角色清單很長、時間很短,這就是要預設採用的格式。
行走循環精靈表
四個影格由左至右排列,匯出成條狀或網格。四個 32×32 的影格排成單列,就是一張 128×32 的 PNG。四個方向會變成 128×128 的 4×4 網格,或是兩個方向排成 128×64 的 4×2 網格。行走循環透過隨時間推進影格索引來播放;在每秒八個影格下,四影格行走每步循環約需半秒,在正常移動速度下看起來正確。
它會匯出成一張 PNG,外加一個選用的 JSON 附屬檔案,列出影格尺寸、影格數量、欄數與方向。這個附屬檔案只是純中繼資料,不是專有格式。如果你不想用它,這些數字也能從 PNG 的尺寸看出來:128 除以 32 等於四個影格。
圖塊集圖集
在一張圖片裡排成網格的地形圖塊:草地、草地邊緣、泥土小徑、水與水岸、牆頂、地板轉換。以 16×16 的儲存格來說,一張 8×8 的圖集是 128×128 的 PNG,可容納 64 個圖塊。以 32×32 來說,同樣的 64 個圖塊則需要 256×256。
它會匯出成單一圖集 PNG。它能放進 Tiled 地圖圖層、Godot 的 TileSet,或 Three.js 的圖塊網格。重要的特性是儲存格尺寸必須與地圖網格完全一致。如果你生成 32×32 的圖塊,卻把它們放在 16 單位的網格上,每隔一個圖塊就會落在半格偏移處,接縫明顯到從軌道上都看得見。
角色精靈、精靈表與圖塊集的差別
這三者在對話中常被混用,但在專案裡並不能互換。角色精靈是單一影格,不帶任何時間資訊。精靈表是一個角色各影格組成的網格,帶有影格順序。圖塊集則是不同地形元件組成的網格,改為帶有相鄰關係的資訊。選錯了,你就會把圖塊集切成一格格的動畫影格,或是把行走循環的影格當成地板擺。
決定格式的是消費端,不是產生器。先問是誰要讀這個檔案:角色精靈表的插槽要的是從左上角儲存格開始、沒有邊距也沒有留白的固定網格;圖塊圖層要的是原點已知的均勻儲存格;而 UI 影像節點要的是單一影格。留白是最常見的匯出錯誤。為了保險而加上的一像素邊距,會讓每一個影格索引都位移一格,使整段動畫偏移。
實務上的影格數與方向
兩個方向(左右,另一側以鏡射的精靈呈現)能讓你的精靈表減半,是橫向捲軸遊戲的標準捷徑。四個方向(下、左、右、上)是俯視角的預設,需要方形網格,所以四個方向各四影格的行走就是 16 個影格。八個方向是多數小團隊該停下來重新考慮的地方;精靈表會膨脹到每個角色 32 個影格,而斜向姿勢正是在 32 像素下最難以辨識的一種。
行得通的影格數:2 用於僵硬的待機上下起伏,4 用於行走,6 用於較平滑的行走,8 用於奔跑。低於 4,行走看起來像跛行。高於 8,你就是在為玩家不會有意識察覺到的影格付出成本。
| 格式 | 用途 | 網格與版面 | 消耗它的引擎端 |
|---|---|---|---|
| 角色精靈 | 靜態 NPC、道具、招牌、單一姿勢的敵人,以及放大後的對話美術 | 單一影格,無網格。常見儲存格:32×32 或 48×48 | 3D 遊戲建構工具中平面或看板上的材質;任何 2D 引擎的材質插槽 |
| 精靈表 | 行走循環、待機、攻擊、受傷與死亡動畫,每個角色一份精靈表 | 固定網格,例如 32×32 排成 4 欄 1 列 = 128×32;四個方向的 4×4 = 128×128 | Three.js 的動畫 UV 位移;Unity 精靈模式 Multiple,依儲存格尺寸切割;Godot 的 AnimatedSprite2D |
| 圖塊集/自動圖塊圖集 | 地面、小徑、水與水岸、牆、地板轉換 | 均勻圖集,例如 8×8 個 16×16 的儲存格 = 128×128;32×16 的等角菱形 | Tiled 地圖圖層;Three.js 的實例化圖塊網格;將儲存格尺寸設為相符的 Godot TileSet |
| 頭像/半身像 | 對話框、隊伍選單、商店畫面 | 單一影格,較大的儲存格,從 64×64 到 144×144 | 3D 遊戲建構工具內的 UI 影像節點,或任何 HUD 圖層 |
運作方式
五個步驟,依此順序。跳過第四步的輪廓檢查,正是人們生成了二十次、最後卻仍一無可用的原因。
01
用一句話描述角色。依序點出角色定位、服裝、調色盤與視角。生成前先檢查:把這句話唸給別人聽。如果對方腦中浮現的角色和你不同,就代表描述太含糊,輸出也會一樣含糊。
02
選擇影格數與影格尺寸。道具與靜態 NPC 用一個影格,行走用四個。投入前先檢查算術:影格尺寸乘以欄數,必須正好等於精靈表寬度。32×4 = 128,可以。48 除進 256 是 5.33,代表會出現溢出的影格。
03
生成。精靈表會以帶有 alpha 通道的 PNG 回傳,外加一份含影格尺寸與欄數的 JSON 附屬檔案。將檔案尺寸與你要求的數字核對;如果寬度不等於影格尺寸乘以欄數,就在這裡停下來重新生成,而不是留到下游再修正。
04
以 100% 縮放檢查輪廓。把圖片縮小到角色大致上會在螢幕上呈現的大小,然後觀察外形。在腦中把它填成實心黑色。如果你分不出手臂和軀幹,或分不出帽子和頭,那這個精靈在那個尺寸下就不可用。修正方式是移除道具或改用更大的影格尺寸,而不是反覆重新生成。
05
匯出,並在棋盤格背景上檢查 alpha。要驗證兩件事:邊緣沒有白色或灰色光暈,以及目前影格的最後一欄看不到下一個影格的像素。如果出現光暈,代表檔案在你的流程某處被壓平到淺色背景上了。
把它放進世界裡
放在下載資料夾裡的 PNG 不是產品。這是大多數精靈產生器止步的地方,也是決定你到底有沒有完成一件東西的一步。精靈表唯有被放到網格上、賦予碰撞體積,並由動畫計時器驅動,才會成為一款遊戲。
在 3D 遊戲建構工具中,生成精靈表的同一個瀏覽器工作階段就能直接擺放它。圖塊集的儲存格尺寸會設定世界網格,所以 32×32 的圖塊意味著所有碰撞盒都會對齊到 32 單位的倍數。光是這個決定就消除了整整一類的錯誤:角落不再有半個圖塊的縫隙,玩家也不會卡在兩塊地板圖塊之間。精靈表會變成貼在四邊形上的動畫看板,攝影機設為 2:1 的等角角度(約 26.57 度),讓 32×16 的菱形圖塊看起來像方形地板。
用這種方式打造的世界直接在瀏覽器中執行,無須安裝引擎執行環境,也沒有建置步驟。Mini World 和 The Cyclops' Island 都是文字描述變成可遊玩 Three.js 場景的例子,而你生成的角色陣容也走上同一條路。行得通的順序是:先生成圖塊集,再生成角色陣容,第三步放置玩家,最後加入 NPC。如果先做角色陣容,你就不會知道地面有多大。
- 以圖塊為基礎的碰撞碰撞盒由圖塊網格推導而來,因此會與你生成的圖塊集保持一致。
- 動畫精靈看板精靈表的影格會依計時器對照 UV 位移推進,所以四影格行走就直接從你匯出的同一張 PNG 播放。
- 等角攝影機預設2:1 的攝影機角度與菱形圖塊搭配,讓 32×16 的圖塊在螢幕上佔有方形的佔地。
- 無須安裝引擎世界在瀏覽器分頁中以 Three.js 執行。無須下載編輯器,也不需要在你能四處走動之前先經過匯出建置步驟。
免費、線上、免安裝:RPG 精靈製作器在瀏覽器中執行
這款精靈製作器免費且線上執行。沒有安裝程式、沒有桌面應用程式、沒有外掛,也不用購買繪圖軟體。你打開頁面、輸入描述,就得到一張 PNG。它使用瀏覽器的繪圖畫布與 WebGL2,所以你現有的機器就足夠了。
你得到的輸出刻意保持平淡無奇。匯出的是標準 PNG 檔案,帶有 alpha 通道,尺寸為你選定的影格尺寸與精靈表大小,外加一個選用的 JSON 檔,描述影格尺寸、影格數量、欄數與方向。沒有專有容器。沒有任何東西會把美術綁在 Neta Studio 上。如果你明天把這張 PNG 拿到別的工具有,它照樣打得開。
沒包含什麼,讓你能事先規劃:沒有骨骼綁定、沒有骨骼動畫,也沒有自動補間。每一個影格都是平面影像。四影格行走就是四張圖片。這是一項限制,也正是這些檔案得以保持可攜的原因,因為平面影格在現存的每一條 2D 流程裡都能用。
RPG 的精靈尺寸——在 RPG 精靈製作器中挑選網格
三種尺寸涵蓋了大多數的 RPG 工作:每個影格 16、32 與 48 像素。16×16 帶來密集的地圖與復古外觀,而 640×360 的視口一次顯示大片世界,但臉部會變得難以辨識。32×32 是安全的預設值;它留有足夠空間容納可辨識的頭、軀幹與腿,而且能乾淨地整除每一種常見的精靈表尺寸。48×48 適用於需要可見臉部細節的角色、必須大到能點按的手機或觸控目標,以及可見圖塊數量較少的遊戲。
比你所選尺寸更重要的一條規則:影格尺寸必須能整除精靈表寬度。一張 256 像素寬的精靈表,正好容納八個 32 像素的影格。它容不下 48 像素的影格;256 除以 48 是 5.33,所以第六欄被切成一半,取樣器就會讀進隔壁的影格。實務上,你會在目前姿勢的左緣看到下一個姿勢的一像素寬欄位,看起來像算圖錯誤,實際上卻是數學錯誤。另外,請把材質濾鏡設為最近鄰(Three.js 的 NearestFilter、Godot 的關閉濾鏡、Unity 的 Point 濾鏡)。線性濾鏡會跨越影格邊界混合相鄰像素,把清晰的精靈變成一團模糊。
本網站的精靈尺寸指南列出了完整的一組,並附上每個尺寸的精靈表算術,其中也包含儲存格為 32×16 或 64×32 而非正方形的等角菱形尺寸。
| 影格尺寸 | 適用場合 | 精靈表算術 | 要留意的失敗模式 |
|---|---|---|---|
| 16×16 | 密集的地圖、復古外觀、大片可見區域、螢幕上圖塊數量多 | 256×256 精靈表 = 16 欄 16 列 | 臉部與小道具糊成一團;帽子和鬍子會變成同一個形狀 |
| 32×32 | 2D RPG 的預設值,也是新專案最安全的首選 | 256×256 精靈表 = 8 欄 8 列;128×32 條狀 = 4 個影格 | 道具會讀成雜訊;加上披風或背包會讓輪廓難以辨識 |
| 48×48 | 更高細節的 NPC、螢幕上較大的角色、適合觸控的目標 | 288×288 精靈表 = 6 欄 6 列。256 無法被 48 整除 | 無法整除的精靈表寬度,會在欄邊緣讓下一個影格滲入目前影格 |
走進它所屬的世界
一個孤立的精靈,是個無處可站的角色。真正重要的一步,是編輯器給不了你的那一步:把你剛做好的精靈表,放進一個別人能走動穿梭的世界。本網站上的等角世界,全都是用這種方式打造並發佈的。
FAQ
RPG 精靈製作器是免費的嗎? +
是。在瀏覽器中生成精靈、精靈表與圖塊集都是免費的,而且沒有安裝程式。匯出的是標準 PNG,所以無論你接下來做什麼,檔案都歸你所有。
它能製作完整的圖塊集,而不只是單一圖塊嗎? +
可以。它會生成均勻的圖集,例如 64 個圖塊排成 8×8、每個儲存格 32×32 的網格。匯出後檢查兩件事:儲存格尺寸是否與你要擺放的地圖網格相符,以及水與小徑的邊緣在圖塊交界相接處是否對齊。
支援哪些精靈尺寸? +
16×16、32×32 與 48×48 基本上涵蓋了所有 RPG 工作,另外還有 32×16 與 64×32 的等角菱形。先選尺寸,再挑選一個正好是它整數倍的精靈表寬度,因為 48 無法整除 256。
我可以在 Unity 或 Godot 中使用生成的精靈嗎? +
可以,它們是帶有 alpha 通道的普通 PNG。在 Unity 中,把精靈模式設為 Multiple、依儲存格尺寸切割、把每單位像素數設為你的影格尺寸,並關閉壓縮。在 Godot 中,以關閉濾鏡的方式匯入為材質,然後把 TileSet 或 AnimatedSprite2D 的儲存格尺寸設為與影格尺寸完全一致。
我需要會畫畫嗎? +
不需要。你需要的是能用一句話描述角色,以及判斷一個外形在小尺寸下是否辨識得出來。第二項技能一個下午就能練起來:把精靈縮到它在螢幕上的大小,然後檢查你是否還分得出手臂和軀幹。
它能正確匯出透明度嗎? +
可以,匯出內容包含 8 位元 alpha 通道,且沒有背景。驗證方式是將 PNG 開在棋盤格而非白色背景上;邊緣出現白色光暈,表示檔案在你的流程某處被壓平了,而不是匯出有誤。
我能用它製作行走循環動畫嗎? +
可以。四個影格是行走的實務最低需求,而每秒八個影格在正常移動速度下看起來正確。匯出成條狀(四個 32 像素影格為 128×32)或網格,接著如果你要在 3D 遊戲建構工具中驅動它,就用計時器對照 UV 位移來推進影格索引。
最好的免費 RPG 精靈製作器是什麼? +
我們自己就做了一款,所以請把這段當成偏誤警告。有用的測試不是功能,而是匯出網格是否與將要消費它的引擎相符,以及這項工具是停在 PNG,還是繼續走到可遊玩的東西。如果你需要對成果進行像素級的手動編輯,就把任何產生器搭配一套像素編輯器;如果你需要精靈在同一個瀏覽器分頁裡於世界中走動,那就是我們這款在做的事。
回到 3D 遊戲建構工具
全部 31 個完成品的 3D 世界、遊戲與場景都放在同一頁——每一個都能遊玩。