Unity3D开发(四):NGUI纹理九宫格拉伸 PS UI设计 九宫格拉伸

不论是游戏中的UI,还是应用中的UI,纹理九宫格拉伸都是必不可少的,因为采用这种拉伸方式,可以最大化的节省纹理资源,还能保证良好的表现效果!

 

1.原理

把纹理用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做双向拉伸,即横向,纵向同事拉伸

2.NGUI中Sliced用法

(1)选中制作完成的Atlas文件,在其Inspector面板中设置四条切线的位置(像素为单位)

 

(2)使用Sliced类型的UISprite

 

 

 

3.实现原理

在UISprite中,对于不同类型有不同填充Shader定点的方法,参照UISprite.OnFill()

 

  1. public override void OnFill (BetterList<Vector3> verts, BetterList<Vector2> uvs, BetterList<Color32> cols)
  2.     {
  3.         switch (type)
  4.         {
  5.             case Type.Simple:
  6.             SimpleFill(verts, uvs, cols);
  7.             break;
  8.             case Type.Sliced:
  9.             SlicedFill(verts, uvs, cols);
  10.             break;
  11.             case Type.Filled:
  12.             FilledFill(verts, uvs, cols);
  13.             break;
  14.             case Type.Tiled:
  15.             TiledFill(verts, uvs, cols);
  16.             break;
  17.         }
  18.     }

基本的Sprite是一个矩形纹理,即两个三角形,4个顶点,参照

 

 

  1. protected void SimpleFill (BetterList<Vector3> verts, BetterList<Vector2> uvs, BetterList<Color32> cols)

 

 

九宫格拉伸的Sprite相当于9个矩形纹理拼合而成,并且有部分矩形做拉伸操作,根据Shader渲染三角形,需要传4×9=36个顶点,参照

 

  1. protected void SlicedFill (BetterList<Vector3> verts, BetterList<Vector2> uvs, BetterList<Color32> cols)


发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

(Spamcheck Enabled)

最新评论