iT邦幫忙

2026 iThome 鐵人賽

DAY 17
0
Vibe Coding

四個番茄鐘,三次重新來過:我跟 AI 的 30 天開發考古系列 第 17 篇

Day 17|AI 畫貓、AI 切圖、AI 寫程式:那隻貓花了 35 分鐘

  • 分享至 

  • xImage
  •  

先看時間戳,6 月 15 日晚上:

20:12  tools: add Godot image slicer; extract cat sprites + tomato tray icons
       from raw AI sheets                                            (07f9e87)
20:14  assets: slice cat sprites + tomato tray icons; add CREDITS    (da27672)
20:19  assets: adopt AI cat sprites + tray icons;
       rewrite cat.gd to AnimatedSprite2D                            (7a47313, 1556 行)
20:31  font: adopt Cubic 11 as default UI font (CJK pixel)           (656f0b2)
20:47  settings: add UI font selector                                (0c9e44a)

從「有一張 AI 產的圖」到「一隻會走路的貓在桌面上巡邏」,35 分鐘。

為什麼是 AI 產圖

規劃文件裡原本寫的是去 itch.io 找 CC0 授權的像素貓:

免費 CC0 像素風素材(itch.io 貓咪 sprite sheet);授權記入 assets/CREDITS.md,避開 non-commercial 授權

實際上我沒有去找,我用 Gemini 產圖。專案的 assets_raw/ 資料夾裡到現在還躺著兩張原始檔:Gemini_Generated_Image_2bc9c92bc9c92bc9.png 和另一張。

Gemini 產的大圖:
https://ithelp.ithome.com.tw/upload/images/20260928/20153928lUSudvMdGS.jpg

這個決定是被上一版的經驗逼出來的。Sproutimer 死因之一就是素材——我想要白噪音和 LoFi,於是開始找免費又沒有版權疑慮、而且自己聽得下去的音樂。找了非常久都沒找到滿意的,光是這件事就讓人很灰心。

素材這種東西的麻煩在於,它不像程式碼可以「差不多能跑就好」。不喜歡就是不喜歡,而且找的過程完全沒有進度感,讓人不知道還要找多久。

所以第四版我直接跳過搜尋這個環節。

中間那個切圖工具

AI 產出來的是一張大圖,上面有好幾個姿勢的貓排在一起。要在 Godot 裡當動畫用,得切成一張一張的 sprite。

20:12 那個 commit 就是在做這件事——寫一個 tools/asset_slice.gd,把大圖依照網格切開,去背,存成獨立檔案。

干擾貓咪:
https://ithelp.ithome.com.tw/upload/images/20260929/20153928dcak7JMwwk.jpg

這個工具只用過一次,但它讓後面的事情變得可重複。6 月 18 日我要做系統匣的待機圖示時,又寫了一個 tools/make_idle_gray.gd,把番茄圖轉成灰階。

Gemini 產的大圖:
https://ithelp.ithome.com.tw/upload/images/20260928/20153928TCLPNOKmrx.jpg

系統匣的圖示:
https://ithelp.ithome.com.tw/upload/images/20260928/20153928p1mbU6YKvc.jpg

這種一次性小工具,以前我會覺得「寫它的時間都可以手動做完了」。但在 vibe coding 的節奏下,叫 AI 寫一個切圖腳本只要兩分鐘,而且下次還能用。手動開 Photoshop 切圖反而慢。

貓換掉之後,程式要跟著改

20:19 那個 commit 有 1556 行,因為不只是換圖。

原本 M4 做的貓是用程式畫的——cat.gd 裡有一堆 _draw(),畫幾個方塊當身體和耳朵。那是佔位用的,規劃文件裡就寫明了之後要換掉,而且介面(walking、facing、clicked)要保持不變。

換成真的 sprite 之後,cat.gd 整個改成用 AnimatedSprite2D。因為介面是先講好的,其他叫用它的地方不用改。

這是「計畫內的重寫」,跟 Day 12 那種「越修越多」的重寫完全不同。前者在規劃時就知道會發生,後者是失控。

授權還是有記

雖然圖是 AI 產的,assets/CREDITS.md 還是有寫。字型 Cubic 11 是開源的像素中文字型,這個一定要記;音效裡有一部分是我自己用工具產的,也記進去。

我覺得這是好習慣,尤其這個專案最早的定位是「可能會上架」。雖然最後沒有。

帶走這個:先定介面,素材最後才換

這是讓「AI 產素材」不會變成災難的關鍵:佔位素材和正式素材,必須共用同一個介面。

我的貓一開始是程式畫的幾個方塊,但規劃時就寫明了:之後會換成 sprite,而且 walking、facing、clicked 這三個對外介面不變。所以真的換的時候,cat.gd 內部整個重寫,其他叫用它的地方一行都沒動。

做法很簡單,在規劃文件裡寫一行:

這個模組現在用佔位素材,正式素材到位後只換內部實作,對外介面(、)不變。

另外兩個實務心得:

**素材別找,直接生。**我第二版死在找免費又能商用、自己又喜歡的音樂——這種搜尋沒有進度感,還不知道要找多久,很容易把熱情耗光。AI 產圖不一定比人畫得好,但它可以在 35 分鐘內拿到「先動起來」的東西。

**授權還是要記。**即使素材是 AI 產的、字型是開源的,也開一個 CREDITS.md 寫清楚來源。萬一哪天想把這東西給別人用或上架,這份清單就是唯一的底氣。

明天講那份 623 行的交接文件——它是我讓 AI 接力的方式,也是這整個系列還寫得出來的原因。


上一篇
Day 16|16:24 建專案,22:51 做完第三個里程碑
下一篇
Day 18|623 行的交接文件,是我讓 AI 接力的方式
系列文
四個番茄鐘,三次重新來過:我跟 AI 的 30 天開發考古 共 18 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言