AI 工具製作分享

用 AI 解決
美術流程的痛點

不是「AI 做設計」——而是用 AI 把反覆手動、耗時低效的素材處理流程,變成一鍵自動化工具。

🎞️ GIF → Sprite Sheet
🔩 SpriteForge 序列圖拆分工坊
往下看
🎞️
工具 1

GIF / PNG → Sprite Sheet

把各種底色的 GIF 特效一鍵拆成透明 PNG 序列與序列圖

遇到什麼問題

手動處理 GIF 素材,要做到天亮

痛點 01

GIF 幾十幀就要匯出幾十次,一張一張拆很花時間

痛點 02

發光特效不能直接去背——硬去黑會讓光暈邊緣留黑邊

痛點 03

有些素材是灰底,去背後整張蒙上一層霧

痛點 04

有些 GIF本來就透明,但還是需要拆幀和做序列圖

痛點 05

角色動畫每張尺寸不一,沒法直接拼序列圖

工具怎麼演進的

從「處理一次」到通用工具

STEP 1

拆一張黑底發光 GIF

最初只是想處理一張金色光劍特效。關鍵發現:發光特效要用「亮度當透明度」,而不是硬去黑。確立核心演算法。

STEP 2

加上序列圖排列

需要把逐格圖排成 sprite sheet 給程式引擎使用。定下規則:固定欄數,列數自動計算。

STEP 3–4

從一次性變成可重複使用 + 解決「效果太淡」

做成腳本 + GUI,集中管理。同時釐清部分素材去背後偏透明的根因並提供調整方向。

STEP 5 — 最大升級

解決「灰底」問題

發現有些素材背景是灰色,去背後整張蒙灰。新增「減背景」演算法,並擴充成四種去背模式,加上自動偵測背景色與滴管取色。

STEP 6

延伸到「PNG 合成(角色動畫)」

需求從 GIF 去背擴到:已去背但尺寸不一的逐格 PNG。新增統一畫布 + 腳底對齊 + 批次合成功能,GUI 改為分頁式。

STEP 7–8

加入「不去背」模式 + 好用小功能

來源 GIF 本身已透明時,任何去背模式都會弄壞它。新增 none 模式只拆幀。同時補上重新整理 frames、自動排除輸出資料夾等小功能。

核心設計

四種去背模式,對應不同素材

🔲 不去背(none)
適合:本身已透明的 GIF
完全保留原始透明,只拆幀做序列圖
✨ 亮度去背(luma)
適合:黑底發光/粒子/火焰
越亮越不透明,保留光暈漸層,無黑邊
🌫 減背景(subtract)
適合:灰底或純色底發光
以底色亮度為基準,去掉底色保留發光漸層
🎨 純色去背(colorkey)
適合:純色底的實心物件
硬去掉指定背景色,適合不透明的清晰輪廓
🔩
工具 2

SpriteForge 序列圖拆分工坊

把遊戲拆包的大型序列圖自動切開、分類,並支援網頁互動整理

遇到什麼問題

遊戲素材拆包,切分分類是噩夢

痛點 01

一張大圖可能有上百幀,手動框選匯出做到天亮

痛點 02

背景色百百種:街機藍、品紅、灰藍、白底……每套素材不同

痛點 03

有些排列不規則,每行角色數不同、沒對齊格線,固定切法會切壞

痛點 04

武器桿和身體之間有空隙,容易被切成兩塊

痛點 05

相鄰角色手臂伸過去,會把兩隻切成一塊

痛點 06

拆完是一堆 0000.png,不知道哪些是走路、哪些是攻擊

工具怎麼演進的

10 個真實遭遇,10 次升級

STEP 1

最初:拆一張乾淨的街機序列圖

藍底狼人圖。確立核心:行列掃描 + 去背 + 依動作分資料夾。

STEP 2

遇到武器桿分離(牛頭怪)

長柄斧武器桿跟身體之間有空白被切斷。導入連通區域分析,把相連像素當整體,再做垂直碎片合併。

STEP 3

遇到大型動作集(KOF 雅典娜)

70+ 行、上千幀。加入角色/特效自動分離。同時發現:動作名字機器猜不準,只能分段,命名得靠人。

STEP 4 — 大改版

遇到錯位排列 + 白底 JPG(綠巨魔)

每行角色數不同、JPG 邊緣有雜訊,行列掃描完全失效。全面改用連通區域法,新增「切高塊」(上下兩隻黏住時從中間切開)和「修殘臂」(隔壁手臂沾黏時切掉)。

STEP 5

流程標準化:自適應腳本

不同素材間距差很多。做出統一腳本:自動偵測背景色、自適應間距、向量化加速、預覽 HTML。

STEP 6 — 新需求

散幀整理:網頁互動編輯器

三國戰紀已切好但沒分類的 300+ 張散幀。做出相鄰幀相似度自動分段 + 可拖曳的網頁編輯器,人工微調後匯出配置檔,再批次產出最終結果。

STEP 7

互動編輯器一路被嫌、一路改

圖太小 → 加滑桿;不能調順序 → 加上下移;遠距離搬移 → 加剪下貼上;右鍵選單被工作列擋住 → 改兩欄+搜尋框。

STEP 8

支援 AI Agent 自動執行

加入代數前綴(KOV1-/KOV2-)避免同名角色覆蓋,輸出結構化 JSON_RESULT,寫 Agent 操作手冊,讓 DC Agent 能自動跑腳本、解析結果、記錄日報。

STEP 9

補上「一次處理整個資料夾」

使用者點出:需求本來就是「給一個資料夾」,工具卻只能單張。改成自動判斷:給檔案就單張、給資料夾就批次,逐張容錯。

STEP 10

GUI 升級 + 瘦身打包成 exe

批次功能做進圖形介面。打包時排除用不到的大套件(torch/tensorflow),體積從 231 MB 瘦到 66.7 MB。

成果數字

從 231 MB 到 66.7 MB

66.7MB
最終 exe 大小(從 231 MB 降 71%)
10
演進步驟(每一步對應真實遭遇的問題)
3
切割方法(行列掃描 / 連通區域 / 散幀分段)
0
日常執行需要 AI 介入(腳本/exe 自己就能跑)
方法論

人 vs 機器,各做各擅長的事

機器能做

切割、去背、幾何分段、批次處理、輸出結構化結果

只能人做

判斷「這段動作叫什麼」、在網頁拖曳微調、確認切割品質

AI 的角色

寫這些腳本、遇到特殊素材調演算法、排錯、做成可複用工具

工具的本質:
把問題轉化成流程

這兩個工具都不是「AI 自動做設計」,而是「用 AI 把反覆手動的步驟自動化」——每一個功能,都對應一個實際遇到的真實問題。

💡 問題驅動設計 🔄 迭代演進 🤝 人機分工 📦 可複用工具 🚀 降低重工成本