UGUI引导遮罩实现

最新推荐文章于 2024-05-15 11:16:30 发布

原创

最新推荐文章于 2024-05-15 11:16:30 发布 · 1.1k 阅读

收录于

本文介绍如何在Unity的UGUI中实现一个带有引导功能的遮罩效果。通过创建一个全屏灰色Image作为遮罩，并利用OnPopulateMesh函数重写顶点数据，动态组织网格以形成目标控件的镂空部分。点击事件根据位置判断是否穿透到目标控件，实现交互控制。

思路:
1.显示上用一个全屏的灰色Image 作为遮罩体, 获取目标控件的位置和大小数据后,重新组织遮罩的网格数据把目标控件的部分剔除,形成镂空;
2.点击事件根据点击位置判断是否在目标控件的矩形中,如果在矩形中事件穿透下去传递给目标的控件 , 如果不在拦截该点击事件,让事件无效;

先来实现1的效果:
unity的UGUI 控件都是继承至UnityEngine.UI.Graphic这个基类,它有一个OnPopulateMesh(VertexHelper vh)函数
这个函数会在UI元素生成顶点数据时调用,vh里存的就是该控件的顶点数据信息,如果我们重写该函数,把我们自定的顶点数据放进去,控件就会按照修改后的顶点数据渲染出控件的样子.
所以现在关键是如何自定遮罩镂空的顶点数据,这里需要一点点图形学的知识.关于顶点,绘制三角形,绘制矩形看下这个链接:xxx
画张图来描述:

最后上代码:

public class GuideMask : MaskableGraphic, ICanvasRaycastFilter
{
    [Header("目标控件")]
    public RectTransform TargetItem;
    public bool IsRaycast = true;
    private Vector2 targetMin;
    private Vector2 targetMax;
    //事件筛选
    bool ICanvasRaycastFilter.IsRaycastLocationValid(Vector2 screenPos, Camera ev