Question 1

怎样给 Unity、Godot、Cocos 或 Unreal 做九宫格，不用 Photoshop？

Accepted Answer

本九宫格工具（https://gameimagekit.com/tool/nine-patch）在浏览器里编辑拉伸区，导出 Unity Sliced .meta / Image prefab、Godot StyleBoxTexture、Cocos 九宫格、Unreal UMG JSON、CSS border-image 和 Android .9.png，文件不离开设备。

Question 2

什么是九宫格（9-patch / 9-slice）拉伸？

Accepted Answer

把一张图按横竖各两条线切成 3×3 共 9 块：四个角保持原样不缩放，上下边只做横向拉伸，左右边只做纵向拉伸，中心块横纵双向拉伸。这样把一个小小的边框 / 按钮背景放大到任意尺寸时，圆角、描边、阴影都不会被拉糊，是 UI 切图的核心技术。

Question 3

拉伸区和内容内边距有什么区别？

Accepted Answer

拉伸区（stretch）决定放大时哪些像素被拉伸；内容内边距（padding）决定文字 / 图标等内容应摆放在框内的安全区域，避免压到圆角或描边。二者可分别设置，标准 .9.png 用顶 / 左边框标记拉伸区，用底 / 右边框标记内容区。

Question 4

导出的 .9.png 能直接在 Android 里用吗？

Accepted Answer

可以。导出的图会在原图四周各加 1px，并用黑色像素在顶 / 左边标记拉伸区、在底 / 右边标记内容区，符合 Android NinePatch 规范。顶 / 左边可以有多段黑线（多段拉伸），预览和 .9.png 都会保留；Unity / Godot / Cocos / CSS 只支持单段 9-slice，导出时会把多段合并成外接矩形。

Question 5

怎么给 Unity / Godot / Cocos / 网页用？

Accepted Answer

引擎导出打的是「干净 PNG + sidecar」，不含 Android 1px 标记。Unity：PNG 与 .png.meta、uGUI Image prefab 同目录，预制体放到 Canvas 下，Image 已是 Sliced（或 Tiled），子节点 Content 按内容内边距缩进。Godot 4：StyleBoxTexture .tres、NinePatchRect .tscn 与 PNG .import（无损、无 mip）。Cocos：ZIP 内 creator3 与 creator2 目录各有一份 PNG + .png.meta，Sprite 选 Sliced。Unreal：打开 .unreal.json，UMG Image 设 Draw As = Box，把 Margin（UV 0–1）和 Slot Padding（像素）抄进画刷。网页：PNG 与 CSS 放一起，或复制 border-image。

Question 6

拉伸和平铺有什么区别？

Accepted Answer

拉伸会把中间区拉长，适合纯色或渐变填充的按钮、面板。平铺会按原像素重复中间区，适合带花纹、点阵、重复边的框。点过滤（最近邻）打开后，像素风拉伸也不会被插值发糊。

Question 7

图片会被上传到服务器吗？

Accepted Answer

不会。图片解析、拉伸预览、.9.png 与引擎元数据生成全部在你的浏览器本地完成，文件不会上传到任何服务器。