9宫切图(Unity 版)

手动切或文件夹批量切,输出 Sprite 并写入 Border,拉伸不变形

一张图,适配任意尺寸

九宫切图(Nine Slice)把一张图切成 3×3 九个区域:四个角固定不变, 四条边只沿一个方向拉伸,中心区域两个方向延展。这样按钮、面板、气泡 在任意尺寸下都不会变形,圆角与边框始终保持像素清晰。 切九宫有两条路:想自己拿主意就手动拖分割线,想省事就把文件夹整个交给它批量处理。

  • 手动九宫操作,分割线位置完全由你决定
  • 文件夹一键批处理,自动识别可拉伸区域
  • 自动识别修改9宫拉伸范围
  • 适用于按钮、面板、气泡等常见控件

九宫是怎么分的

四条分割线确定四个角的保护范围,其余区域参与拉伸;手动切与批量切用的是同一套规则。

四个角色,各司其职

把图片分成九个格子后,每个格子承担不同的缩放行为:

  • 四角 保持原样,不参与拉伸
  • 四边 只沿一个方向拉伸(横向或纵向)
  • 中心 两个方向同时延展,填充剩余空间

两种用法,都归你掌控

单张素材精修用手动九宫,成套 UI 资源用文件夹一键批处理,边角规则完全一致。

手动九宫操作

主动操作,想怎么切就怎么切

进入九宫编辑后,四条分割线由你直接拖动摆放:哪一块保持固定、哪一块参与拉伸、 边距留多宽,全部按当前素材的实际形状来定,不受自动识别结果的约束。 调整过程中可即时查看拉伸效果,不满意随时回拖重来。

  • 拖拽分割线,自由定义四个角的保护范围
  • 边调边看拉伸预览,不必导出后再反复验证
  • 分割位置直接写入 Sprite 的 Border 参数
选图→拖动分割线→写入 Border
一键文件夹批处理

批量自动识别,整套资源一次切完

指定一个文件夹,逐张扫描其中的图片,自动分析透明边界与像素分布推导出可拉伸区域, 一次性输出 Sprite 并写入 Border。成套的按钮、面板、气泡不需要一张张点开处理, 参数与命名保持一致。

  • 文件夹级批量处理,扫描到的图片全部覆盖
  • 自动识别可拉伸区域,不必手动数像素、画参考线
  • 批量导出保持像素对齐,可重复生成、随时替换
指定文件夹→自动识别→批量输出

适用场景

凡是「尺寸会变、但边角不能变形」的控件都适合。

✓

按钮 / 标签

文字变长、按钮变宽时,圆角与描边保持原样,只把中间区域拉长。

✓

面板 / 弹窗

对话框、设置面板随内容撑高变宽,四角装饰与边框不会被拉糊。

✓

气泡 / 提示

带尖角或尾巴的气泡,尾部保留原始形状,主体按内容自适应。

✓

进度条 / 血条

背景条与填充条按数值长度伸缩,两端装饰完整保留。

使用建议

这几点注意一下,切图效果会更稳。

!

边框要包含完整装饰

圆角、描边、投影、外发光都属于固定区域,Border 取值要把它们完整包含进去,否则拉伸时会被切断。

!

中心区域尽量可平铺

中心区域会被两个方向延展,纯色、渐变或规则纹理效果最好;有具象图案时容易被拉长。

!

保持像素对齐

导出时使用整数倍缩放,避免半像素导致边缘发虚;UI 素材建议按项目基准分辨率出图。

!

别把整张图当九宫

需要整体缩放、不能局部拉伸的插画与图标,请直接按普通 Sprite 使用。

和 PSD 生成 Prefab 一起用

设计稿一次性完成切图与 Prefab 生成。

→

一条工作流走完

读取 PSD 时对标记为九宫的图层自动切图,生成 Sprite 并写入 Border,再随 Prefab 一起输出;设计稿改动后重新执行即可,不需要分别处理素材。

让 UI 素材一次切好

手动精修或文件夹批量处理都行,输出 Sprite 并写入 Border 参数;订阅期内享受免费升级与开发者技术支持。