MMORPG开发笔记（二）–UGUI之Sprite Editer

UI界面铺设之Sprite Editor

本篇用于记录下在unity new ui即UGUI九宫格纹理拉伸的使用，不论是游戏中的UI，还是应用中的UI，纹理九宫格拉伸都是必不可少的，因为采用这种拉伸方式，可以最大化的节省纹理资源所占用的内存，任意缩放图片还能保持一个不错的效果，因此在手游和app中用的较多。如下图所示：

1.原理

把纹理用4条线分割成9部分（如上图），通过观察可以发现，5是最规则的形状（矩形），其次是2,6,8,4（矩形，但是和四个角有公共边），最后是四个角1,3,9,7（圆角矩形）

规则的图形在拉伸之后的效果是比较好的，如果是不规则的图形，则会在拉伸之后变形！

根据上图做拉伸制定规则：

（1）保证四个角1,3,7,9不做任何拉伸
（2）与四个角有公共边的四个矩形2,4,6,8做单向拉伸，即保证与四个角的公共边不拉伸，例如2,8只进行横向拉伸，4,6只进行纵向拉伸
（3）中间部分5做双向拉伸，即横向，纵向同事拉伸

下面就讲讲Unity3d中使用ugui中如何使用九宫格：

选中纹理资源，点击下图中红框按钮，打开sprite编辑器：

设置sprite的边界，其中蓝色的为可用图片边界，绿色线则为九宫格的裁剪线，初始时，蓝色和绿色重叠，鼠标放在下图中绿色节点上即可编辑九宫格裁剪线：

这里呢我们以进度条背景图为例，我将九宫格中心锁定在进度条的右变条状部分，这样，当我们将它作为slider的背景填充时，根据slider的长度和宽度对条状部分进行拉伸，最终得到进度条。

设置好图片后，就可以把sprite赋值给ui，看效果去了，并将图片类型选择为sliced，还要记得勾上Fill Center，结果如下图所示：

至此，unity3d中UGUI的九宫格基础用法已经讲解完毕，我们下篇再见。