游戏 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 是一回事吗？
不是。见 对比文。