UGUI 进阶

UI事件监听接口

目前所有的控件都只提供了常用的事件监听列表
如果想做一些类似长按，双击，拖拽等功能是无法制作的
或者想让Image和Text，RawImage三大基础控件能够响应玩家输入也是无法制作的

而事件接口就是用来处理类似问题
让所有控件都能够添加更多的事件监听来处理对应的逻辑

事件接口

常用的：

IPointerEnterHandler-OnPeterEnter 当指针进入对象时调用(鼠标进入)

IPointerExitHandler-OnPointerExit当指针退出对象时调用(鼠标离开)

IPointerDownHandler-OnPointerDown-在对象上按下指针时调用(按下)

IPointerUpHandler - OnPointerup - 松开指针时调用(在指针正在点击的游戏对象上调用)(抬起)

IPointerClickHandler -OnPointerclick-在同一对象上按下再松开指针时调用 (点击)

IBeginDragHandler-OnBeginDrag-即将开始拖动时在拖动对象上调用(开始拖拽)

IDragHandler-OnDrag-发生拖动时在拖动对象上调用(拖中)

IEndDragHandler-OnEndDrag-拖动完成时在拖动对象上调用(结束拖)

不常用：

InitializePotentialDragHandler - OnInitializePotentialDrag - 在找到拖动目标时调用，可用于初始化值

IDropHandler-OnDrop-在拖动目标对象上调用

IScrollHandler-OnScroll-当鼠标滚轮滚动时调用

IUpdateSelectedHandler -OnUpdateSelected-每次勾选时在选定对象上调用

ISelectHandler-Onselect-当对象成为选定对象时调用

IDeselectHandler-OnDeselect-取消选择选定对象时调用

导航相关
IMoveHandler-OnMove-发生移动事件(上、下、左、右等)时调用

ISubmitHandler-OnSubmit-按下 Submit 按钮时调用、

ICancelHandler-OnCancel-按下 Cancel 按钮时调用

使用

需要命名空间using UnityEngine.EventSystems;

继承需要的接口并实现

注意需要勾选挂载对象的 Raycast Target

using UnityEngine;
using UnityEngine.EventSystems;

//要继承，继承就得实现
public class Lesson18 : MonoBehaviour,IPointerEnterHandler,IPointerExitHandler,IPointerDownHandler,IPointerUpHandler,IPointerClickHandler
{
    public void OnPointerClick(PointerEventData eventData)
    {
        print("鼠标点击");
    }

    public void OnPointerDown(PointerEventData eventData)
    {
        print("鼠标按下");
    }

    public void OnPointerEnter(PointerEventData eventData)
    {
        //移动设备上不存在，因为只有点击、按下、抬起，没有进入的概念
        print("鼠标进入");
    }

    public void OnPointerExit(PointerEventData eventData)
    {
        //移动设备上不存在，因为只有点击、按下、抬起，没有离开的概念
        print("鼠标离开");
    }

    public void OnPointerUp(PointerEventData eventData)
    {
        print("鼠标抬起");
    }
}

PointerEventData参数的关键内容

父类: BaseEventData

pointerId: 鼠标左右中键点击鼠标的ID 通过它可以判断石键点击
position:当前指针位置(屏幕坐标系)
pressPosition:按下的时候指针的位置
delta:指针移动增量
clickCount:连击次数
clickTime:点击时间

pressEventCamera:最后一个OnPointerPress按下事件关联的摄像机

enterEvetnCamera:最后一个OnPointerEnter进入事件关联的摄像机

    public void OnDrag(PointerEventData eventData)
    {
       print(eventData.position);
       print(eventData.delta);
    }

总结

好处:
需要监听自定义事件的控件挂载继承实现了接口的脚本就可以监听到一些特殊事件

可以通过它实现一些长按，双击拖拽等功能
坏处:
不方便管理，需要自己写脚本继承接口挂载到对应控件上，比较麻烦

EventTrigger事件触发器

事件触发器是EventTrigger组件
它是一个集成了上节所有事件接口的脚本
它可以让我们更方便的为控件添加事件监听

使用

1.拖曳脚本进行关联
2.代码添加

要求参数是BaseEventData类型（是PointerEventData这些的父类，需要using UnityEngine.EventSystems）.

拖曳

   public void TestPointerEnter(BaseEventData baseEventData)
    {
        print("enter");
    }

    public void TestPointerEnter(BaseEventData data)
    {
        PointerEventData eventData = data as PointerEventData;
        print("enter " + eventData.position);
    }

代码添加

   //将控件的EventTrigger拖到这
    public EventTrigger et;
    // Start is called before the first frame update
    void Start()
    {
        //代码添加
        //声明一个希望监听的事件对象
        EventTrigger.Entry entry = new EventTrigger.Entry();
        //声明 事件的类型
        entry.eventID = EventTriggerType.PointerUp;
        //监听函数关联
        entry.callback.AddListener((data) =>
        {
            print("抬起");
        });
        //声明好的事件加入到EventTrigger中
        et.triggers.Add(entry);
    }

运行结果如图

面板上没有添加，但实际有，控制面板上显示

加入多个同种类型的eventID也不会报错，不想这样可以遍历et.triggers的对象，看有没有相同ID。

总结

EventTrigger可以让我们写更少的代码
可以在面板类中处理面板控件的事件逻辑，更加的面向对象，便于管理

屏幕坐标转UI相对坐标

RectTransformUtility类

RectTransformUtility公共类是RectTransform的]辅助类
主要用于进行一些坐标的转换等等操作
其中对于我们目前来说最重要的函数是 将屏幕空间上的点，转换成UI本地坐标下的点

将屏幕坐标转换UI本地坐标

方法:
RectTransformUtility.ScreenPointToLocalPointInRectangle
参数一:相对父对象
参数二:屏幕点
参数三:摄像机
参数四:最终得到的点
一般配合拖拽事件使用

public class Lesson20 : MonoBehaviour,IDragHandler
{
    public void OnDrag(PointerEventData eventData)
    {
        //参数一:相对父对象
        //参数二:屏幕点
        //参数三:摄像机
        //参数四:最终得到的点
        //该例子是遥感，类似王者荣耀的控制
         Vector2 nowPos;
        RectTransformUtility.ScreenPointToLocalPointInRectangle(
            //相对父对象的位置
            this.transform.parent as RectTransform,
            eventData.position,
            eventData.enterEventCamera,
            out nowPos
            );
        this.transform.localPosition = nowPos;
    }

}

Mask遮罩

在不改变图片的情况下让图片在游戏中只显示其中的一部分

Scroll View的Viewport中就包含遮罩Mask组件

使用

实现遮罩效果的关键组件时Mask组件
通过在父对象上添加Mask组件即可遮罩其子对象

注意:
1.想要被遮罩的Image需要勾选Maskable
2.只要父对象添加了Mask组件，那么所有的UI子对象（包括子对象的子对象）都会被遮罩
3.遮罩父对象图片的制作，不透明的地方显示，透明的地方被遮罩

如图创建一个父对象为红色，加上Mask脚本

再创建一个子对象，如图所示

可以发现子对象好像也是圆形的，

实际子对象是方形。

参考注意第三条，父对象透明的地方被遮罩了，子对象显示不了。

要想子对象被父对象遮罩，要勾选Maskable

对于安装了Mask脚本的父对象，取消勾选Show Mask Graphic，则看不到父对象（但仍有遮罩效果）

模型和粒子显示在UI之前

模型显示在UI之前

方法一：直接用摄像机渲染3D物体

canvas的渲染模式要不是覆盖模式
摄像机模式和世界(3D)模式都可以让模型显示在UI之前(z轴在UI元素之前即可)

注意:
1.摄像机模式时建议用专门的摄像机渲染UI相关
2.面板上的3D物体建议也用UI摄像机进行渲染

新建摄像机如图，并将Canvas的摄像机改为该摄像机

导入3D模型到UI前要记得把层级改为UI层，以及记得改成合适的缩放大小

如上图方块在图片前面，我们可以改变各物体z轴，来实现前后显示的效果，如下图

方法二将3D物体渲染在图片上，通过图片显示

该方法适用于一个模型的显示（因为渲染物体需要额外的摄像机）

专门使用一个摄像机渲染3D模型，将其渲染内容输出到RenderTexture上
类似小地图的制作方式
再将渲染的图显示在UI上

该方式 不管canvas的渲染模式是哪种都可以使用

新建camera如图（Model是自己新建的层级）

新建一个方块，设置为Model层，适当调整方块位置让camera能看到

然后新建Render Texture

更改camera的Target Texture，让画面输出到图Mode上面

接着可以在Canvas中新建Raw Image（因为Mode不是Spirit，而Raw Image可以放任何图片）

则Raw Image显示的内容就是我们新建camera看到的画面

改变方块，则Raw Image画面也会改变

如图是方块移动造成的画面，但Raw Image出现了画面残影一样的拖曳效果，这需要更改摄像机

更改为 Solid Color的渲染模式就好了

粒子特效显示在UI之前

粒子特效的显示和3D物体类似

注意点:
在摄像机模式下时
可以在粒子组件的Renderer相关参数中改变排序层让粒子特效始终显示在其之前不受z轴影响

一般方式如3D物体，这里讲修改层级

如图修改Order in Layer 如1，Canvas中也有Order in Layer，则只要粒子的Layer值大于Canvas，就会一直显示在UI前面。

异形按钮

图片形状不是传统矩形的按钮是异形按钮

如图将按钮改为了非传统矩形

发现点击Button周围透明区域仍然有效果（即点击范围仍为矩形）

但只希望点击图片显示范围

方法一通过添加子对象的形式

内存消耗不大

按钮之所以能够响应点击，主要是根据图片矩形范围进行判断的
它的范围判断是自下而上的，意思是如果有子对象图片，子对象图片的范围也会算为可点击范围
那么我们就可以用多个透明图拼凑不规则图形作为按钮子对象用于进行射线检测

如图创建了一个透明矩形图片，作为Button的子对象，则发现点击子对象的区域也会判定为点击按钮。

但如果创建一个删除Image组件，只有Rect Transform的Image，

则发现点击这范围没效果

也就是说，必须要有元素（如图，文字等）才可以响应点击。

我们可以利用这个性质来实现异形按钮的点击

可以将按钮作为Image的子对象，异形按钮可以把Button的文字删掉，并更改透明度让Button看不到，但记得更改如下图的Target Graphic为Image，这样才能显示父对象被点击的效果。

因此可以用Button的子对象拼出异形按钮的点击范围。

方法二通过代码改变图片的透明度响应阈值

消耗内存

第一步:修改图片参数开启Read/Write Enabled开关
第二步:通过代码修改图片的响应阈值

该参数含义:指定一个像素必须具有的最小alpha值，以便能够认为射线命中了图片
说人话:当像素点alpha值小于了该值就不会被射线检测了

如图开启Read/Write


    public Image img;
    // Start is called before the first frame update　
    void Start()
    {
        //alpha 0.1f以下不响应
        img.alphaHitTestMinimumThreshold = 0.1f;
    }