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;
}
}
}