Unity NGUI插件

 

前言：关于Unity中关于UI的插件，我们最开始学的是UGUI，是Unity自带的UI系统，而在Unity版本还没更新出UGUI之前，除了NGUI没有一个更好些的插件，所以人们不得不去选择NGUI去制作UI，但随着Unity做出了自己的UGUI系统之后，人们更多是使用Unity自带的UI系统，也就是UGUI，这里我也只是简单的认识一下，毕竟前面学习了UGUI,它们很相似，好了，废话不多说了

下载NGUI

在Unity官网的Asset Store中下载UGUI

看NGUI的例子

在学习一个插件之前，如果快速的了解这个插件呢？最简单的方式就是查看插件自带的一些例子，通过看这些例子，了解基本的一些实现的功能，以及脚本

Prefab Toolbar(预设体工具栏)

  • 首先新建一个场景
  • NGUI>>Open>>Prefab Toolbar
  • 会出现一个工具栏，通过它我们可以把UGUI已经做好的预设体（各种UI控件：按钮、复选框、滑条、下拉菜单、进度条、输入框等，跟UGUI中的基本一样）拖到场景中或是层级视图中
  • 我们选中一个Button拖到场景中，会发现UGUI会自动添加一个UI Root（相当于UGUI中的画布）和一个Camera
  • 我们看一下它们的检视面板
    • UI Root
      • Transform组件中多了P、R、S小按钮，它们是用来初始化Transform的
      • UI Root脚本
      • UI Panel脚本
      • 刚体组件
  • Camera
    • 这里的照相机主要不是用来拍摄的照相机，而是用来控制事件的照相机
    • Transform组件
    • Camera组件
    • UI Camera脚本（控制事件）
  • Button
    • Transform组件
    • UI Sprite脚本
    • UI Button脚本
    • 碰撞盒组件（这里需要注意一下，在NGUI中的这些控件如果要想发生事件，必须要有碰撞盒）
  • 在Prefab Toolbar中会有很多页，我们可以点开其他的页，可以往里面添加新的预设体，你可以往里面拖入游戏对象添加新的预设体，也可以点击Add添加已有的预设体
  • 当你添加完毕后，在Prefab Toolbar中会出现你添加的预设体，并且在你保存的路径下会多出个预设体，我这里保存在了Asset目录下，所以会在工程窗口看到刚刚添加的预设体

Widget Wizared（控件工具）

  • NGUI>>Open>>Widget Wizared
  • 会出现一个控件工具窗口，我们可以修改它里面的属性，值得注意的是：不同模板（控件类型）的属性是不同的。如图中所示，我们用的模板是精灵，那么这里面对应的属性就是精灵模板的属性，包括模板（也就是控件的类型）、精灵贴图、中心枢纽位置、添加该控件到哪个对象（也就是把该控件设为哪个对象的子物体），但是基本的属性不会发生变化：图集、字体样式
  • 添加一个精灵
    • 模板选为Spriie
    • 设置所有的属性
    • 点击Add To，添加到UI Root中
    • 添加完之后，场景中多了个精灵、层级视图中多个精灵对象、精灵对象身上挂载着UI Sprite脚本
  • 由此可见，每添加一个控件，控件身上都会有相应的脚本，来实现这个控件的相应功能，需要注意的是：这里的精灵身上没有通过脚本自动添加碰撞盒，那么它是不能触发事件的，而有些控件是自身就有碰撞盒的，比如说刚开始咱们创建的Button

创建新的图集

  • 首先把要做成图集的图片设为精灵

  • NGUI>>Open>>Atlas Maker


  • 弹出Atlas Maker窗口，点击New按钮


  • 点击完之后，Altas显示None


  • 选中要添加到新图集的精灵
  • 在Sprites窗口会显示选中的精灵
  • 点击Create

  • 会提示你保存目录，设置命名，点击保存


  • 完成效果


  • 点击View Sprites可以预览图集里面的精灵


  • 保存的目录会多出同名的材质、预设体、导入设置文件三个东西


这样，包含选中精灵的图集就诞生了

注意：在NGUI中，不能像在UGUI中直接拖入精灵，而是必须要先设置图集，再从图集中选择精灵

Anchor （锚点、锚框）

  • 创建一个场景
  • 点开Widget Tool>>Open the New UI Wizard
  • 创建一个UI
    • 点击Create Your UI
  • 场景中会多出个UI Root、Camera，层级视图中也会多出，Widget Tool窗口会多出属性
  • 添加一个精灵到UI Root中
  • 添加锚点
    • 选中UI Root
    • NGUI>>Create>>Anchor
  • 将刚刚创建的精灵作为Anchor的子物体
  • 选中Anchor，设置Anchor的位置为右上角
  • 刚刚是添加锚点，现在是添加锚框

    • 添加一个精灵

    • 选中精灵，将它的Anchors的Type：Unified


    • Target:精灵的参照物

    • Left：精灵的左边距离参照物左边的距离

    • Right：精灵的右边距离参照物右边的距离

    • Bottom：精灵的下边距离参照物下边的距离

    • Top：精灵的上边距离参照物上边的距离

、

  • 如果将Type：Advanced，则精灵每个边都有对应的参照物

UI Root脚本

  • Scaling Style:Flexible
  • Minimum Height:当像素小于此值时，不再进行缩放
  • Maximum Height:当像素大于此值时，不再进行缩放

  • Scaling Style:Constrained

  • Content Width:UI根据当前的宽度自动进行缩放

    • Fit：勾选则根据当前的宽度自动进行缩放

  • Content Height：UI根据当前的高度自动进行缩放

    • Fit：勾选则根据当前的高度自动进行缩放

  • Scaling Style:Constrained On Mobiles(跟Constrained类似，只不过是针对移动端的，用第二种就可以)

UI Panel脚本

  • Alpha：阿尔法（透明度）
  • Depth：渲染深度，深度越大越后被渲染，显示在照相机的最前面
先比较UI Panel的深度再去比较UI控件的深度
UI Panel相当于是一个容器，所有的UI控件都在 UI Panel中才能被显示
  • Clipping：裁剪方式
    • None：无
    • Texture Mask：纹理遮罩裁剪
    • Soft Clip：片段裁剪
    • Constrain But Dont Clip:像素裁剪但不片段裁剪、

Camera脚本

  • Event Type：
    • 3D World:根据三维世界坐标触发事件
    • 3D UI：根据三维UI Root上的像素坐标触发事件
    • 2D World：根据二维世界坐标触发事件
    • 2D UI：根据二维UI Root上的像素坐标触发事件
  • Event Mask：能够触发事件的层

  • Debug：在运行的时，会在Game视图的左上角显示一些信息，当鼠标触发事件的时候，值会发生相应的改变


  • Event Sources：触发事件的来源
    • Mouse：鼠标
    • Touch：触屏
    • Keyboard：键盘
    • Controller：遥控杆
  • Thresholds:微调
    • Mouse Drag：当鼠标距离拖动对象某个像素的时候可以拖动
    • Mouse Click：当鼠标距离点击对象某个像素的时候可以点击
    • Touch Drag：当触屏距离拖动对象某个像素的时候可以拖动
    • Touch Tap：当触屏距离按击对象某个像素的时候可以按击
  • Axes and Keys:轴和键
    • Navigate X:X方向增量自定义名字
    • Navigate Y:Y 方向增量自定义名字
      -Scroll:鼠标滑轮自定义名字

Panel Tool（面板工具）

  • NGUI>>Open>>Panel Tool
  • 复选框：勾选则显示该Panel
  • DP:渲染深度
  • Panel's Name:Panel名字
  • Layer：所在的层
  • WG：控件个数
  • DC:DrawCall（渲染调用）
  • Tris：三角形个数（一个正方形是由两个三角形组成）
  • Stc：勾选则为静态

Draw Call Tool（渲染调用工具）

  • NGUI>>Open>>Draw Call Tool
  • Draw Call Filter:渲染调用文件
    • All Panels：所有Panel
      • 下面会显示所有Panel（当前的两个面板）的Draw Call，会根据面板个数和使用图集的不同而分成不同的组，如下图所示，1组和2组是根据不同面板而划分的；而2组和3组是根据使用不同的图集而划分的
      • Material：所用的材质图集
      • Widgets：控件个数
      • Triangles：三角形个数
  • Selected Panel：选择Panel

    • 显示选中的Panel的Draw Call


触发事件方法一：在编辑器中使用NGUI触发事件

-功能：点击小书按钮，精灵移动到UI Root中间位置；点击叉号按钮，返回起始位置

  • 搭建场景：两个NGUI按钮、一个NGUI精灵
  • 添加位移动画：
    • 选中精灵，NGUI>>Tween>>Position

  • 在精灵身上会多个Tween Position脚本


    • From：动画播放起始位置
    • To：动画播放终点位置
    • Tweener：动画播放器
      • Play Style：
        • Once：一次
        • Loop：循环
        • Ping Pong：乒乓（在起始位置和终点位置之间来回播放）
      • Animation Curve:动画曲线
      • Duration：持续时间
      • Start Delay：开始的延迟
      • Tween Group：动画组
      • Ignore TimeScale：勾选则忽略时间缩放

  • 选中打开按钮，在UI Button脚本的On Click面板中：

    • Notify:将刚刚添加了动画的对象拖到这

    • Method：TweenPosition/PlayForward（向前播放）


  • 同理，选中关闭按钮，其他跟打开按钮一样，最后的Method换成TweenPosition/PlayReverse（向后播放）


  • Tween Position脚本取消勾选（使用）


触发事件方法二：通过代码使用NGUI触发事件

  • 如果你刚刚用了第一种方式触发事件，而现在用第二种方式触发事件，你需要把刚刚在两个按钮控件上的On Click中方法取消掉，点击Notify中的减号按钮取消


  • 创建BtnEvent脚本
    • 挂载对象：随意对象
    • 实例对象：
      • Btn Open：ButtonOpen
      • Btn Close：ButtonClose
      • BG：Sprite
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class BtnEvent : MonoBehaviour
{

    public UIButton BtnOpen;
    public UIButton BtnClose;
    public UISprite BG;
    private TweenPosition tp;

    private void Awake()
    {
        tp = BG.GetComponent<TweenPosition>();
    }

    private void OnEnable()
    {
        BtnOpen.onClick.Add(new EventDelegate(ClickBtnOpen));
        BtnClose.onClick.Add(new EventDelegate(ClickBtnClose));
    }

    private void OnDisable()
    {
        BtnOpen.onClick.Remove(new EventDelegate(ClickBtnOpen));
        BtnClose.onClick.Remove(new EventDelegate(ClickBtnClose));
    }

    void ClickBtnOpen()
    {
        tp.PlayForward();
    }

    void ClickBtnClose()
    {
        tp.PlayReverse();
    }
}


作者：Joe_Game
链接：https://www.jianshu.com/p/98541f18999c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
posted @ 2019-11-30 21:58  YZFHKMS-X  阅读(1058)  评论(0)  编辑  收藏  举报