unity实现头顶血条

本文来自网易云社区

作者：汪毅军

在游戏中，头顶血条的是一个非常常见的功能，其中血条可分为2D血条和3D血条。2D血条不会随着模型远近而变化，始终保持着相同的大小；但3D血条会随着模型远近移动而产生透视，会显得比较真实。在大多数情况下，我们应该都会选择2D血条，当然也有一些特殊的地方3D血条会更加合适，今天就来看看这两种实现方案。

2D血条的实现思路

1. 首先需要确定模型头顶的坐标,该坐标可以直接在模型上预设好也可以直接通过计算Collider来获取。
2. 我们拿到头顶的世界坐标后，通过3D相机把这个点转换到屏幕坐标，然后这个坐标就是血条的位置。
3. 剩下的就是根据位置调整显示血条即可。

2D血条的实现

• 实现2D血条的话，需要将Canvas的RenderMode调整为ScreenSpace-Overlay。这个Canvas是所有的UI组件共用的。具体结构如下：

• 然后通过Slider制作血条

• 接下来按照实现思路来实现相关代码。由于2D血条没有透视问题，所以只需实时更新血条位置即可。

public class CHpBar : MonoBehaviour
{

    private Slider hpSlider;
    private RectTransform rectTrans;

    public Transform target;
    public Vector3 offsetPos; //头顶偏移量


    private void Start()
    {
        hpSlider = GetComponent<Slider>();
        rectTrans = GetComponent<RectTransform>();

        //更新血量
        //hpSlider.value
    }

    private void Update()
    {
        if(target==null) return;

        //通过Collider来获取头顶坐标
        var col = target.GetComponent<Collider>();
        var topAhcor = new Vector3(col.bounds.center.x, col.bounds.max.y, col.bounds.center.z);   
        //加上头顶偏移量
        Vector3 tarPos = topAhcor;

        var viewPos = Camera.main.WorldToViewportPoint(tarPos); //得到视窗坐标


        Vector2 screenPos;

        if (viewPos.z > 0f && viewPos.x > 0f && viewPos.x < 1f && viewPos.y > 0f && viewPos.y < 1f)
        {

            //获取屏幕坐标
            screenPos =  Camera.main.WorldToScreenPoint(tarPos+offsetPos); //加上头顶偏移量
        }
        else
        {
            //不在可视窗口的模型，把名字移动到视线外
            screenPos = Vector3.up * 3000f;
        }


        //转化为屏幕坐标
        rectTrans.position = screenPos;
    }
}

• 实现效果

可以发现，不论模型怎么移动，2D血条始终都会朝向保持着原始大小。

3D血条的实现思路

1. 3D的话就得把血条固定在模型头上面
2. 每一帧都得根据模型的旋转来调整血条，使血条始终朝着摄像机，这样才不会导致血条旋转、缩放等问题

3D血条的实现

• 3D血条需要将Canvas的RenderMode调整为World Space。并且将Canvas作为模型的Child。具体结构如下：

• 代码实现

代码的实现比较简单，直接矫正画布使其一直朝着摄像机

public class CHpCanvas : MonoBehaviour
{
    private void Update()
    {

        transform.rotation = Camera.main.transform.rotation;
    }
}

• 实现效果

可以发现，3D血条会跟随模型产生透视效果

总结

两个血条方案各有自己的适用场景。3D血条更加真实，但是由于一个对象一个Canvas,所以性能方面没有2D血条好。2D血条的话在显示效果上没有3D的好，但是性能方面比3D的好。此外在于一些特殊情况下（比如摄像机绘制RenderTexture）,使用3D血条的去处理要比2D血条要简便很多。

参考文章: https://www.jianshu.com/p/a9fd13594f18

网易云免费体验馆，0成本体验20+款云产品！ 

更多网易研发、产品、运营经验分享请访问网易云社区。