Unity 不规则图形点击

Posted 2021-11-07 时光不染

不规则图形点击范围

• • 问题
  • 不规则图形
  • 代码

这几天玩LOL手游，看到有个功能自定义按键位置。如下图，按键位置可以离得很近又不互相影响，划拉出来说一说常用的点击范围的问题。

问题

屏幕上我们看到的按钮是圆形⚪，实际在开发中图片是方形 □，如下图

如果我们直接用Button做点击，那么透明区域和非透明区域都会响应点击事件

这种情况我们点击上图红框区域，有可能视觉上点击到的是A的右上，而实际触发的是B技能。
这时候就需求只让事件响应圆形区域的点击

UI.Image.IsRaycastLocationValid 这个API返回是否在点击范围，返回true则响应点击事件，false不响应
Physics2D.OverlapPoint 返回指定点是否与Collider2D重合，也就是是否在Collider2d范围内

通过以上2个API可以得出以下方式。创建CircleImage代替Image。调整CircleCollider2D 使碰撞区域贴合圆形区域。

public class CircleImage : Image
{

    public override bool IsRaycastLocationValid(Vector2 screenPoint, Camera eventCamera)
    {
        RectTransformUtility.ScreenPointToWorldPointInRectangle(rectTransform, screenPoint, eventCamera, out var point);
        
        return GetComponent<CircleCollider2D>().OverlapPoint(point);
    }
}

 

不规则图形

上文以圆形做示例，如果是下图的不规则图形呢

可以用PolygonCollider2D代替以上的CircleCollider2D

代码

附可直接使用的代码
CustomImageEditor 放在editor文件夹
CustomImage放正常代码文件夹
使用时可在右键UI直接创建CustomImage，然后编辑CustomImage的PolygonCollider2D组件即可

using UnityEditor;
using UnityEngine;
using UnityEngine.UI;
public class CustomImageEditor : Editor
{
    private const int UI_LAYER = 5;

    [MenuItem("GameObject/UI/CustomImage", priority = 0)]
    private static void AddImage()
    {

        Transform canvasTrans = GetCanvasTrans();

        Transform image = AddCustomImage();

        if (Selection.activeGameObject!= null && Selection.activeGameObject.layer == UI_LAYER)
        {
            image.SetParent(Selection.activeGameObject.transform);
        }
        else
        {
            image.SetParent(canvasTrans);
        }
       
        image.localPosition = Vector3.zero;
    }

    private static Transform GetCanvasTrans()
    {
        Canvas canvas = GameObject.FindObjectOfType<Canvas>();
        if (canvas == null)
        {
            GameObject canvasObj = new GameObject("Canvas");
            SetLayer(canvasObj);
            canvasObj.AddComponent<RectTransform>();
            canvasObj.AddComponent<Canvas>().renderMode = RenderMode.ScreenSpaceOverlay;
            canvasObj.AddComponent<CanvasScaler>();
            canvasObj.AddComponent<GraphicRaycaster>();
            return canvasObj.transform;
        }
        else
        {
            return canvas.transform;
        }
    }

    private static Transform AddCustomImage()
    {
        GameObject image = new GameObject("Image");
        SetLayer(image);
        image.AddComponent<RectTransform>();
        image.AddComponent<PolygonCollider2D>();
        image.AddComponent<CustomImage>();

        return image.transform;
    }

    private static void SetLayer(GameObject ui)
    {
        ui.layer = UI_LAYER;
    }
}

using UnityEngine;
using UnityEngine.UI;

public class CustomImage : Image
{
    private PolygonCollider2D _polygon;

    private PolygonCollider2D Polygon
    {
        get
        {
            if (_polygon == null)
            {
                _polygon = GetComponent<PolygonCollider2D>();
            }

            return _polygon;
        }
    }
    public override bool IsRaycastLocationValid(Vector2 screenPoint, Camera eventCamera)
    {
        RectTransformUtility.ScreenPointToWorldPointInRectangle(rectTransform, screenPoint, eventCamera, out var point);
        
        return Polygon.OverlapPoint(point);
    }
}