制作可任意拉伸的 UI 图像

Cocos Creator 的 UI 系统核心的设计原则就是能够自动适应各种不同的设备屏幕尺寸，因此我们在制作 UI 时需要正确设置每个控件元素的尺寸（size），并且让每个控件元素的尺寸能够根据设备屏幕的尺寸进行自动的拉伸适配。为了实现这一点，就需要使用九宫格格式的图像来渲染这些元素。这样即使使用很小的原始图片也能生成覆盖整个屏幕的背景图像，一方面节约游戏包体空间，另一方面能够灵活适配不同的排版需要。 size 属性后的显示效果。

编辑图像资源的九宫格切分

Sprite 编辑器来编辑图像资源：

• 资源管理器中选中图像资源，然后点击属性检查器最下面的编辑按钮。如果您的窗口高度不够，可能需要向下滚动属性检查器才能看到下面的按钮。
• 场景编辑器中选中想要九宫格化的图像节点，然后在属性检查器的 Sprite 组件里，找到并按下Sprite Frame属性右侧的编辑按钮。 Sprite 编辑器以后，可以看到图像周围有一圈绿色的线条，表示当前九宫格分割线的位置。将鼠标移动到分割线上，可以看到光标形状改变了，这时候就可以按下并拖拽鼠标来更改分割线的位置。 size）变化时会应用不同的缩放策略，见下图： Yannick Loriot的博客）： Sprite 编辑器右上角的绿色对勾来保存对资源的修改。

  设置 Sprite 组件使用 Sliced 模式

  size来制作可任意指定尺寸的 UI 元素了。

1. Type 属性设为 Sliced。
2. 矩形变换工具拖拽控制点使节点的 size 属性变大。您也可以直接在 属性检查器 中输入数值来修改 size 属性。如果图像资源是用九宫格的形式生产的，那么不管 Sprite 如何放大，都不会产生模糊或变形。

   注意事项

   矩形变换工具或直接修改 Sliced Sprite 的size属性时，注意size属性值不能为负数，否则不能以 Sliced 模式正常显示。