Cocos Creator3.8 项目实战（四）巧用九宫格图像拉伸

一、为什么要使用九宫格图像拉伸

相信做过前端的同学都知道，ui （图片）资源对包体大小和内存都有非常直接的影响。

• 通常ui 资源都是图片，也是最占资源量的资源类型，游戏中的ui 资源还是人机交互的最重要的部分，因此质量要求都非常高，通常都是使用rgb32位真彩色，这就导致资源量比较大。

• 通常ui资源在打包时，都会以图集的形式展现，在加载到内存的时候，是整块加载，如果ui 没优化好，则会增大内存的开销。

  
  

因此为了减少资源量，增强ui 资源的复用，解决图片被拉伸变形、模糊的问题， 通常使用九宫格ui 的方式来对资源进行优化。

如下图：

我们可以看到，图像周围有一圈绿色的线条，表示当前九宫格分割线的位置。

将鼠标移动到分割线上，可以看到光标形状改变了，这时候就可以按下并拖拽鼠标来更改分割线的位置。

我们分别拖动上下左右四条分割线，将图像切分成九宫格，九个区域在 Sprite 尺寸（size）变化时会应用不同的缩放策略。

二、九宫格图像拉伸使用步骤

（1）、设置 Sprite 组件使用 Sliced 模式

（2）、在资源管理器中，选择需要调整九宫格的 spriteFrame 资源

（3）、在属性检查器中，选择最下方的“Edit”编辑按钮

（4）、在九宫格编辑窗口，编辑上、下、左、右边框的位置

三、九宫格图像拉伸调整技巧

• 可以鼠标滚轮放大图片预览试图，便于精准调整边框位置。

• 如果不知道边框位置应该调整到多少合适，可以参考美术设计图的圆角角度进行调整。

  如图，我们需要以九宫格拉伸实现以下带圆角的背景框效果：

我们根据蓝湖上，设计图的圆角角度（此处为12） ，依次调整边框位置，即可达到预期效果：

编辑器调整：