【UGUI】3D世界坐标转2DUI坐标并自适应的做法（血条，气泡）

前言

有一些功能是需要用2D的形式跟随3D的模型进行显示的。例如模型的讲话气泡，血条等。

功能

实现

1. UI的锚点设置，UI的根节点的大小设置
2. 脚本实现

UI

屏幕坐标系是从左下角为原点，Y轴向右为正，X轴向上为正。所有相关的UI的锚点都需要是设置成左下为锚点。其次，UI挂载的根节点需要做屏幕的自适应，保证和屏幕一样大。

脚本

常见的情况下有两种宽高。只要不是PC的固定界面大小，屏幕大小和设置的界面大小就会有对应的缩放情况。

第一种情况

Canvas使用固定屏幕大小。这种情况无论真机比例如何，都会按照预先设置好的大小比例进行缩放。

因为没有跟随屏幕分辨率进行缩放，所以我们在计算后需要再做多一步进行转换。根节点要做自适应。width和Height是屏幕宽高，位置是中心点（宽高/2）。

父节点的大小设置

           PlaneTransform.sizeDelta = CanvanTransform.sizeDelta;
           PlaneTransform.anchoredPosition = PlaneTransform.sizeDelta / 2;

UI的位置需要转化一下

        Vector3 pos = Camera.main.WorldToScreenPoint(m_TragetTransform.position + m_Offect);
        pos.x *= m_CanvasTransform.sizeDelta.x / Screen.width;
        pos.y *= m_CanvasTransform.sizeDelta.y / Screen.height;
        pos.z = 0;
        m_MyTransform.anchoredPosition = pos;

第二种情况

Canvas跟随屏幕大小，这样会跟随着分辨率的改变而改变。
因为根节点已经做了转换，所以直接设置即可。

           //m_TragetTransform是模型对象
           Vector3 pos = Camera.main.WorldToScreenPoint(m_TragetTransform.position + m_Offect);
           pos.z = 0;
           m_MyTransform.anchoredPosition = pos;