UGUI九宫格纹理拉伸的使用

 

本篇文章我们来学习下在unity new ui即UGUI九宫格纹理拉伸的使用,不论是游戏中的UI,还是应用中的UI,纹理九宫格拉伸都是必不可少的,因为采用这种拉伸方式,可以最大化的节省纹理资源,任意缩放图片还能保持一个不错的效果,因此在手游和app中用的较多。我们先学习下九宫格拉伸的原理先,如下图所示!

1.原理

UGUI九宫格

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

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

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

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

UGUI九宫格

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

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

UGUI九宫格

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

UGUI九宫格

设置好图片后,就可以把sprite赋值给ui,看效果去了,并将图片类型选择为sliced,还要记得勾上Fill Center,你可以试试不勾选看看效果:

UGUI九宫格

UGUI九宫格

然后你就能看到的效果:

UGUI九宫格

好吧,绿色线条的作用知道了,现在就看看蓝色线条的作用吧。。

UGUI九宫格

看到了吧,蓝色线条是对图片做裁剪的,当然一张图片上可以有多个裁剪图,每个裁剪图可以有一个九宫格。但是sprite就需要改成multiple咯。

UGUI九宫格

 

最终,本文想说的其实是我自己遇到的一个坑。希望后来的人能轻松解决:

其实unity3d的九宫格一直都知道怎么用,但是突然我发现我用不了,操作步骤也没错,弄了一下午头都大了。结果我靠搜索技术,在这篇博客上发现了一点儿蛛丝马迹然后解决了问题:

修改下面红色地方的参数,默认是100

UGUI九宫格

UGUI九宫格

UGUI九宫格

各位应该是看到区别了,当canvas或者是图片的每单位多少像素修改后,图片大小显示大小其实是不一样的。如果图片设置为10,canvas设置为100,那就相当于九宫格中非中心的图片区域大小缩放了10倍,而我由于测试过canvas参数,将其改为1,后来见没效果,没有改为100,结果可想而知,我所有九宫格在sliced模式下,只能看到九宫格中心区域。如果不仔细看,边缘区域根本不可见。

至此,我的问题解决了,相信大家也会使用unity3d中UGUI的九宫格了。

好了本篇unity3d教程到此结束,下篇我们再会!