角色 Sprite 製作工具:從提示詞產生完整 Sprite Sheet
打造你自己的角色 Sprite 製作工具
用一段描述製作角色 Sprite — 待機、行走、攻擊、八個方向。透明影格、乾淨網格、可直接用於引擎。然後把角色放進可走動的 3D 世界。
角色 Sprite 製作工具會接收文字描述,並回傳完整的 Sprite Sheet:待機、行走、奔跑、攻擊、施法,涵蓋八個方向,位於透明影格上、固定網格中,原點在腳底。你輸入角色資訊 — 體型、輪廓、調色盤、手持武器、服裝圖層 — 工具就會渲染該描述中的每個姿勢,而不是一格你得手動重繪的主角影格。
角色圖像與角色圖像表之間的差異,就是單張圖片與動畫系統之間的差異。一張好的待機畫面是一幅圖。一張圖像表則是一套狀態機:引擎可以循環播放的影格數、可以索引的方向,以及每一格都保持一致的角色,讓走路循環不會在中途變形。Neta Studio 會依提示詞建構整張圖像表,接著讓你將該角色放入可走動的 3D 世界。
一則提示詞即可產生完整角色圖像表
你用平實的語言描述角色:物種或身體構造、相對於格線的高度、體型、髮型或頭盔、衣著層次、手持物品、色盤範圍,以及美術方向(像素、手繪、平面向量)。產生器會將其解析為角色規格,並依同一份規格算繪完整矩陣——每個動畫、每個方向。輸出是一張圖像表,而不是姿勢挑選器。
單一影格幾乎無法說明角色在遊戲中是否可用。一旦動起來,就必須成立三件事:剪影在你實際繪製的尺寸下必須保持可辨識、色盤不得在影格之間偏移,而軸心不得漂移。圖像表會讓這些限制立即顯現。你會看到走路與待機並排,你會看到第 3 格對照第 1 格,並在偏移進入引擎之前就察覺。
以單一描述作業也能讓角色可重現。變更提示詞——把斗篷換成板甲、將色盤調冷兩個階調——你就會重新產生整張圖像表,並將變更套用到所有地方。你不必為了配合新的色彩決策而手動編輯四十個影格。
01
撰寫角色描述:身體類型、以格線單位表示的高度、體型、衣著與手持物品、色盤、美術方向。
02
設定影格格線:方形格子、便於使用二的次方、動畫列順序依文件所述。
03
產生圖像表,並將每個動畫的第一格與最後一格對照——它們應該是相鄰的,而不是相同的。
04
以最終顯示尺寸檢視剪影,不要放大檢視。
05
匯出透明 PNG 影格,使用文件所述的格線,並將原點設在腳部。
待機、走路、奔跑、攻擊、施法
五種動畫涵蓋大多數 2D 角色:待機、走路、奔跑、攻擊、施法。待機是角色一生中多半處於其中的呼吸循環。走路是移動循環,通常是腳部觸地最明顯的一種。奔跑是同樣的動作加快並加上更多軀幹前傾。攻擊是一次性動作,包含預備、接觸影格與回復。施法是帶有停留的一次性動作——角色在投射物或範圍效果結算期間維持的姿勢。
影格數比一般人預期的更重要。在遊戲尺寸下——角色在 320×180 或 640×360 視野中約 32 到 64 像素高——四格的走路讀起來就是走路;六格讀起來更順;八格開始得不償失。奔跑循環通常四格就可行。待機是二到四格;兩格是經典的呼吸,四格則可加入次要動作,例如搖擺或武器晃動。攻擊通常是三到五格:預備、接觸、順勢、回復。施法是四到六格,其中包含一個停留影格。
這裡的失敗模式是時間安排,而不是影格數。四格走路在匯出時若沒有影格間延遲,會以引擎影格率播放,看起來像抖動,而不是步伐。圖像表會附上各動畫的建議 fps,讓引擎匯入工具有合理的預設值可覆寫。
| 動畫 | 影格 | 循環 | 備註 |
|---|---|---|---|
| 待機 | 2–4 | 是 | 呼吸或搖擺;第一格與最後一格相鄰 |
| 行走 | 4–8 | 是 | 腳部接觸點落在偶數影格最為乾淨 |
| 奔跑 | 4 | 是 | 比行走更前傾、步幅更大 |
| 攻擊 | 3–5 | 否 | 預備動作、接觸、收尾 |
| 施法 | 4–6 | 否 | 包含一個用於結算的定格影格 |
一列動畫,一份描述
八方向指的是圖集涵蓋 N、NE、E、SE、S、SW、W、NW——以 45 度為間隔構成完整一圈。俯視與等角遊戲需要這種配置,因為玩家從固定攝影機觀看角色,且能朝任何方向移動。四方向(N、E、S、W)會讓對角線成為視覺上的謊言:角色往東北走,圖像卻朝東。八方向則讓朝向與移動向量一致。
圖集以矩陣方式排列:每個方向一列、動畫內的每個影格一欄,或是每個方向一個區塊,內含所有動畫且順序相同。只要順序有文件記載,兩種方式都可行。Unity 的 Sprite Editor 以格線切割;Godot 的 AnimatedSprite2D 需要個別的 region rect 或已切割的貼圖;GameMaker 的 sprite editor 接受格線加上逐影格的 origin。你在引擎中索引的順序必須與圖集算圖的順序一致,否則就會得到一個像在月球漫步的角色。
細微之處在於轉換影格。若只算圖八個標準朝向,當移動向量跨越 22.5 度邊界時,圖像會在各朝向之間突然跳換。有兩種緩解方式:算圖八個朝向,並用一段簡短的轉身動畫涵蓋邊界;或接受跳換,讓角色旋轉直接對齊到最接近的八方向之一。兩者都合理;圖集兩種都支援,因為它完全不假設有轉身影格存在。
整組角色的一致性
Sprite 製作真正的問題是飄移。角色一以特定的頭身比、特定的調色盤、特定的線寬生成。角色二較晚才生成,提示詞用字不同,回來時高了半個頭、膚色偏冷、外框也更粗。在隊伍畫面中並排擺放時,看起來不像是同一款遊戲裡的角色。
飄移來自描述不足的提示詞。如果第一個提示詞寫的是「矮壯、低飽和大地色調色盤、32 像素格、一像素外框」,第二個只寫「一個穿盔甲的騎士」,你描述的就不是一組角色,而是兩件互不相干的東西。整批角色請維持相同的風格子句,只變動身分子句:種族、體型、裝備,以及在既定調色盤範圍內的顏色。
Agent Sprite Forge 的設計就是要讓那段風格子句保持穩定。你從共用的 style spec 生成整批角色,因此頭身比、外框粗細與調色盤範圍維持恆定,個別角色則各有差異。測試方法很簡單:把整批角色的待機影格以最終顯示尺寸排成一列。若其中一個看起來像另一款遊戲,就代表 style spec 飄移了。
讓整批角色維持單一風格
在寫下任何身分提示詞之前,先凍結風格維度:格尺寸、頭身比、以像素計的外框粗細、調色盤範圍與明暗方向,以及美術方向。把這些當成常數。每個角色提示詞都繼承它們,只再加上身分。當某個角色回來時偏離風格,修正點幾乎都落在風格子句,而不是身分子句。
引擎即用的匯出
每個影格都匯出為透明 PNG。圖集隨附一份有文件記載的格線規格——格子寬高、每個方向的列數、每個影格的欄數、動畫順序——讓匯入程式知道每個格子在哪裡。原點位於腳底,並在水平方向對齊角色的質心,因此把 sprite 放到地面位置時,站在地上的是腳,而不是圖像中心。
這個原點的選擇在每個引擎中都很重要。Unity 的 Sprite Editor 可設定自訂 pivot;設為 bottom-center 以符合文件記載的原點。Godot 的 AnimatedSprite2D 使用切割後貼圖的逐影格 region rect;請讓切割結果對齊文件記載的格線,否則你的迴圈會差一個影格。GameMaker 的 sprite 屬性接受格線加上每個 sprite 的 origin 點;同樣套用 bottom-center。
匯出預設集可以覆寫。若你的遊戲使用不同的格尺寸,圖集以整數倍縮放時依然乾淨;非整數倍縮放才會造成模糊。像素藝術使用 point filtering,手繪風格使用 bilinear。透明 alpha 會保留,因此匯入前不需要清理殘邊。
| 引擎 | 匯入路徑 | 要設定的項目 |
|---|---|---|
| Unity | Sprite 編輯器 | 自訂軸心點在底部中央;依格線切片 |
| Godot | AnimatedSprite2D + SpriteFrames | 將材質依文件所述的格線切片;每一影格的區域矩形 |
| GameMaker | Sprite 屬性 | 格線大小依文件;原點在底部中央 |
角色的下一個人生:3D 世界
Sprite Sheet 就是一個角色。世界則是它生活的地方。產生該 Sprite Sheet 的同一段描述,會饋入 3D 遊戲建構器,將它變成可走動的 Three.js 世界:地面、碰撞、攝影機,以及讓角色站立的位置。你不是在工具之間移植檔案——描述本身就是資產。
你可以在瀏覽器中走動於那個世界。把角色放進去、控制攝影機,並確認 Sprite 在世界實際呈現的尺度下是否清晰可讀。一個在平面 Sprite 檢視器中看起來正確的角色,一旦牽涉到透視與陰影,放在受光的 3D 地板上可能就顯得不對。同時查看兩者,就能及早發現這種不一致。
這與 The Cyclops’ Island 走的路徑相同——一段描述,一個可遊玩的世界——而 Mini World 就是它的小規模版本。Sprite 製作工具是同一條流程的 2D 端:描述一個東西,取得可用的資產,然後把它放到你能四處走動的地方。
- Agent Sprite Forge從一段角色描述生成完整的 sprite sheet —— 待機、走路、跑步、攻擊、施法,涵蓋八個方向 —— 並提供透明 PNG 影格與有文件說明的格子。
- The Cyclops' Island一個可實際走訪的生成式 3D 世界,依描述建構而非手動擺放,並作為 sprite 製作工具所產出角色的套用目標。
- Mini World小規模的 3D 世界預設範本,可在無需建構完整場景的情況下,快速在可行走的空間中檢視角色。
- 3D 遊戲建構工具瀏覽器型的建構工具,能將文字描述轉為真實可遊玩的 Three.js 世界,並將角色以可操控的演員身分放入其中。
走進它所屬的世界
sprite 是一個無處可站的角色。最後一步是其他工具沒有提供的:把你剛建好的 sprite sheet 放進一個有人能走動的世界 —— 一座小島、一顆行星、一個下雨的街角。本站的每個世界都由一段文字描述製成,並發布為可直接遊玩的頁面。
常見問題
什麼是角色 sprite 製作工具?+
角色 sprite 製作工具能將一段文字描述轉為完整的 sprite sheet —— 待機、走路、跑步、攻擊、施法,涵蓋八個方向 —— 以透明影格呈現,並附有文件說明的格子與位於腳底的基準點。它以一項生成步驟取代逐一手繪每個姿勢,只需一段描述。
走路循環需要多少張影格? +
四到八張。在遊戲實際顯示的尺寸下——大約 32 到 64 像素高——四張影格看起來就是走路,八張則更流暢。超過八張之後,額外影格在圖集大小和匯入時間上的成本,會高於它們在辨識度上帶來的回報。
為什麼是八個方向而不是四個? +
俯視角和等距視角遊戲使用固定攝影機,並允許往任何方向移動,因此四個面向會讓對角線方向在視覺上顯得虛假。以 45 度為間隔的八個方向,能讓 sprite 的面向與移動向量一致。
Sprite 會以什麼格式匯出? +
透明的 PNG 影格,依照文件記載的格線排列,原點位於腳底,並以角色為準水平置中。同一張圖集在將樞軸或原點設為底部置中後,可匯入 Unity、Godot 和 GameMaker。
如何避免同一組角色看起來不一致? +
固定風格維度——單格尺寸、頭身比、描邊粗細、調色盤範圍、陰影方向——只讓每個角色的身分特徵有所變化。風格偏移幾乎總是來自描述不夠明確的風格條件,而不是身分描述。
我可以在 3D 世界中使用同一個角色嗎? +
可以。產生 sprite 圖集的同一份描述會提供給 3D 遊戲建構器,將其轉換成可行走的 Three.js 世界。你可以在瀏覽器中移動,查看角色在世界呈現的尺度下看起來如何。
返回 3D 遊戲建構器
全部 31 個完成的 3D 世界、遊戲和場景都在同一個頁面上——每一個都可以遊玩。
查看實際角色 Sprite Sheet
此資源庫中的每一項素材都是透明、可直接用於遊戲的 PNG,並附有已記錄的提示詞——角色 Sprite Sheet 與 Sprite 資源庫,依動作、風格與主題標註。可免費瀏覽與下載。