Unity NGUI插件

2024-01-06 21:32:22

前言：关于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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

码农公寓