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