iT邦幫忙

2026 iThome 鐵人賽

DAY 5
0
Vibe Coding

上岸用AI,看小白如何從無到有的用Vibe Codeing開發遊戲系列 第 5

Day 05:整體架構藍圖定案與 AI 素材試產 —— 畫不出圖?用 AI 試產人物、餡料與家具!

  • 分享至 

  • xImage
  •  

歡迎來到鐵人賽的第五天!今天也是我們**「階段一:緣起、分工與工具準備」**的收官之作。

在前幾天,我們確認了專案分工、經過了技術選型(Cocos Creator + Kotlin Ktor),甚至用 Cursor + KorGE 進行了 Vibe Coding 的練習。但在正式進入遊戲程式開發前,我們面臨了一個所有獨立開發者與小白都會撞上的大牆 —— 「遊戲的視覺素材到底要從哪裡來?」


分工的現實:兩個工程師/創業者,誰來畫圖?

這次的合作模式是:我負責系統開發與架構,朋友負責提供風格方向與故事想法。但尷尬的是,我們兩個都不是專業的 2D 美術設計師。

我們要做的兩款小遊戲與整合平台,包含了「空間裝飾」與「店面經營」等元素。這意味著我們需要大量的 2D 精靈(Sprite)資產:

  1. 人物角色(NPC/房客):可愛的療癒系動物客人與角色。
  2. 餡料與食材(經營元素):用於甜點/烘焙經營玩法的各種餡料、麵團與餐點圖示。
  3. 家具與貼紙(裝飾元素):可用於房間擺設的桌椅、櫃子、植栽與牆面裝飾。

如果全部找外包繪製,光是前期繪製上百件素材的費用與溝通時間,就會直接拉長專案時程。因此,我們決定把 Vibe Coding 的精神延伸到美術領域,使用生成式 AI 進行**「素材試產」**!


生成式 AI 素材試產三步曲

我們利用 Midjourney 與 Gemini 等 AI 生成工具,搭配朋友提供的「溫暖療癒風格」方向,進行了第一波素材試產:

1. 角色人物試產

  • Prompt 關鍵字Flat 2D vector art, cute kawaii animal guest, cozy pastel color palette, white background
  • 成果:成功生成了風格統一且線條乾淨的可愛角色圖檔,並順利去背轉為透明 PNG。

2. 餡料與食材素材試產

  • Prompt 關鍵字2D game item icon, adorable bakery filling, red bean paste, matcha filling, isolated sprite sheet
  • 成果:產出了質感誘人、風格一致的紅豆、抹茶、奶油等餡料圖示,非常適合做為經營玩法的圖鑑與製作原料。

3. 家具與裝飾素材試產

  • Prompt 關鍵字Cozy isometric furniture, wooden coffee table, cute potted plant, 2D game asset
  • 成果:生成了多款等角透視(Isometric)與扁平風格的家具,完美符合我們「貼紙房」的佈置需求。

資產流水線 (Asset Pipeline) 與驗證

在試產素材的過程中,我們也建立了一套給 Cocos Creator 使用的資產標準:

  • 規格統一:圖片統一裁切為雙數解析度(如 256x256 或 512x512),避免抗鋸齒邊緣模糊。
  • 縮放對齊:將人物、餡料與家具放入 Cocos 預覽畫面中比對視覺比例,確保家具不會比人物大得太誇張。

上一篇
Day 04:Vibe Coding 實戰預演 —— 用 Cursor + Kotlin + KorGE 快速打造第一個遊戲原型
下一篇
Day 06:需求碰撞(一)—— 青花瓷中的靈獸探尋!「豆花怪」抓捕與養成玩法設計
系列文
上岸用AI,看小白如何從無到有的用Vibe Codeing開發遊戲13
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言