• NGUI系列教程一


     

    NGUI是Unity的一个插件,使用它来制作你的游戏UI必定将事半功倍。为什么这么说呢?首先我们说说GUI与NGUI的区别,GUI是Unity自带的绘制界面工具,它的成像原理是基于表层的,所以执行效率非常的低,并且没有提供复杂的UI的接口,就算开发者硬着头皮写上去只能让UI的执行效率更低。然而NGUI 完全依赖与3D就好比在游戏世界中的摄像机直直的照射在一个平面中,在平面之上再去绘制自己的UI,所以它的执行效率会非常高。

      NGUI是一款收费的插件,在Asset Store中大家可以看到价格。在未购买正版的前提下我们可以通过两种方法来使用NGUI,第一种:使用官方提供的免费版本,但是这个版本中有NGUI的水印,无法正式发布不过完全可以作为学习使用。第二种:使用别人购买过的正版插件,在互联网中有朋友放出NGUI的插件。

    这里提供免费版本NGUI的下载地址,是2.6.4版本的NGUI

    http://pan.baidu.com/s/1f30Sc

    首先导入NGUI package。在unity工程窗口中点击右键选择 Import package -> custom package,选择你下载的NGUI插件,导入完成后效果如图:
     
    1.选择菜单NGUI -> Open the UI Wizard,弹出创建UI对话框。点击Layer窗口右边对应的按钮,弹出层选择对话框,在这里我们选择AddLayer
     
    新建Layer窗口中,我们新建一个叫NGUI的Layer,添加Layer之后
    再次回到UITool窗口,更改界面Layer为NGUI
     
     
    在下面的Camera选项中有None,Simple2D,Advanced3d选项,分别用于创建不带camera的界面(这里如果已经有一个UI界面,我们只是想添加一个新的界面,可以选择这个),简单的2D界面(此选项没有Z轴效果),高级3D界面(此选项下的界面有Z轴效果,并且可以3D旋转,以此选项创建的UI有自适应分辨率的功能)。
     
    在这里我们先创建一个Simple2D界面,选择好之后点击下面的Create Your UI按钮,创建一个UI。程序会自动为我们创建一个有节点层级关系的一些物体,如图,分别是UI根节点,,一个相机节点,一个锚点节点,和一个用于盛放按 钮等UI的Panel节点我们现在可以不用管这些节点的功能和作用,只要记住Panel节点即可,以后我们创建的所有按钮等UI都放在Panel层级下。

    UI ROOT(2D):看着名字我想搞程序的都应该知道是啥意思吧?界面根节点、入口点。

    Camera :NGUI生成的摄像机对象,它将直直的照射在锚点面板。

    Anchor:界面的锚点,影响UI的显示位置。它下面会挂着面板。

    Panel:面板,摄像机照射着它,它下面会挂一些控件,比如标签、按钮、精灵、拖动条等等。

    创建UI元素,选择菜单NGUI -> Open the Widget Wizard,弹出创建UI元素对话框
     
    首先是Atlas窗口,Atlas就是一个大的图片,里面用于存放我们需要用到的各种图标。在后面我们将讲解怎么创建自己的Atlas,Font是我们创建UI时用到的字体,Template可以允许我们选择要创建的UI类型,包括Label,Spirit等等,如图
    我们可以使用NGUI自带的一些Atlas,如图是NGUI自带的一些Atlas,其中带有Font字样的是字体Atlas
     
    这里Atlas我选择Fantasy Atlas,Font选择Fantasy Atlas –Font Normal,在项目窗口中选择Fantasy Atlas拖到Atlas中,选择Fantasy Atlas –FontNormal,拖放到Font中,
     
    在Template中,我们选择 Spirit,Spirit选项让我们选择需要创建的图标,这里我们选择smooth,Pivot默认的center ,然后确保AddTo右边的选项是我们要添加到的Panel中,如果不是,我们可以在Inspector中点击选中panel,NGUI会自动为我们切 换。最后点击AddTo,NGUI会在Panel节点下创建一个名称为Sprite (Smooth)的spirit。属性窗口如图:
     
     
    1.      这里的atlas,Spirit,Pivot都是刚才创建的时候已经选择好的,如果不满意可以在这里修改。
    Depth可以控制我们的图标向前或者向后偏移,例如如果我们想要某个图标在另一个图标的上方,我们可以把它的Depth设置更大。
    Correction主要用于修正因图标像素是奇数而出现的问题。
    Color Tint可以在图标颜色的基础上为图标着色,
    Clipboard是剪贴版的颜色,当我们选择一个Cilpboard颜色后,点击Paste可以将颜色粘贴到ColorTint的颜色上。
    Spirit Type表示要创建的Spirit平铺方式,包括Simple,Sliced,Tiled,Filled。如果图标较小,我们需要平铺很大,但是又不想看出重复,可以选择sliced。

    这里我们选择sliced,Fillcenter选择默认。然后修改Spirit的缩放值。我们可以选择不同的SlicedType查看不同选项的效果。如图所示:

     
    其中前三种选项大致一样,只有第四种Filled选项下又包括Fill Dir(填充方向),FillAmount(填充量),Invert Fill(反转填充)三个选项,这三个主要用于修改填充为360旋转填充,水平,垂直填充等,大家可以自己试验一下效果。
     
     声明: 本文由( zqcyou )原创编译,转载请保留链接: NGUI系列教程一
  • 相关阅读:
    函数式编程
    JSONP
    用javascript实现base64编码器
    图片Ping
    CORS
    深入理解ajax系列第五篇——进度事件
    文件File
    深入理解ajax系列第四篇——FormData
    Blob
    深入理解ajax系列第三篇——响应解码
  • 原文地址:https://www.cnblogs.com/martianzone/p/3374601.html
Copyright © 2020-2023  润新知