【Unity3D】在Unity中实现UI指向箭头

本问转载自http://ghostyii.com/uiarrow/，为什么转载呢，怕以后找不到了！ ps：博主写到超级详细，复制粘贴即可使用，超赞的！

0x0.引言

屏幕UI指示箭头，非常常见的游戏UI元素。它是一个动态的，可以帮助玩家在目标脱离屏幕范围时指示出大概方位的UI元素。
它在游戏中可以充当多种功能，如在玩家受到伤害时只是伤害来源位置、如显示任务目标点或游戏资源的位置、如在多人游戏中显示队友的位置等等。下图是游戏COD16的一张截图，此图非常直观的显示出了UI Arrow的作用。　　

本文将讲述如何在Unity中实现UI指向箭头的效果。

0x1.基础思路

我们希望指示箭头会一直显示在屏幕中，如果目标物体出现在屏幕中时，指示箭头会显示在目标物体的屏幕坐标位置，而目标物体离开屏幕视野时，指示箭头会在屏幕边缘显示其位置。
那么其对应的基本思路是非常明确且清晰的：将目标物体世界坐标转换为对应的屏幕坐标，然后根据其屏幕坐标限制其的显示位置，若坐标不在UI范围内，则限制其坐标点使其先是在边缘位置。

0x2.编码实现

此处的编码我将会一步一步进行实现直至实现最终效果。

0x2.0.坐标转换

本文使用2D物体作为演示目标。
Unity的坐标转换是开发者遇到的非常常见的问题，转换坐标只需要关注不同坐标轴的对应原点和坐标轴朝向即可，具体的计算可以通过Unity提供的API实现。
此处用到的转换关系为：2D世界坐标轴->2D屏幕坐标轴。本文使用的UI为Unity自带的UGUI系统，用到的API为：

RectTransformUtility.WorldToScreenPoint(Camera cam, Vector3 worldPos)

值得注意的一点是，如果将上述API计算得到的值用于RectTransform的anchoredPosition，则需要将该UI元素的锚点设置为left-bottom。这样做的目的是使得两个坐标轴的原点一致，如果想忽略锚点所带来的影响，则直接把计算得到的值赋值给RectTransform.position即可。

0x2.1.限制范围

目前的效果仅仅只是做出了坐标转换，并没有把UI元素限制在视口范围内。现阶段的效果如下：

上图中，红色菱形方块代表世界物块，白色圆形物体代表UI指向箭头。从图中可以发现白色UI始终在屏幕坐标中的正确位置，但是当右侧红色物体移动至屏幕外时，白色物体也跟着移动到了屏幕外。这显然不是想要的效果。
下一步的工作就是将UI元素的位置限制在玩家的屏幕内。
由于使用的是UGUI，所以此处的“玩家屏幕范围”应该特指挂载了Canvas组件的RectTransform的大小。故在脚本中需要引用一个canvas组件。
单纯的限制范围实现非常简单，下面的代码演示了如何将一个UI物体限制在某个指定的矩形范围内。

private Vector2 GetClampPos(Vector2 pos, Rect area)
{Vector2 safePos = Vector2.zero;safePos.x = Mathf.Clamp(pos.x, area.xMin, area.xMax);safePos.y = Mathf.Clamp(pos.y, area.yMin, area.yMax);return safePos;
}

此处关键信息为Rect结构内的xMin，xMax，yMin，yMax等值的确定。上文提到为了得到范围，我们需要获取到挂载了Canvas组件的RectTransform，那么这些值便可以通过其来确定。
则上述代码中的area参数的确定方法如下：

private Rect CalRectByCanvas(Canvas c, Vector2 uiSize)
{Rect rect = Rect.zero;Vector2 area = c.GetComponent<RectTransform>().sizeDelta;//减去uiSize的一半是为了防止UI元素一般溢出屏幕rect.xMax = area.x - uiSize.x / 2;rect.yMax = area.y - uiSize.y / 2;rect.xMin = uiSize.x / 2;rect.yMin = uiSize.y / 2;return rect;
}

值得注意的一点是，如果UI元素的pivot属性不在中心点（0.5,0.5），则上述代码中的计算也要进行相应的变更使得UI元素不会溢出屏幕。

0x2.2.功能实现

坐标转换与限制范围均实现后，直接将其代码结合起来。最终的实现代码也就下面这一句：

rectTrans.position = GetClampPos(RectTransformUtility.WorldToScreenPoint(Camera.main, target.position), CalRectByCanvas(canvas, rectTrans.sizeDelta));

最终实现效果如下：
其中最左侧显示为游戏实际效果，中间白色区域为UI限制区域，右侧白色区域为摄像头限制区域。

0x3.拓展功能

有些UI指示标中会显示一个箭头，且箭头方向会指向物体方向。通过本方式去改造成该效果也非常简单。
下面将其代码改造为仅当物体在视野外时显示UI标，且拥有一个箭头指向。
检测物体是否处于视野外有多种方式，在Unity中，可以通过内置回调函数void OnBecameVisible()和void OnBecameInvisible()来检测物体是否处于渲染状态，但是在此处不适合。因为此处控制脚本挂载在UI元素上。第二种方式是使用Renderer类中的isVisible属性判断。很明显，使用后者满足场景需求。
值得注意的一点是，上述两种方式仅当所有scene视图与game视图中的物体均不可见才会返回false。
添加一个指示箭头无非多一步用于计算方向，Unity中，如果需要朝向计算，在3D中可以使用LookAt方法实现，但是在2D情况下，LookAt方法的转向轴并非正确，下面的代码实现了2D情况下的LookAt方法：

public Vector3 LookAt2D(Transform from, Vector3 to)
{float dx = to.x - from.transform.position.x;float dy = to.y - from.transform.position.y;float rotationZ = Mathf.Atan2(dy, dx) * 180 / Mathf.PI;rotationZ -= 90;float originRotationZ = from.eulerAngles.z;float addRotationZ = rotationZ - originRotationZ;if (addRotationZ > 180)        addRotationZ -= 360;return new Vector3(0, 0, from.eulerAngles.z + addRotationZ);
}

将得到的角度赋值给箭头对象的eulerAngles属性后就得到了一个朝向标。效果如下：

值得注意一点是，箭头的图片默认应当是朝向上方，否则会出现旋转错误。如果箭头方向无法默认向上，则需要修改LookAt2D方法中的计算使得计算以箭头朝向为基准。

0x4.示例代码

//ORG: Ghostyii & MOONLIGHTGAME
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;[RequireComponent(typeof(RectTransform))]
[ExecuteInEditMode]
public class UIArrow : MonoBehaviour
{//Aim targetpublic Transform target;//Canvas for clamp rect areapublic Canvas canvas;//Arrow pointerpublic RectTransform arrow;private RectTransform rectTrans = null;private SpriteRenderer targetRenderer = null;private Vector2 anchoredPosition = Vector2.zero;private Image arrowImg = null;private void Start(){if (!rectTrans)rectTrans = GetComponent<RectTransform>();if (target)targetRenderer = target.GetComponent<SpriteRenderer>();if (canvas)anchoredPosition = canvas.GetComponent<RectTransform>().anchoredPosition;if (arrow)arrowImg = arrow.GetComponent<Image>();}// Update is called once per framevoid Update(){if (!target)return;if (arrowImg)arrowImg.enabled = !targetRenderer.isVisible;var screenPoint = RectTransformUtility.WorldToScreenPoint(Camera.main, target.position);rectTrans.position = GetClampPos(screenPoint, CalRectByCanvas(canvas, rectTrans.sizeDelta));if (arrow)arrow.eulerAngles = LookAt2D(arrow.transform, screenPoint);}private Vector2 GetClampPos(Vector2 pos, Rect area){Vector2 safePos = Vector2.zero;safePos.x = Mathf.Clamp(pos.x, area.xMin, area.xMax);safePos.y = Mathf.Clamp(pos.y, area.yMin, area.yMax);return safePos;}private Rect CalRectByCanvas(Canvas c, Vector2 uiSize){Rect rect = Rect.zero;Vector2 area = c.GetComponent<RectTransform>().sizeDelta;rect.xMax = area.x - uiSize.x / 2;rect.yMax = area.y - uiSize.y / 2;rect.xMin = uiSize.x / 2;rect.yMin = uiSize.y / 2;return rect;}public Vector3 LookAt2D(Transform from, Vector3 to){float dx = to.x - from.transform.position.x;float dy = to.y - from.transform.position.y;float rotationZ = Mathf.Atan2(dy, dx) * 180 / Mathf.PI;rotationZ -= 90;float originRotationZ = from.eulerAngles.z;float addRotationZ = rotationZ - originRotationZ;if (addRotationZ > 180)addRotationZ -= 360;return new Vector3(0, 0, from.eulerAngles.z + addRotationZ);}}

0x5.使用方法

将脚本挂载在UI元素上，赋值上正确的Target，Canvas和Arrow即可预览效果。

----------------------------------

我项目中，没这么复杂。

1. 箭头位置，常驻中游戏中下方中间位置

2. target中相机视野内，隐藏箭头；否则显示。

下面是脚本：

//ORG: Ghostyii & MOONLIGHTGAME
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;[RequireComponent(typeof(RectTransform))]
[ExecuteInEditMode]
public class UIArrow : MonoBehaviour
{public GameObject target;public RectTransform arrow;Image arrowImg = null;public Camera MainCamera;private Vector2 anchoredPosition = Vector2.zero;private void Start(){MainCamera = Camera.main;if (arrow)arrowImg = ObjectCommon.GetChildComponent<Image>(arrow.gameObject, "arrow");UITools.SetActive(arrow, true);}void Update(){if (!target){arrowImg.enabled = false;return;}bool isinview = IsGameObjectInCameraView(target.gameObject, MainCamera);// 目标是否在事业范围内arrowImg.enabled = isinview == false;if (isinview)return;Vector2 screenPoint = RectTransformUtility.WorldToScreenPoint(MainCamera, target.transform.position);if (arrow)arrow.eulerAngles = LookAt2D(arrow.transform, screenPoint);}public Vector3 LookAt2D(Transform from, Vector3 to){float dx = to.x - from.transform.position.x;float dy = to.y - from.transform.position.y;float rotationZ = Mathf.Atan2(dy, dx) * 180 / Mathf.PI;rotationZ -= 90;float originRotationZ = from.eulerAngles.z;float addRotationZ = rotationZ - originRotationZ;if (addRotationZ > 180)addRotationZ -= 360;return new Vector3(0, 0, from.eulerAngles.z + addRotationZ);}public static bool IsGameObjectInCameraView(GameObject targetObj, Camera camera = null){if (camera == null)camera = Camera.main;if (camera == null)return false;Vector3 targetObjViewportCoord = camera.WorldToViewportPoint(targetObj.transform.position);if (targetObjViewportCoord.x > 0 && targetObjViewportCoord.x < 1 && targetObjViewportCoord.y > 0f && targetObjViewportCoord.y < 1 && targetObjViewportCoord.z > camera.nearClipPlane && targetObjViewportCoord.z < camera.farClipPlane)return true;return false;}}