iT邦幫忙

2026 iThome 鐵人賽

DAY 17
0
Vibe Coding

從 Vibe Coding 到系統架構:Gemini x Claude Code 雙 AI 協同開發 Godot 2D Roguelike 卡牌遊戲實戰系列 第 17 篇

Day 17:【UI 設計】AI 聲稱的「天花板」,可能是他自己設的。

  • 分享至 

  • xImage
  •  

Day 16 講的是 AI 說「沒有」的時候,要確認它到底查了多少。
那次的「沒有」,是找不到合適的素材。

今天遇到的「沒有」換了一種形式:
不是「找不到」,而是「做不到」。

而且這一次更難發現問題。
因為它不是一句隨口帶過的結論,而是一整段聽起來很合理的技術推論。

問題在於:
如果一個推論本身沒有錯,但它建立在一個從來沒被檢查過的前提上呢?

這次我就是繞了兩個方案之後,才發現那個所謂的「天花板」,其實有一部分是自己設出來的。


一、兩張立繪,一個要塞進戰鬥畫面

我用 Gemini 生成了魔王與勇者兩張立繪。
原本想把魔王放進戰鬥畫面。
勇者那張後來沒有用上。

一方面是畫風太亮,跟《異世界救援》的深色調不太合;另一方面,玩家本來就刻意沒有具體形象,遊戲裡只有生命、護甲、攻擊力三個數值。

魔王就不一樣了。
既然是最後的 Boss,我還是希望玩家能在戰鬥畫面裡看到他的樣子。

問題也很單純:
一張 720×720 的立繪,要怎麼塞進一個已經排滿東西的戰鬥畫面?

第一個直覺是左右分欄。
左邊放魔王立繪,右邊放血條、意圖、戰鬥日誌。

聽起來合理。
但我後來才發現,我們一開始只是「覺得合理」,還沒有真的算。


二、第一個問題:1280 真的很寬嗎?

當時我直接講了一句:

1280 寬其實夠。

但真正把數字列出來之後,答案完全不同。

Viewport 寬                 1280

Margin 左右各 40            -80
                           ─────
可用寬度                    1200

手牌:5 張 × 200           1000
間距:8 × 4                  32
                           ─────
手牌佔用                    1032

剩餘空間                     168

而且左右分欄還需要再留一段 HBox 的間距。

也就是說,原本以為很寬的 1280,真正留給立繪的空間其實非常有限。
「1280 很寬」是印象,1032 是算出來的。

兩者的差別,不是多看幾張截圖就能解決的。
這個方案算完之後,基本上就不用再試了。


三、第二個方案:把魔王放到背景裡

左右分欄走不通,我換一個方向。
既然畫面沒有足夠的空間,那就不要再幫魔王另外切一欄。

把整張立繪放到背景。
透明度調低,例如 0.3,讓魔王變成一張背景氛圍圖,原本的血條、意圖、日誌、手牌全部照舊。

這次不用搶版面,看起來應該可以。
結果實際放進去之後,回饋卻是:

魔王當背景效果不是很好,能看見的部分很少。

我再把畫面實際量了一次。
問題就很清楚了。

y 0–274
魔王名/血條/意圖/日誌
→ 有文字,但看得到背景

y 274–534
手牌 5 張
→ 完全不透光

y 534–720
玩家血條/數值/按鈕
→ 有文字,但看得到背景

720 高的立繪放在正中央之後,最重要的中間區域剛好被 5 張卡牌完全蓋住。

最後只剩:

  • 頭頂的一小部分
  • 底部的火焰

而頭又剛好是這張圖最能讓玩家認出「這是魔王」的地方。

所以我在當時的紀錄裡寫了一句:

調高不透明度救不了這件事,中間那塊照樣是零,只會讓文字更難讀。這是這個方案的天花板,不是參數沒調好。

這句話現在回頭看,其實很有意思。

因為它沒有錯。

如果中間那 260px 的卡牌區域完全不透明,那麼背景圖片的透明度從 0.3 調到 0.5、0.8 甚至 1.0,那一塊依然看不到。

所以問題不是推理錯了。

問題是推理的起點沒有被檢查。


四、先繞路,才找到真正能用的空間

既然中間的手牌區域一定會蓋住立繪,那就換一種做法。

我把現有節點實際佔用的位置量了一次:

節點 對齊 佔用
BossHpBar 置中 x 430–850
BossLabel 置中 x 550–730
IntentLabel 置中 x 475–805
LogLabel 靠左 x 40–490

這樣一量,右上角其實還有一塊空間:

x 860–1240
y 32–266

這裡沒有其他節點會碰到。
而且戰鬥日誌最長的一句,到大約 x=490 就結束。

所以這不是「看起來好像有空」。
是實際量過之後,確認那裡真的有空間。
最後我把魔王拆成兩個節點,各自只負責一件事:

節點 位置 alpha 職責
BossHead 右上 300×298 1.0 讓玩家看清楚魔王長什麼樣
BossPortrait 背景全幅 0.18 留下火焰與碎石,增加背景氣氛

同一張臉不能兩邊都用高不透明度顯示,否則兩層會互相打架。

所以:

右上角的 BossHead 負責「認人」。
背景的 BossPortrait 負責「氣氛」。

BossHead 還排在日誌節點之前。
這樣萬一日誌文字變長,是白字壓在圖上,不是圖把文字蓋掉。
頭像也沒有重新生成另一張圖片,而是直接從原本的 720×720 立繪裁出來:

crop((195, 0, 525, 330))

底部再用平方衰減做淡出。

這樣可以保證前景和背景都是同一張臉,也比重新生成一張新的頭像省事。
這一版完成之後,畫面終於可以同時放下:

  • 手牌
  • Boss 資訊
  • 戰鬥日誌
  • 玩家資訊
  • 看得清楚的魔王頭像

看起來問題解決了。


五、同一天的追記:那個「天花板」,其實是我自己設的

在同一則開發紀錄的最後,我又補了一段。
我重新看前面的推論:

「調高不透明度救不了這件事。」

這句話成立的前提是:
手牌卡牌必須完全不透明。

可是我突然發現:
我從來沒有檢查過這件事。
為什麼卡牌一定要完全不透明?

答案是:
沒有為什麼。
它只是目前的設定。

Card.tscn 裡的卡牌背景,是幾個 StyleBoxFlat。
真正控制背景透明度的,只是 bg_color 裡的 alpha。
我直接看目前的設定:

狀態 alpha
normal 0.72
hover 0.84
pressed 0.92

所以我又問了一句:

卡片能有一點點透明嗎?

結果「天花板」就消失了。
卡牌只要帶一點透明度,背景的魔王就能透出來。

前面那套「前景頭像+背景立繪」的設計仍然可以保留,只是現在不需要再把「手牌區完全遮住魔王」當成一個無法改變的條件。

我前面花了兩個方案在繞一個限制,但那個限制根本不是外部規則。
它只是目前的一個參數。


六、真正的問題:這是地形,還是我自己設的?

這次之後,我留下一條很簡單的原則:

發現自己在「繞過」某個限制時,先問那個限制是不是自己設的。

有些東西確實是地形。

例如:

  • iPhone 的 Home Indicator
  • viewport 1280×720
  • HAND_SIZE = 5

這些都是外部條件。

你可以針對它們設計,但不能假裝它們不存在。

可是另外一些「就是這樣」的東西,可能只是:

某個參數目前是這個值
某個節點目前放在這裡
某個設定目前開著

它們看起來跟外部限制一樣固定。

實際上只是還沒有人問過:「這個能不能改?」

這次就是這樣。
我先嘗試左右分欄。
不行。

再把魔王放到背景。
還是不好。

接著開始設計前景頭像、背景層、裁切、透明度。
最後才發現:
最早那個被我當成「地形」的東西,只是卡牌背景的 alpha。


七、這次真正被推翻的,不是答案,而是前提

Day 16,我學到的是:

「我找過了」不代表真的查完整了。

Day 17 則更進一步。
這次 AI 的推論甚至沒有明顯的錯誤。
「中間 260px 完全不透明,所以提高背景透明度也沒用。」
這句話完全成立。

真正需要重新檢查的是:

「中間 260px 必須完全不透明。」
如果這個前提沒有成立,後面的推論再漂亮,也只是在一個不存在的限制上繼續推理。

所以現在遇到「這是天花板」的說法,我會多問一句:

這個限制是外部條件,還是我們自己設定的?

有時候答案會讓你重新設計整套方案。
有時候,可能只需要改一個數字。


明天 Day 18,同一種「AI 講得很肯定,但只信了一半」的情況會再出現一次。
這次發生在 iPhone 的 standalone 模式。
AI 連續三次診斷問題,最後都沒有找到真正原因。

直到我把 GitHub Pages 上的版本拿來做對照,才終於把問題拆開。
這一次,真正有用的不是 AI 的答案。
而是對照組。


💬 你有沒有遇過,回頭一查才發現自己一直在「繞過」的東西,其實只是自己設定的限制?


上一篇
Day 16:【AI 判斷】AI 說「這個做不到」,真的做不到嗎?
系列文
從 Vibe Coding 到系統架構:Gemini x Claude Code 雙 AI 協同開發 Godot 2D Roguelike 卡牌遊戲實戰 共 17 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言