9宫切图(Unity 版)
手动切或文件夹批量切,输出 Sprite 并写入 Border,拉伸不变形
一张图,适配任意尺寸
九宫切图(Nine Slice)把一张图切成 3×3 九个区域:四个角固定不变, 四条边只沿一个方向拉伸,中心区域两个方向延展。这样按钮、面板、气泡 在任意尺寸下都不会变形,圆角与边框始终保持像素清晰。 切九宫有两条路:想自己拿主意就手动拖分割线,想省事就把文件夹整个交给它批量处理。
- 手动九宫操作,分割线位置完全由你决定
- 文件夹一键批处理,自动识别可拉伸区域
- 自动识别修改9宫拉伸范围
- 适用于按钮、面板、气泡等常见控件
九宫是怎么分的
四条分割线确定四个角的保护范围,其余区域参与拉伸;手动切与批量切用的是同一套规则。
四个角色,各司其职
把图片分成九个格子后,每个格子承担不同的缩放行为:
- 四角 保持原样,不参与拉伸
- 四边 只沿一个方向拉伸(横向或纵向)
- 中心 两个方向同时延展,填充剩余空间
两种用法,都归你掌控
单张素材精修用手动九宫,成套 UI 资源用文件夹一键批处理,边角规则完全一致。
主动操作,想怎么切就怎么切
进入九宫编辑后,四条分割线由你直接拖动摆放:哪一块保持固定、哪一块参与拉伸、 边距留多宽,全部按当前素材的实际形状来定,不受自动识别结果的约束。 调整过程中可即时查看拉伸效果,不满意随时回拖重来。
- 拖拽分割线,自由定义四个角的保护范围
- 边调边看拉伸预览,不必导出后再反复验证
- 分割位置直接写入 Sprite 的 Border 参数
批量自动识别,整套资源一次切完
指定一个文件夹,逐张扫描其中的图片,自动分析透明边界与像素分布推导出可拉伸区域, 一次性输出 Sprite 并写入 Border。成套的按钮、面板、气泡不需要一张张点开处理, 参数与命名保持一致。
- 文件夹级批量处理,扫描到的图片全部覆盖
- 自动识别可拉伸区域,不必手动数像素、画参考线
- 批量导出保持像素对齐,可重复生成、随时替换
适用场景
凡是「尺寸会变、但边角不能变形」的控件都适合。
按钮 / 标签
文字变长、按钮变宽时,圆角与描边保持原样,只把中间区域拉长。
面板 / 弹窗
对话框、设置面板随内容撑高变宽,四角装饰与边框不会被拉糊。
气泡 / 提示
带尖角或尾巴的气泡,尾部保留原始形状,主体按内容自适应。
进度条 / 血条
背景条与填充条按数值长度伸缩,两端装饰完整保留。
使用建议
这几点注意一下,切图效果会更稳。
边框要包含完整装饰
圆角、描边、投影、外发光都属于固定区域,Border 取值要把它们完整包含进去,否则拉伸时会被切断。
中心区域尽量可平铺
中心区域会被两个方向延展,纯色、渐变或规则纹理效果最好;有具象图案时容易被拉长。
保持像素对齐
导出时使用整数倍缩放,避免半像素导致边缘发虚;UI 素材建议按项目基准分辨率出图。
别把整张图当九宫
需要整体缩放、不能局部拉伸的插画与图标,请直接按普通 Sprite 使用。
和 PSD 生成 Prefab 一起用
设计稿一次性完成切图与 Prefab 生成。
一条工作流走完
读取 PSD 时对标记为九宫的图层自动切图,生成 Sprite 并写入 Border,再随 Prefab 一起输出;设计稿改动后重新执行即可,不需要分别处理素材。
让 UI 素材一次切好
手动精修或文件夹批量处理都行,输出 Sprite 并写入 Border 参数;订阅期内享受免费升级与开发者技术支持。