简单来说就是将怪物某个关节的世界坐标转化成UI坐标。我要显示的圈圈是名为RedCircle的Image,当然这是一个动态效果的圈圈,它有2个子物体。下面是圈圈的属性,最好使用这个Anchors属性配合下面的代码。
/// <summary>
/// 跟随目标改变自己的UI坐标
/// </summary>
public void ChangePos()
{
//1.获取目标的视口坐标
Vector3 ptViewport = Camera.main.WorldToViewportPoint(m_Target.position);
//求出当前物体的锚点中心
Vector2 anchorPos = new Vector2(rectTrans.anchorMin.x + rectTrans.anchorMax.x, rectTrans.anchorMin.y + rectTrans.anchorMax.y) * 0.5f;
Vector2 detal = new Vector2(ptViewport.x - anchorPos.x, ptViewport.y - anchorPos.y);
//获取屏幕UI宽高
RectTransform canvasRect = transform.parent.parent.GetComponent<RectTransform>();
float uiWidth = canvasRect.rect.width;
float uiHeight = canvasRect.rect.height;
//设置当前ui的位置 anchoredPosition对应PosX和PoxY
rectTrans.anchoredPosition3D = new Vector3(uiWidth * detal.x, uiHeight * detal.y, 0);
}
其中m_Target表示怪物的关节,rectTrans是圈圈RedCircle的RectTransform组件,自己在脚本开始时记得先获取一下。canvasRect是根Canvas,transform.parent.parent指的就是它。
下面附上我的UI框架的层级图。实际产生的圈圈RedCircle我是放在根Canvas的子物体Popup下的,所以用transform.parent.parent来获取它,自己可以根据实际情况进行修改。
最后放上实际效果图,第一关是木头人,第三关是九婴。