用 AI 做像素畫遊戲 UI 套件：按鈕、血條和 9-slice 面板

元件和規則一起提出

我們要求四個同一風格的元件：一個對話面板、一顆有三種狀態的按鈕、一條血條和一個物品欄格子。我們也把遊戲引擎的規則寫進需求說明：四個角完全相同以便做 9-slice（九宮格切割）、按下狀態往下移一像素、有限的色盤，而且不要文字。

Agent 用 GPT Image 2.5 Flare 做出一張 1,152 × 864 的圖，花了 2 點。原始檔案有 25,696 種顏色，所以 Agent 在不使用混色抖動的情況下把它減到 16 色，並把兩個版本都放到畫板上。

為我的俯視像素畫遊戲 Mossfall（森林場景：苔綠色、溫暖的木頭棕色、奶油色羊皮紙）在一張圖上做一套像素畫 UI 套件：1) 一個對話框面板，木頭外框、內部是羊皮紙，直角四角，設計成可以 9-sliced（四個角完全相同，邊緣能平均重複）；2) 一顆按鈕的三種狀態並排：一般、懸停（較亮）和按下（往下移一像素）；3) 一條水平的血條外框，內部紅色填滿約三分之二；4) 一個小的方形物品欄格子。風格：清晰的硬邊像素，嚴格對齊像素網格，不要反鋸齒、不要模糊、不要漸層，最多 16 色，扁平的深色背景。任何元件上都不要有文字或字母。

我們在第一張圖上量到的結果

有一項正確，一項接近。血條的紅色填滿占了軌道的 68.9%，接近我們要求的三分之二。按下狀態的按鈕面比一般狀態低了 7 個原始像素；照 Agent 後來量到的每個遊戲像素約 3.5 個原始像素來算，那大約是兩個遊戲像素，而不是一個。

另外兩項在遊戲裡會出問題。三種按鈕狀態的寬度分別是 273、266 和 271 像素，所以按鈕切換狀態時會跳動。對話面板的四個角也不是彼此的複本：和鏡像翻轉後的左上角相比，右上角有 13% 的像素不同，兩個下角則分別有 23% 和 25% 不同。

為什麼角和尺寸比外觀更重要

9-slice 會把面板切成 3 × 3 的網格。四個角只畫一次，永遠不拉伸。四條邊沿著長度重複，中央則填滿剩下的空間。如果四個角不一樣，每個尺寸都會看到接縫；如果邊緣圖案不能平均重複，每次拼接都會出現看得見的接口。

按鈕也遵循類似的規則。遊戲引擎會在同一個位置把一張圖換成另一張，所以只要尺寸有任何差異，玩家一碰按鈕，按鈕的外框就會移動。

告訴 Agent 哪裡失敗、引擎需要什麼

我們把量測結果傳回去，要求一套可以直接用在遊戲裡的套件。Agent 發現模型的像素並不是單一大小：按鈕、血條和格子裡每個遊戲像素約是 4.0 × 3.5 個原始像素，面板裡則約是 6.3 × 5.6。沒有乾淨的網格可以對齊。

所以它做了一件值得知道的事：保留設計，用程式碼乾淨地重畫，用一個角和一段每 16 像素重複一次的木紋邊緣組出每一個外框。因此最終的套件是精確重建模型的設計，而不是模型自己畫出的像素，木紋也比原圖簡單。

我量了那張 16 色的圖：三種按鈕狀態寬度分別是 273、266 和 271 px，所以沒辦法在原位切換；對話面板的四個角彼此有 13 到 25% 的像素不同，所以 9-slicing 會出現接縫。請把它做成可以直接用在遊戲裡的版本：量出真正的遊戲像素大小並對齊那個網格；讓三種按鈕狀態完全一樣大；讓面板四個角都是同一個角的鏡像複本；把每個元件切成各自的 PNG，背景透明；再加一個 9-slice 測試，把面板拉伸到兩倍寬、60% 高。告訴我網格大小和每個元件的最終尺寸。

9-slice 測試

Agent 把 142 × 46 的面板切成九塊，再以 284 × 28 重組，也就是兩倍寬、60% 高。四個角保持完整，木紋也連續不中斷。它還提醒：在這個高度下，上下邊框之間只剩 14 列羊皮紙，這告訴你文字能用的最小面板是多大。

我們也檢查了檔案。三顆按鈕都是 68 × 36，5 像素寬的外框逐像素相符，按下狀態的按鈕面剛好比另外兩個低一像素。面板四個 7 × 7 的角彼此完全鏡像。整套使用 13 種顏色。

UI 素材包賣家承諾了什麼

付費 UI 素材包把同樣的規則列為賣點，這正好說明這些規則就是該測試的項目。不論你是買素材包還是自己做，都可以拿它們當檢查清單。

匯入前的檢查清單

檢查每個控制項的所有狀態是否一樣大、任何會被拉伸的元件四角是否為鏡像複本、邊緣圖案是否以完整圖塊重複，以及最小的面板是否仍放得下一行文字。然後把每個元件分別匯出，每個遊戲像素對應一個檔案像素。

• 讓遊戲主角的四個方向彼此一致
• 讓一整組遊戲圖示共用一個色盤
• 做出無縫拼接的像素畫圖塊集