UGUI（三）【唐老狮】事件监听接口，事件触发器，一些重要功能实现

UGUI进阶

• UI事件监听接口
  • 解决问题
    • 提供一些进阶事件监听功能
  • 常用事件接口
    • IPointEnterHandler鼠标进入
    • IpointExitHandler鼠标离开
    • IpointDownHandler
    • IpointUpHandler
    • IpointClickHandler
    • IBeginDragHandler
    • IDragHandler
    • IEndDragHandler
  • 使用事件接口
    • 编写脚本类，继承接口，实现接口方法
    • 挂载到监听对象上
  • PointerEventData参数的关键内容
    • pointerId鼠标左右中键索引ID
    • position鼠标屏幕坐标系地址
    • pressPosition
    • delta指针移动增量
  • 官方笔记

  public class Lesson18 : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler, IPointerDownHandler, IPointerUpHandler, IDragHandler
  {
  public void OnDrag(PointerEventData eventData)
  {
      print(eventData.delta);
  }
  
  public void OnPointerDown(PointerEventData eventData)
  {
      print("鼠标（触碰）按下");
      print(eventData.pointerId);
  
      print(eventData.position);
  }
  
  public void OnPointerEnter(PointerEventData eventData)
  {
      //鼠标进入 在移动设备上 是不存在 因为不存在 进入的概念
      print("鼠标进入");
  }
  
  public void OnPointerExit(PointerEventData eventData)
  {
      //鼠标离开 在移动设备上 是不存在 因为不存在 进入的概念
      print("鼠标离开");
  }
  
  public void OnPointerUp(PointerEventData eventData)
  {
      print("鼠标（触碰）抬起");
  }
  
  // Start is called before the first frame update
  void Start()
  {
      #region 知识点一 事件接口是用来解决什么问题的
      //目前所有的控件都只提供了常用的事件监听列表
      //如果想做一些类似长按，双击，拖拽等功能是无法制作的
      //或者想让Image和Text，RawImage三大基础控件能够响应玩家输入也是无法制作的
  
      //而事件接口就是用来处理类似问题
      //让所有控件都能够添加更多的事件监听来处理对应的逻辑
      #endregion
  
      #region 知识点二 有哪些事件接口
  
      #region 常用事件接口
      //IPointerEnterHandler - OnPointerEnter - 当指针进入对象时调用 （鼠标进入）
      //IPointerExitHandler - OnPointerExit - 当指针退出对象时调用 （鼠标离开）
      //IPointerDownHandler - OnPointerDown - 在对象上按下指针时调用 （按下）
      //IPointerUpHandler - OnPointerUp - 松开指针时调用（在指针正在点击的游戏对象上调用）（抬起）
      //IPointerClickHandler - OnPointerClick - 在同一对象上按下再松开指针时调用 （点击）
  
      //IBeginDragHandler - OnBeginDrag - 即将开始拖动时在拖动对象上调用 （开始拖拽）
      //IDragHandler - OnDrag - 发生拖动时在拖动对象上调用 （拖拽中）
      //IEndDragHandler - OnEndDrag - 拖动完成时在拖动对象上调用 （结束拖拽）
      #endregion
  
      #region 不常用事件接口 了解即可
      //IInitializePotentialDragHandler - OnInitializePotentialDrag - 在找到拖动目标时调用，可用于初始化值
      //IDropHandler - OnDrop - 在拖动目标对象上调用
      //IScrollHandler - OnScroll - 当鼠标滚轮滚动时调用
      //IUpdateSelectedHandler - OnUpdateSelected - 每次勾选时在选定对象上调用
  
      //ISelectHandler - OnSelect - 当对象成为选定对象时调用
      //IDeselectHandler - OnDeselect - 取消选择选定对象时调用
  
      //导航相关
      //IMoveHandler - OnMove - 发生移动事件（上、下、左、右等）时调用
      //ISubmitHandler - OnSubmit - 按下 Submit 按钮时调用
      //ICancelHandler - OnCancel - 按下 Cancel 按钮时调用
      #endregion
  
      #endregion
  
      #region 知识点三 使用事件接口
      //1.继承MonoBehavior的脚本继承对应的事件接口，引用命名空间
      //2.实现接口中的内容
      //3.将该脚本挂载到想要监听自定义事件的UI控件上
      #endregion
  
      #region 知识点四 PointerEventData参数的关键内容
      //父类：BaseEventData
  
      //pointerId： 鼠标左右中键点击鼠标的ID 通过它可以判断右键点击
      //position：当前指针位置（屏幕坐标系）
      //pressPosition：按下的时候指针的位置
      //delta：指针移动增量
      //clickCount：连击次数
      //clickTime：点击时间
  
      //pressEventCamera：最后一个OnPointerPress按下事件关联的摄像机
      //enterEvetnCamera：最后一个OnPointerEnter进入事件关联的摄像机
      #endregion
  
      #region 总结
      //好处：
      //需要监听自定义事件的控件挂载继承实现了接口的脚本就可以监听到一些特殊事件
      //可以通过它实现一些长按，双击拖拽等功能
  
      //坏处：
      //不方便管理，需要自己写脚本继承接口挂载到对应控件上，比较麻烦
      #endregion
  }
  

}
```
- 练习
- 需求
- 长按UI按钮，0.2s后开始蓄能，松开按钮结束蓄能
- 蓄能满后HP+10，若没有松开按钮，继续蓄能
- 实现
- 使用两张图片实现进度条，控制前景图控制进度显示
- 给蓄能按钮挂载实现接口的脚本，脚本里自定义事件，监听事件去调用自定义事件
- 主面板脚本去控制进度条显示，编写回调函数，对按钮自定义事件关联回调函数，实现面板控制所有UI逻辑
- 按钮脚本实现接口，声明事件，实现方法里调用事件。

• EventTrigger事件触发器

  • 是什么
    • 集成所有事件接口的脚本，更方便的添加事件监听
  • 如何使用事件触发器
    • 添加事件监听，拖拽脚本关联
    • 代码添加
      • 声明事件触发器入口对象Entry
      • 定义事件的类型与监听回调函数，监听课添加多次回调函数
      • 加入到Triggers列表里

  void Start()
  {
      #region 知识点一 事件触发器是什么
      //事件触发器是EventTrigger组件
      //它是一个集成了上节课中学习的所有事件接口的脚本
      //它可以让我们更方便的为控件添加事件监听
      #endregion
  
      #region 知识点二 如何使用事件触发器
      //1.拖曳脚本进行关联
  
      //2.代码添加
  
      //申明一个希望监听的事件对象
      EventTrigger.Entry entry = new EventTrigger.Entry();
      //申明 事件的类型
      entry.eventID = EventTriggerType.Drag;
      //监听函数关联
      entry.callback.AddListener((data) =>
      {
          print("抬起");
      });
  
  
      //把申明好的 事件对象 加入到 EventTrigger当中
      et.triggers.Add(entry);
  
      entry = new EventTrigger.Entry();
      //申明 事件的类型
      entry.eventID = EventTriggerType.BeginDrag;
      //监听函数关联
      entry.callback.AddListener((data) =>
      {
          print("抬起");
      });
  
      et.triggers.Add(entry);
  
      entry = new EventTrigger.Entry();
      //申明 事件的类型
      entry.eventID = EventTriggerType.BeginDrag;
      //监听函数关联
      entry.callback.AddListener((data) =>
      {
          print("抬起");
      });
  
      et.triggers.Add(entry);
      #endregion
  
      #region 总结
      //EventTrigger可以让我们写更少的代码
      //可以在面板类中处理面板控件的事件逻辑，更加的面向对象，便于管理
      #endregion
  }
  
  public void TestPointerEnter( BaseEventData data )
  {
      PointerEventData eventData = data as PointerEventData;
  
      print("鼠标进入 " + eventData.position);
  }
  

  • 练习
    • 需求
      • 制作UGUI摇杆控制场景上的对象移动
    • 实现
      • 制作摇杆，大圆套小圆，小圆添加事件触发器
      • 主面板脚本：
        • 实现摇杆随拖动而动，拖动事件
        • 实现摇杆归位，拖动结束事件
        • 实现摇杆控制玩家，调用玩家changeDir函数，传递摇杆移动方向参数
      • 玩家脚本：
        • 实现移动，转向：move函数
          • 设置速度，translate
          • 设置转向速度，四元数rotation
        • 实现受摇杆控制，定义一个changeDir函数供主面板调用

• 屏幕坐标转UI相对坐标

  • RectTransformUtility类
    • 属于RectTransform辅助类
    • 主要负责坐标转换
  • 屏幕坐标转换UI相对坐标静态方法
    • RectTransformUtility.ScreenPointToLocalPointInReactangle()
    • (相对的父物体，待转换坐标，摄像机，输出坐标参数)

  #region 知识点二 将屏幕坐标转换为UI本地坐标系下的点
      //方法：
      //RectTransformUtility.ScreenPointToLocalPointInRectangle
      ////参数一：相对父对象
      ////参数二：屏幕点
      ////参数三：摄像机
      ////参数四：最终得到的点
      ////一般配合拖拽事件使用
      Vector2 nowPos;
      RectTransformUtility.ScreenPointToLocalPointInRectangle(
          parent,
          eventData.position,
          eventData.enterEventCamera,
          out nowPos );
  
      this.transform.localPosition = nowPos;
  
      //this.transform.position += new Vector3(eventData.delta.x, eventData.delta.y, 0);
      #endregion
  

  • 练习
    • 需求
      • 使用新学的坐标转换，替代上个练习的摇杆移动机制
    • 实现
      • 将计算位移的代换替换成坐标转换

• Mask遮罩

  • 让图片只显示一部分
  • 如何使用
    • 父物体上添加mask组件
    • 子物体只显示与父物体重叠的部分
  • 参数
    • 子物体上maskable
    • 父物体show mask Graphic显示父物体
  • 练习
    • 需求
      • 制作只显示圆形的头像
    • 实现
      • 使用圆形遮罩，显示图片作为其子物体

• 显示在UI之前

  • 模型显示在UI之前
    • 摄像机模式，世界模式
      • 专用UI摄像机只渲染UI层级
      • UI上的3d物体也选择UI层级
    • 将3d物体实时渲染在图片上，使用那张图片
      • 类似小地图制作
      • 资源里创建render texture，摄像机设置target texture
      • 将render texture当作正常texture使用
  • 粒子特效显示在UI之前
    • 与3d物体的渲染逻辑类似
    • 可在粒子组件的renderer设置相关渲染层级参数，保证始终在前

• 异形按钮

  • 图片形状及其点击范围根据图形来定
  • 实现准确点击
    • 添加子对象，手动拼接按钮形状，alpha设为0
  • 通过代码改变图片的透明度响应阈值
    • 打开图片读写性开关
    • 通过代码改变响应阈值
      • img.alphaHitTestMinimumThreshold=0.1f;

• 自动布局组件

  • 基本概念
    • 布局元素：带有RectTransform的组件
    • 自动布局控制组件
  • 布局属性
    • 最小宽高
    • 偏好宽高
    • 灵活宽高
      • 相对同级成比例缩放
    • 添加LayoutElement组件，可修改
  • 水平垂直布局组件
    • contol child size是否控制缩放
    • use child scale是否考虑子对象缩放
    • child force expand是否强制拓展子对象充满可用空间
  • 网格布局组件grid layout group
    • Constraint行列约束
      • 固定行/列数
      • 灵活模式flexible
  • 内容大小适配器content size fitter
    • 根据内容自动调整rectTransform的大小
    • 主要用于scroll view中调整content大小
  • 宽高比适配器
    • 根据父物体调整rectTransform大小，锚点
    • 主要用于背景图的缩放

• Canvas Group

  • 整体控制面板淡入淡出，ui元素交互
  • 参数
    • 透明度
    • 整体交互性
    • 整体射线检测
    • 是否忽略父级canvas group作用