切图、图集、九宫格：从设计稿到可复用资源

依据：官方文档与本站教学拆解｜环境：Cocos Creator 3.8；浏览器原理演示｜真机：未验证

切图是在设计中决定哪些部分独立成为资源；图集把多张小图放进一张纹理；九宫格决定一张面板怎样伸缩。三个词经常同时出现，却解决不同问题。一个按钮背景可以放在图集中，同时以九宫格方式绘制。

图集怎样找到原来的图片

图集中保存各图片的矩形位置，运行时通过纹理坐标，也就是 UV，取出所需区域。它让多个对象有机会共用纹理，但不会自动把所有绘制合成一次：材质、混合方式、遮罩、层级顺序和引擎批次规则仍然可能拆开绘制。

打包图集要保留适当边距或边缘扩展。线性滤波会读取附近像素，紧贴其他图标的边界可能采到邻图颜色。裁剪透明区域后还应保存原始尺寸与偏移，否则动画帧中心可能抖动。

用上下左右四条切线把图片分成九块。四角保持尺寸，上下边主要横向伸展，左右边主要纵向伸展，中间填满剩余区域。这样扩大弹窗时，圆角和描边宽度能够保持。它并不保证内部装饰自然：穿过中部的大花纹仍可能被拉长。

最小尺寸通常受固定边距约束。如果目标宽度小于左右边距之和，剩余区域无法按原规则布局，应在业务或组件层限制最小尺寸。切线还应避开必须完整保留的装饰，或把装饰拆成独立节点。

一张巨大的总图集可能在打开背包时连同大量无关图标一起进入内存。即使能减少部分纹理切换，也可能增加首屏加载和驻留。按常见使用时机分组，例如常驻 UI、背包、活动页，再检查同时使用的资源和实际批次。图集不是越大越好。

在 Cocos 里为资源设置正确的 SpriteFrame 和九宫格边距，Sprite 选择对应的 SLICED 类型；尺寸由 UITransform 等布局参与决定。图集的资源设置与运行时动态合图属于不同机制，采用前要阅读当前版本限制。先在九宫格实验台观察拉伸，再看结算弹窗案例。

展开：九宫格中间区域的基础尺寸关系

const centerWidth = Math.max(0, width - left - right);
const centerHeight = Math.max(0, height - top - bottom);
// 业务层还需明确：目标尺寸小于固定边距总和时如何处理。

Cocos 3.8 Sprite 组件、自动图集资源、动态合图说明组件、资源与运行时机制。本站图解为教学简化，最终合批结果应通过引擎统计验证。