UGUI-血条

UGUI 血条

血条制作要解决的问题就是坐标转换，即将角色的3D世界坐标转换为屏幕坐标，再由屏幕坐标转换为UI的2D世界坐标，然后将UI血条的坐标设置成UI的2D世界坐标。

下面是制作的详细步骤-使用UGUI

第一步：创建一个Slider，颜色设置成红色就是血条了
设置Canvas 参数 Render Mode ： Screen Space - Overlay

如下

第二步：创建一个角色，我在此创建一个Capsule代替

第三步：创建代码 Follow.cs

using UnityEngine;
using System.Collections;

public class Follow : MonoBehaviour {

    private RectTransform rectTransform;

    private Transform target;
    // Use this for initialization
    void Start () {
        //获取血条的 RectTransform 组件
        rectTransform = GetComponent<RectTransform>();
        //获取角色
        target = GameObject.FindGameObjectWithTag("Role").transform;
    }

    // Update is called once per frame
    void Update () {

        if (target == null || rectTransform == null)
        {
            return;
        }
        //将角色的3D世界坐标转换为 屏幕坐标
        Vector3 targetScreenPosition = Camera.main.WorldToScreenPoint(target.position);

        //定义一个接收转换为 UI  2D 世界坐标的变量
        Vector3 followPosition;

        // 使用下面方法转换
        // RectTransformUtility.ScreenPointToWorldPointInRectangle（）
        // 参数1 血条的 RectTransform 组件；
        // 参数2 角色坐标转换的屏幕坐标
        // 参数3 目标摄像机，Canvas的 Render Mode 参数类型设置为 Screen Space - Camera时需要写摄像机参数
        //        本例 Canvas的 Render Mode 参数类型设置为 Screen Space - Overlay，在此将第三个参数设置为 null
        // 参数4 接收转换后的坐标，需要提前声明一个 Vector3 参数
        if (RectTransformUtility.ScreenPointToWorldPointInRectangle(rectTransform, targetScreenPosition, null, out followPosition))
        {
            //将血条的坐标设置为 UI 2D 世界坐标
            transform.position = followPosition;
        }
    }
}

将 Follow.cs 脚本拖拽到 血条 Slider 上，运行项目即可看到血条跟随角色移动了
效果如下

发现血条跑到角色的裤腰带上了，调节一下 Y轴坐标即可
添加代码如下

   //将角色的3D世界坐标转换为 屏幕坐标
        Vector3 targetScreenPosition = Camera.main.WorldToScreenPoint(target.position);
        //将 屏幕坐标的 Y 轴加上 50， 提高一下 血条的位置
        targetScreenPosition.y += 50;

再次运行，血条位置调整好了

上面 设置 Canvas 的 Render Mode : Screen Space - Overlay
下面设置 Canvas 的 Render Mode：Screen Space - Camera

设置参数后 Canvas 下面的参数发生了变化

将Canvas 的 Render Mode 参数设置成 Screen Space -Camera还有一个功能，类似于NGUI 的 UICamera的摄像机
（1）创建一个摄像机 （GameObject -> Camera）我在此命名为 UICamera，设置UICamera参数，不解释这几个参数的意思了

（2）设置好参数后将 UICamera 拖拽到 Canvas 的 Render Camera参数

看场景如下

我索性将UICamera 拖拽到 Canvas下。

现在运行一下项目，看看血条有没有发生变化

血条没了，现在解决这个Bug

在Follow.cs 稍微改动一点代码

 //声明一个Camera 变量
    private Camera myUICamera;

在Start() 方法中获取UICamera
//在此为了省事我就用比较笨的方法获取UICamear了

修改下面方法的调用
if (RectTransformUtility.ScreenPointToWorldPointInRectangle(rectTransform, targetScreenPosition, myUICamera, out followPosition))
        {
            //将血条的坐标设置为 UI 2D 世界坐标
            transform.position = followPosition;
        }

全部代码如下

using UnityEngine;
using System.Collections;

public class Follow : MonoBehaviour {

    private RectTransform rectTransform;

    private Transform target;

    //声明一个Camera 变量
    private Camera myUICamera;
    // Use this for initialization
    void Start () {
        //获取血条的 RectTransform 组件
        rectTransform = GetComponent<RectTransform>();
        //获取角色
        target = GameObject.FindGameObjectWithTag("Role").transform;

        //在此为了省事我就用比较笨的方法获取UICamear了
        myUICamera = GameObject.Find("UICamera").GetComponent<Camera>();
    }

    // Update is called once per frame
    void Update () {

        if (target == null || rectTransform == null)
        {
            return;
        }
        //将角色的3D世界坐标转换为 屏幕坐标
        Vector3 targetScreenPosition = Camera.main.WorldToScreenPoint(target.position);
        //将 屏幕坐标的 Y 轴加上 50， 提高一下 血条的位置
        targetScreenPosition.y += 50;

        //定义一个接收转换为 UI  2D 世界坐标的变量
        Vector3 followPosition;

        // 使用下面方法转换
        // RectTransformUtility.ScreenPointToWorldPointInRectangle（）
        // 参数1 血条的 RectTransform 组件；
        // 参数2 角色坐标转换的屏幕坐标
        // 参数3 目标摄像机，Canvas的 Render Mode 参数类型设置为 Screen Space - Camera 需要写摄像机参数
        //       将下面方法的第三个参数 写成 Canvas 参数 Render Camera 上挂的摄像机（UICamera）
        // 参数4 接收转换后的坐标，需要提前声明一个 Vector3 参数
        if (RectTransformUtility.ScreenPointToWorldPointInRectangle(rectTransform, targetScreenPosition, myUICamera, out followPosition))
        {
            //将血条的坐标设置为 UI 2D 世界坐标
            transform.position = followPosition;
        }
    }
}