UGUI 伤害漂浮文字
大家好,我是广州幻梦互动的半透明,最近做完了AR枪项目,感觉还是十分有趣的,这个游戏用实体的蓝牙枪设备通过扳机来发射子弹,在AR实景空间打败不断出现的怪物。游戏制作难度并不算高,都是由一些小的功能整合起来,现在趁空余时间扒一段【伤害漂浮文字】小功能出来分享给大家,希望大家可以学习到东西。
原创文章,请勿转载。感谢!!
本案例适合人群
必须会Unity3D引擎基础,对C#脚本编程有一定经验
目的
1 学习UGUI的一些基础
2 学习如何将物体坐标转换到UGUI的Canvas坐标
开发平台
unity5.6.0f3
使用插件
本案列使用前还必须导入以下这些插件
LeanTween
一款免费的优秀动画补间插件
项目最终效果

项目制作
前期准备
我们先导入LeanTween插件, 如果没有的同学,可以unity商店这里下载一个,这个插件是免费的,下载好后导入到场景里,如图在Project面板会增加这两个文件夹:

建立项目文件夹
在Project面板处右键建立HudFloatingText文件夹,然后在HudFloatingText里分别右键建立3个文件夹并命名为Prefabs,Scenes,Scripts,这样做是为了方便管理,起码看起来不会和其他插件混淆,效果如下图:

制作场景
在Scenes文件夹里右键新建一个场景并命名为DemoScene,双击打开,然后再场景里面新建两个Sphere充当本案例的敌人,分别命名为Enemy1,Enemy2,至于敌人位置,我们可以随便放置只要让他在Game窗口看到就可以了,效果如下图:

调整UI分辨率
在场景邮件建立一个Canvas组件,选中Canvas组件,在属性面板中点开Canvas Scaler组件,在UI Scale Mode这个下拉框选择Scale With Screen Size模式,然后填好你的设计稿的尺寸,本案例用1280 - 720。Screen Match Mode选择Match Width Or Height,调整Match值为1,效果如下图:

制作Text Prefab
在Canvas右键创建一个Text,命名为FloatingText,选择字体为unity默认的Arial字体,选择粗体,调整大小为30,然后设置Alignment 为水平垂直居中,最后设置文本宽高为160,50。为了更加好看,给它增加一个描边的组件,点击AddComponet按钮,在搜索栏查找Outline,信息直接用默认的就可以了,设置效果如图:

然后我们将FloatingText物体直接拖动到Prefabs文件夹下, unity会自动创建一个FloatingText的预制体,效果如下图:

编写脚本
新建脚本命名为 HUDText.cs,输入以下代码
using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class HUDText : MonoBehaviour
{
/// <summary>
/// 漂浮文字生成到某个父Canvas
/// </summary>
public Canvas ParnetCanvas;
/// <summary>
/// 漂浮文字预制体
/// </summary>
public GameObject TextPrefab;
/// <summary>
/// 时间
/// </summary>
public float FadeTime = 0.56f;
/// <summary>
/// 创建一个伤害漂浮文本
/// </summary>
/// <param name="content"></param>
/// <param name="worldpos"></param>
/// <param name="color"></param>
/// <param name="type"></param>
public void Add(string content, Vector3 worldpos, Color color, HUDMovementType type = HUDMovementType.UP )
{
//实例化出伤害漂浮文字, 这里最优的方法是使用对象池来控制
//建议使用poolmanager插件,当然你可以自己写
//本案例简单使用Instantiate方法,比较消耗性能
GameObject text = Instantiate(TextPrefab) as GameObject;
RectTransform floatingTextT = text.transform as RectTransform;
floatingTextT.SetParent(ParnetCanvas.transform,false);
floatingTextT.localScale = Vector3.one;
FloatingText floatingText = floatingTextT.GetComponent<FloatingText>();
floatingText.text = content;
floatingText.color = color;
//UGUI处理坐标转换
Vector2 pos;
//先转化物体坐标为屏幕坐标
Vector3 screenpos = Camera.main.WorldToScreenPoint(worldpos);
//然后通过RectTransformUtility.ScreenPointToLocalPointInRectangle转化为UGUI真实坐标
if (RectTransformUtility.ScreenPointToLocalPointInRectangle(ParnetCanvas.transform as RectTransform, screenpos, ParnetCanvas.worldCamera, out pos))
{
//设置漂浮文字坐标
floatingTextT.localPosition = pos;
//leanTween用法请查看相关帮助,其实还是比较简单的
//向上漂浮
LeanTween.moveLocalY(floatingTextT.gameObject, floatingTextT.localPosition.y + 100f, FadeTime).setEaseInOutQuad().setOnComplete(OnComplete, text);
}
}
/// <summary>
/// 漂浮文字移动结束,移除掉
/// </summary>
/// <param name="o"></param>
private void OnComplete(object o)
{
Destroy((GameObject)o);
}
}
在场景里新建一个空物体, 命名为HUDText, 将上面脚本拖到这个物体上,然后在编辑器中绑定一些属性,如图:

继续新建脚本命名为 FloatingText.cs,输入以下代码
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class FloatingText : MonoBehaviour
{
private Text _label;
void Awake()
{
//获取Text组件
_label = GetComponent<Text>();
}
void Start()
{
//按照定义的实际时间来确定渐变消失
LeanTween.alphaText(_label.rectTransform, 0f, 0.28f).setDelay(0.28f);
//按照定义的实际时间来确定大小变化
LeanTween.scale(_label.gameObject, Vector3.one * 1.65f, 0.56f / 2).setLoopType(LeanTweenType.pingPong);
}
/// <summary>
/// 设置Text内容
/// </summary>
public string text
{
get { return _label.text; }
set { _label.text = value; }
}
/// <summary>
/// 设置颜色
/// </summary>
public Color color
{
set { _label.color = value; }
get { return _label.color; }
}
}
然后将上面脚本拖动到之前我们创建好的FloatingText预置体,如图

最后,我们做一个点击某个敌人出现伤害漂浮文字的测试代码,新建一个ClickObject.cs,并输入以下代码:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class ClickObject : MonoBehaviour
{
public HUDText mHudText;
// Use this for initialization
void Start () {
}
// Update is called once per frame
void Update () {
if (Input.GetMouseButtonUp(0))
{
Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);
//RaycastHit是一个结构体对象,用来储存射线返回的信息
RaycastHit hit;
//如果射线碰撞到对象,把返回信息储存到hit中
if (Physics.Raycast(ray, out hit))
{
if (hit.transform.gameObject != gameObject) return;
int randNum = Random.Range(-100, 100);
mHudText.Add(randNum<0? randNum.ToString():"+" + randNum.ToString(), transform.position, randNum < 0 ? Color.red : Color.green, HUDMovementType.UP);
}
}
}
}
将代码拖到我们起初创建的Enemy1和Emeny2物体上,然后将场景中的HUDText物体拖到这些敌人物体上的ClickObject组件的HUDText属性处即可,如图:

经过一大轮的设置后, 本案例算是完成了,我们可以点击运行一下看看实际效果了。
总结
这次教程可以算是一个小插件制作,但是这个功能对于一些RPG游戏,是一个挺实用的功能。别看功能虽小,我们通过不断学习和制作这些细小功能,最后将所有小小的组件汇聚成一个大的功能性的组件,这个时候会你开发的时间将会大大减少,达到快速复用开发。