UGUI实现不规则区域点击响应
UGUI实现不规则区域点击响应
前言
大家吼啊！最近工作上事情特别多，没怎么打理博客。今天无意打开cnblog才想起该写点东西了。今天给大家讲一个Unity中不规则区域点击响应的实现方法，使用UGUI。
本脚本编写时基于Unity 5.3，使用其他版本的Unity可能需要做一些小修改。
本文参考了这篇文章：http://alienryderflex.com/polygon/
为什么要这么做
大家都知道在UGUI中，响应点击通常是依附在一张图片上的，而图片不管美术怎么给你切，导进Unity之后都是一个矩形，如果要做其他形状，最多只能旋转一下。
可能有旁友会说，什么时候会用到这个功能呢？
开心农场这个页游，相信大家都玩过。里面的田地是一块一块的菱形。
美术提供给我们的每一块地的切片，肯定并且只能是这样的（格子表示背景透明）。
这样就会有一个问题：在Unity里面把田地拼出来，要拼成一块挨着一块的效果，图片与图片之间必然会有重叠。
如果像这样直接挂载Button脚本运行，在点击的时候如果点到了图片相交的位置，Unity默认会根据图层先后来传递点击消息，就会造成想点A地结果点到了B地的错误效果。
于是这个时候就需要把图片的点击区域缩小一些，让它只包含田地本身的部分。
可能有旁友会说，这种需求太少见了啊，搞这么复杂干什么。
少你妹啊= =上上个月我做花千骨手游前端的门派药圃（类似开心农场）功能，特么不就遇到这种需求了吗！
好了不废话了，技多不压身，防范于未然嘛。
算法简介
一个思路是，点下去的坐标是已知的，可以把这个坐标转换为相对于图片本身的坐标，然后取出图片Texture上这个点对应像素的Alpha值。如果这个点是全透明的，那么不拦截点击事件，否则响应点击。
这样做并不是一个坏思路。要实现取颜色的功能，需要在Unity里面对Texture设置Read/Write Enabled，但这样会增大一倍内存占用。手机应用内存寸土寸金，这种方法应当放弃。
另一个思路就是今天我们要使用的思路，根据多边形的顶点进行计算。
不规则多边形点击响应可以用一种更规范的说法来表示：已知一任意多边形，和其n个顶点的坐标，求任意一点是否被包含在这个多边形内部。
对于这个问题，计算方法有很多种，这里给出一个Crossing Number算法。
这个算法的思路是，从该点发射一条射线，依次与多边形的每条边相交，如果射线与多边形的交点数为奇数，则这个点在多边形内，否则在多边形外（我姿势水平不够不知道怎么证明它，只知道确实是这样的）。这个方法适用于凸多边形和凹多边形。
如图所示，点A在多边形内部，点B在多边形外部。从点A和点B分别做一条直线，可以看出点A的单边交点数都是奇数，而点B为偶数。
那么怎么判断一个点是否和一根线段有交点呢？在已知线段的两个端点的坐标的情况下，可以从点发出一条射线，当射线与线段相交时，根据点斜式需要满足：
实现
首先编写判定的方法。使用Unity自带的Vector2结构用于存储坐标信息。这里是从这个点作出水平射线计算。
/// <summary>
/// 使用Crossing Number算法获取指定的点是否处于指定的多边形内
/// </summary>
private static bool _Contains(Vector2[] pVertexs, Vector2 pPoint)
{
var crossNumber = 0;
for (int i = 0, count = pVertexs.Length; i < count; i++)
{
var vec1 = pVertexs[i];
var vec2 = i == count - 1 // 如果当前已到最后一个顶点，则下一个顶点用第一个顶点的数据
? pVertexs[0]
: pVertexs[i + 1];
if (((vec1.y <= pPoint.y) && (vec2.y > pPoint.y))
|| ((vec1.y > pPoint.y) && (vec2.y <= pPoint.y)))
{
if (pPoint.x < vec1.x + (pPoint.y - vec1.y) / (vec2.y - vec1.y) * (vec2.x - vec1.x))
{
crossNumber += 1;
}
}
}
return (crossNumber & 1) == 1;
}
UGUI的Image类有一个IsRaycastLocationValid虚方法，重写后可以根据返回值决定该次点击消息是否会被该Image吞噬。于是可以考虑创建一个继承于Image的类。
而多边形区域的设定，我们希望在编辑器里能直观地编辑，而不是通过设置数字。为了方便，可以直接在Image上挂载一个自带的PolygonCollider2D脚本，这个脚本提供了编辑器编辑功能。
这个继承类还需要实现IPointerUpHandler、IPointerDownHandler和IPointerClickHandler三个接口，方便执行点击回调（可根据需求删减）。
[RequireComponent(typeof(PolygonCollider2D))]
public class PolygonClick : Image,
IPointerUpHandler,
IPointerDownHandler,
IPointerClickHandler
{
private PolygonClickedEvent m_OnPointerClick = new PolygonClickedEvent();
private PolygonClickedEvent m_OnPointerDown = new PolygonClickedEvent();
private PolygonClickedEvent m_OnPointerUp = new PolygonClickedEvent();
public class PolygonClickedEvent : UnityEvent<PolygonClick> { }
}
并且，我们需要在Start()中将PolygonCollider2D的顶点数据缓存下来，并且禁用它节省计算开销。别忘了在OnDestroy()中将这些缓存置为null，手动释放引用计数避免GC发生。
然后重写IsRaycastLocationValid方法，对点击的点进行判定。这里需要将screenPoint参数转换为UI的坐标。转换有很多种作法，这里我使用了自己写的一个脚本进行转换（代码放在最后面）。
/// <summary>
/// 重写方法，用于干涉点击射线有效性
/// </summary>
public override bool IsRaycastLocationValid(Vector2 screenPoint, Camera eventCamera)
{
if (this.m_Vertexs == null)
{
return base.IsRaycastLocationValid(screenPoint, eventCamera);
}
else
{
// 点击的坐标转换为相对于图片的坐标
//
UICanvasHelper.Instance.ScreenToUIPoint(ref screenPoint);
var selfPoint = UICanvasHelper.Instance.WorldToScreenPoint(this.m_RectTransform.position, UICanvasHelper.Instance.UICamera);
screenPoint.x -= selfPoint.x;
screenPoint.y -= selfPoint.y;
// 判断点击是否在区域内
//
return _Contains(this.m_Vertexs, screenPoint);
}
}
然后是对点击事件的响应：
public void OnPointerUp(PointerEventData eventData)
{
if (this.m_OnPointerUp != null)
{
this.m_OnPointerUp.Invoke(this);
}
}
public void OnPointerClick(PointerEventData eventData)
{
if (this.m_OnPointerClick != null)
{
this.m_OnPointerClick.Invoke(this);
}
}
public void OnPointerDown(PointerEventData eventData)
{
if (this.m_OnPointerDown != null)
{
this.m_OnPointerDown.Invoke(this);
}
}
使用方法
新建一个GameObject，挂载PolygonCollider2D脚本，再挂载PolygonClick脚本。在编辑器里对PolygonCollider2D的Collider进行编辑，这个Collider的区域就是点击有效的区域。如果点到区域外就穿透到下一个层级了。
添加点击回调的示例代码：
var pc = transform.GetComponent<PolygonClick>();
pc.PointerDown.AddListener(this._PointerDown);
pc.PointerClick.AddListener(this._PointerClick);
pc.PointerUp.AddListener(this._PointerUp);
使用还是非常简单的。
完整代码
最后放上完整代码。首先是PolygonClick：
//————————————————————————————————————————————
// PolygonClick.cs
//
// Created by Chiyu Ren on 2016-08-16 11:21
//————————————————————————————————————————————
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
using UnityEngine.Events;
using TooSimpleFramework.Components;
namespace TooSimpleFramework.UI
{
/// <summary>
/// 支持设置多边形区域作为点击判断的组件
/// 多边形区域编辑由PolygonCollider2D组件提供
/// </summary>
[RequireComponent(typeof(PolygonCollider2D))]
public class PolygonClick : Image,
IPointerUpHandler,
IPointerClickHandler,
IPointerDownHandler
{
private PolygonClickedEvent m_OnPointerClick = new PolygonClickedEvent();
private PolygonClickedEvent m_OnPointerDown = new PolygonClickedEvent();
private PolygonClickedEvent m_OnPointerUp = new PolygonClickedEvent();
private RectTransform m_RectTransform = null;
private Vector2[] m_Vertexs = null;
protected override void Start()
{
base.Start();
// 收集变量
this.m_RectTransform = base.GetComponent<RectTransform>();
var c = base.GetComponent<PolygonCollider2D>();
if (c != null)
{
this.m_Vertexs = c.points;
c.enabled = false;
}
}
protected override void OnDestroy()
{
base.OnDestroy();
this.m_RectTransform = null;
this.m_Vertexs = null;
this.m_OnPointerUp.RemoveAllListeners();
this.m_OnPointerClick.RemoveAllListeners();
this.m_OnPointerDown.RemoveAllListeners();
this.m_OnPointerUp = null;
this.m_OnPointerClick = null;
this.m_OnPointerDown = null;
}
/// <summary>
/// 点下时发生
/// </summary>
public PolygonClickedEvent PointerDown
{
get { return this.m_OnPointerDown; }
}
/// <summary>
/// 点击时发生
/// </summary>
public PolygonClickedEvent PointerClick
{
get { return this.m_OnPointerClick; }
}
/// <summary>
/// 点击松开时发生
/// </summary>
public PolygonClickedEvent PointerUp
{
get { return this.m_OnPointerUp; }
}
/// <summary>
/// 重写方法，用于干涉点击射线有效性
/// </summary>
public override bool IsRaycastLocationValid(Vector2 screenPoint, Camera eventCamera)
{
if (this.m_Vertexs == null)
{
return base.IsRaycastLocationValid(screenPoint, eventCamera);
}
else
{
// 点击的坐标转换为相对于图片的坐标
//
UICanvasHelper.Instance.ScreenToUIPoint(ref screenPoint);
var selfPoint = UICanvasHelper.Instance.WorldToScreenPoint(this.m_RectTransform.position, UICanvasHelper.Instance.UICamera);
screenPoint.x -= selfPoint.x;
screenPoint.y -= selfPoint.y;
// 判断点击是否在区域内
//
return _Contains(this.m_Vertexs, screenPoint);
}
}
public void OnPointerUp(PointerEventData eventData)
{
if (this.m_OnPointerUp != null)
{
this.m_OnPointerUp.Invoke(this);
}
}
public void OnPointerClick(PointerEventData eventData)
{
if (this.m_OnPointerClick != null)
{
this.m_OnPointerClick.Invoke(this);
}
}
public void OnPointerDown(PointerEventData eventData)
{
if (this.m_OnPointerDown != null)
{
this.m_OnPointerDown.Invoke(this);
}
}
/// <summary>
/// 使用Crossing Number算法获取指定的点是否处于指定的多边形内
/// </summary>
private static bool _Contains(Vector2[] pVertexs, Vector2 pPoint)
{
var crossNumber = 0;
for (int i = 0, count = pVertexs.Length; i < count; i++)
{
var vec1 = pVertexs[i];
var vec2 = i == count - 1 // 如果当前已到最后一个顶点，则下一个顶点用第一个顶点的数据
? pVertexs[0]
: pVertexs[i + 1];
if (((vec1.y <= pPoint.y) && (vec2.y > pPoint.y))
|| ((vec1.y > pPoint.y) && (vec2.y <= pPoint.y)))
{
if (pPoint.x < vec1.x + (pPoint.y - vec1.y) / (vec2.y - vec1.y) * (vec2.x - vec1.x))
{
crossNumber += 1;
}
}
}
return (crossNumber & 1) == 1;
}
public class PolygonClickedEvent : UnityEvent<PolygonClick> { }
}
}
这个UICanvasHelper脚本，建议挂载在Canvas上。它除了可以计算坐标转换，还可以进行分辨率自适配。需要注意的是Canvas不能配置为World Space模式。
//————————————————————————————————————————————
// UICanvasHelper.cs
//
// Created by Chiyu Ren on 2016-08-28 00:02
//————————————————————————————————————————————
using UnityEngine;
using UnityEngine.UI;
namespace TooSimpleFramework.Components
{
/// <summary>
/// UI画布助手
/// </summary>
public class UICanvasHelper : MonoBehaviour
{
#region Public Members
public CanvasScaler UICanvasScaler;
public Camera UICamera;
#endregion
#region Properties
public static UICanvasHelper Instance { get; private set; }
#endregion
#region Private Members
private float m_fWidthScale = -1;
private float m_fHeightScale = -1;
private float m_fMatchValue = -1;
#endregion
void Start()
{
Instance = this;
this._SetUIMatch();
this._SetSizeScale();
}
void OnDestroy()
{
Instance = null;
}
#region Public Methods
/// <summary>
/// 世界坐标转换为屏幕坐标
/// </summary>
public Vector2 WorldToScreenPoint(Vector3 pWorldPosition, Camera pCamera = null)
{
if (pCamera == null)
{
pCamera = Camera.main;
}
#if UNITY_EDITOR // 编辑器模式可能随时要调整画面大小
this._SetSizeScale();
#endif
Vector2 ret = pCamera.WorldToScreenPoint(pWorldPosition);
this._SetPositionScale(ref ret);
return ret;
}
/// <summary>
/// 屏幕坐标转换为UI坐标
/// </summary>
public void ScreenToUIPoint(ref Vector2 pPosition)
{
#if UNITY_EDITOR // 编辑器模式可能随时要调整画面大小
this._SetSizeScale();
#endif
this._SetPositionScale(ref pPosition);
}
#endregion
#region Private Methods
/// <summary>
/// 设置分辨率适配比例
/// </summary>
private void _SetUIMatch()
{
this.UICanvasScaler.screenMatchMode = CanvasScaler.ScreenMatchMode.MatchWidthOrHeight;
var scale = Screen.width / (float)(Screen.height);
if (scale > 1.5f)
{
this.m_fMatchValue = 1;
}
else if (scale < 1.4f)
{
this.m_fMatchValue = 0;
}
else
{
this.m_fMatchValue = 0.5f;
}
this.UICanvasScaler.matchWidthOrHeight = this.m_fMatchValue;
}
/// <summary>
/// 设置尺寸缩放比例
/// </summary>
private void _SetSizeScale()
{
this.m_fWidthScale = this.UICanvasScaler.referenceResolution.x / Screen.width;
this.m_fHeightScale = this.UICanvasScaler.referenceResolution.y / Screen.height;
}
/// <summary>
/// 将传入的坐标转换为缩放后的值
/// </summary>
private void _SetPositionScale(ref Vector2 pPosition)
{
pPosition.x = (pPosition.x - Screen.width * 0.5f) * ((1 - this.m_fMatchValue) * this.m_fWidthScale + this.m_fMatchValue * m_fHeightScale);
pPosition.y = (pPosition.y - Screen.height * 0.5f) * ((1 - this.m_fMatchValue) * this.m_fWidthScale + this.m_fMatchValue * m_fHeightScale);
}
#endregion
}
}
后记
最后的最后，这个类还可以继续优化，把多边形区域编辑做成单独的编辑器扩展类，这样就可以少挂一个PolygonCollider2D脚本节省内存。
另外这个算法效率其实并不高，多边形的边数变多之后运算量会比较恐怖，实际运用中要控制多边形边数。
再一个可以忽略的问题，就是点下去的点如果刚好在多边形的边上，运算结果是不确定的。
很久没写博客了，今天怒写了一篇，我感觉到非常高兴。讲三句话！
第一，没想好；
第二，还是没想好；
第三，马上就要过年了，在这里祝大家春节遇快，阖家欢洛，万似如意！
很惭愧，就做了一点微小的工作，谢谢大家！
