zoukankan      html  css  js  c++  java
  • [置顶] Unity3D开发(四):NGUI纹理九宫格拉伸

    不论是游戏中的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()

    public override void OnFill (BetterList<Vector3> verts, BetterList<Vector2> uvs, BetterList<Color32> cols)
    	{
    		switch (type)
    		{
    			case Type.Simple:
    			SimpleFill(verts, uvs, cols);
    			break;
    
    			case Type.Sliced:
    			SlicedFill(verts, uvs, cols);
    			break;
    
    			case Type.Filled:
    			FilledFill(verts, uvs, cols);
    			break;
    
    			case Type.Tiled:
    			TiledFill(verts, uvs, cols);
    			break;
    		}
    	}

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

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

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

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


  • 相关阅读:
    WAMP 2.2 配置与IIS共用单IP,多域名多网站配置方法
    [.NET MVC4 入门系列00]目录
    [.NET MVC4 入门系列04]Controller和View间交互原理
    [.NET MVC4 入门系列05]添加自定义查询页Search
    [.NET MVC4 入门系列02]MVC Movie 为项目添加Model
    [.NET MVC4 入门系列07] 在Model模型模块中添加验证
    [.NET MVC4 入门系列03]使用Controller访问Model中数据
    DateTime 类常用技巧
    Access 注意地方
    互联网公司老板的十大谎言,别对号入座
  • 原文地址:https://www.cnblogs.com/phisy/p/3363696.html
Copyright © 2011-2022 走看看