遊戲 UI 九宮格與可拉伸底圖：Figma / PSD 標註與引擎 Sliced 驗收

面板被拉寬後出現四角發糊、中間紋理重複、圓角被拉成橢圓，多數是九宮格（9-slice / cap insets）未在交稿階段說清，或引擎裡用了 Simple 縮放整張底圖。程式在 Unity Editor 裡改 Image Type 和 border 能救一屏，但下一版設計稿又會覆蓋——若 border 與匯出倍率不一致，返工會反覆發生。

下文以 Unity UGUI 的 Image（Sliced / Tiled）為主；Godot 的 StyleBoxTexture、Cocos 的 Sprite 九宮格與 content padding 概念對應。錨點與 Safe Area 見 進引擎 MCP 清單 第 6 項；多語言下拉伸區內邊距見 多語言爆框 設計自查第 7 項。

設計稿交稿自查 第 6 項要求「九宮格 / 可拉伸區域標清」。本文展開何時必須切、Figma/PSD 標註、三引擎對照驗收、整屏稿進畫布路徑，並附回修表。

失敗判據（任一即未通過）： 四角裝飾隨拉伸變形；拉伸區出現非設計意圖的重複紋理或接縫；圓角半徑隨面板尺寸變化；可拉伸底圖與固定圖示/頭像同層縮放；匯出倍率與引擎 border 像素不一致導致 1px 縫或虛邊。

---

何時必須九宮格，何時禁止硬拉伸

資源類型	建議	禁止
彈窗 / 設定面板底	九宮格 + 內容區 padding	單圖 Simple 拉滿全螢幕
輸入框、條形容器	九宮格或左/右 cap + 中間 repeat	僅壓扁高度不換圖
主按鈕（固定寬高）	固定尺寸 Sprite，或九宮格 + min 寬	把帶圓角按鈕當背景無限拉寬
圖示、頭像、技能框	固定尺寸，不 Nine-slice	與面板底圖合併成一張拉伸圖
全螢幕背景（無圓角框）	全圖或分塊平鋪策略寫進規格	誤對面板底用同一套 border

決策簡則： 只要寬度或高度會隨解析度 / 文案 / 列表內容變化，且四角視覺必須保持形狀 → 用九宮格或引擎等價物；尺寸固定的控件 → 固定 Sprite + 佈局約束。

---

Figma / PSD 交稿標註（可勾選）

#	檢查	通過標準
1	可拉伸層與裝飾/圖示/文字分層	面板底可換皮、可 Sliced，圖示不跟著 scale
2	Border / cap inset 以 px 標註（四邊或上下左右）	與 @1x 或團隊約定倍率一致，寫進交付說明
3	匯出倍率固定（@1x/@2x 或 1080 基準）	程式換算 border 時不猜
4	圓角在拉伸區外或規格允許「僅角部不拉伸」	無「圓角被拉成膠囊」驗收通過
5	拉伸區紋理可平鋪或純色，無唯一方向圖案	中間 repeat 不出現明顯錯位
6	命名含語意	如 Panel_Shop_9s、Input_Field_9s
7	多狀態（normal / disabled）同一 border	各狀態 inset 一致，僅換色或換皮
8	PSD 切片或 Figma export 含透明邊說明	不把陰影算進 border，除非規格明確要求
9	與 交稿自查第 5 項 按鈕狀態一併交付	缺狀態不拿九宮格底圖湊數
10	活動換皮僅換圖時 border 不變	見 換皮 規格

Figma：使用 resizable frame 或外掛匯出的 slice 規則時，把 cap inset 寫入組件說明。PSD：切片邊界與 5 分鐘 PSD 進 Unity 分層約定一致。

---

三引擎對照：組件與驗收

項	Unity UGUI	Godot 4 Control	Cocos UI
組件	Image → Type Sliced / Tiled	StyleBoxTexture（patch margin）	Sprite 九宮格 / Sliced
Border 來源	Sprite Editor Border（L/T/R/B px）	content_margin / patch	Cap insets（左下右上或 LTRB）
內容區	RectTransform + 子節點 padding	MarginContainer + Theme	Widget / Layout padding
常見失敗	Simple 誤用；Border 按錯倍率	patch 與紋理尺寸不一致	圖集旋轉導致 inset 錯
通過	拉寬 150% / 200% 四角清晰、中間無接縫	同左，Theme 預覽與 Play 一致	同左，真機抽一條長列表

Unity Editor 驗收步驟（可複用到其他引擎等價操作）：

1. 將目標 Prefab 在 Inspector 中設為 Sliced，填入與稿一致的 border。
2. 拖動面板 RectTransform 寬度至設計最大、最小兩檔。
3. 檢查四角、邊線、拉伸區紋理與 Figma/PSD 截圖對比。
4. Play 模式下若仍正常 → 再抽 發布前清單 真機一條。

整屏概念稿：畫布拆分與重導

只有 PNG 或 AI 整屏稿時，程式無法從單圖猜 border。路徑：VberAI Studio（AI Studio，≠ Google AI Studio）畫布 原位拆分 → 標註可拉伸面板 → 匯出 Prefab（確定性，非 LLM 改 YAML）。

步驟	動作	驗收
1	整屏進畫布，拆出 Panel_* 與固定圖示	層級可命名
2	在畫布或匯出前確認面板 9-slice 語意（或引擎內補 Border）	與程式約定誰填 inset
3	匯出 Unity / Godot / Cocos Prefab	進工程後按上表做 Sliced 驗收
4	換皮 / 多語言後 整樹重導	border 規格未變則 inset 不重算

已有 Figma/PSD 分層時，優先 Figma → Unity 或 PSD 切 UGUI，再在引擎內只做 border 微調——避免每版活動重手切 20 張散圖。

---

回修路徑表

現象	最可能原因	建議動作	負責
四角模糊	Simple 縮放整圖	改 Sliced + 正確 border；設計補 inset 標註	程式 + 設計
中間接縫 / 重複塊	inset 錯 1–2px；倍率不一致	對齊稿面 px；重導 Sprite	程式
圓角被拉長	不該 Nine-slice 的圖被拉伸	改固定尺寸或重出圓角底圖	設計
換皮後 border 變	新圖尺寸或透明邊不同	換皮規範固定畫布尺寸；換皮 後重驗收	設計
列表項高度變底圖變形	列表項底當全屏 panel 拉伸	列表項單獨 9s 規格或固定高	設計
僅某解析度失敗	Canvas Scaler + 非整數縮放	查 進引擎清單 Anchor/Scaler	程式

決策簡則： border 與稿不一致 → 先改設計標註或 Sprite 源，再改 Prefab；僅改 Inspector 不寫回交付物 → 下一版匯出仍會丟。

---

與「只交 PNG 散圖」的分工

手段	適用	不適用
手工 Export + 程式填 Border	少量面板、Demo	頻繁換皮、多屏 UI
Figma/PSD + VberAI Studio 結構化匯出	多屏、多引擎、活動皮	替代 inset 標註與驗收
引擎內臨時 Sliced	緊急修一屏	長期不更新設計源

推薦組合：設計標註 inset → 結構化匯出 Prefab → Unity Editor Sliced 兩檔寬度驗收 → MCP 綁邏輯。邏輯與 Raycast 見 進引擎 + MCP 清單。

---

常見問題

圓角面板能否九宮格？
可以，但 inset 必須落在「直邊拉伸區」，圓角落在不拉伸的角塊內。圓角半徑隨面板變大而變形 → 未通過，需改稿或固定最大寬高。

陰影算不算進 border？
由產品規格定：若陰影不參與拉伸，應拆層或把 inset 標在「不含外發光」的實底矩形上。

Tiled 和 Sliced 怎麼選？
Sliced 適合有固定角與邊的面板；中間為重複紋理時用 Tiled（或 Sliced 中間區 + 可平鋪素材）。Specs 寫清，避免程式猜。

Godot / Cocos 還要單獨切一套嗎？
inset 語意一套；匯出目標換 畫布多引擎匯出 即可，各引擎填 patch margin / cap insets 對照上表驗收。

VberAI Studio 會替程式填 Border 嗎？
取決於匯出配置與素材；驗收仍以引擎內 Sliced/StyleBox 為準。稿面無 inset 時，程式必須在 Editor 填並與設計對齊後寫進規格。

VberAI Studio 與 Google AI Studio 是一回事嗎？
不是。見 對比文。