UGUI 伤害漂浮文字

---

大家好，我是广州幻梦互动的半透明，最近做完了AR枪项目，感觉还是十分有趣的，这个游戏用实体的蓝牙枪设备通过扳机来发射子弹，在AR实景空间打败不断出现的怪物。游戏制作难度并不算高，都是由一些小的功能整合起来，现在趁空余时间扒一段【伤害漂浮文字】小功能出来分享给大家，希望大家可以学习到东西。

原创文章，请勿转载。感谢！！

---

本案例适合人群

必须会Unity3D引擎基础，对C#脚本编程有一定经验

---

目的

1 学习UGUI的一些基础
2 学习如何将物体坐标转换到UGUI的Canvas坐标

---

开发平台

unity5.6.0f3

---

使用插件

本案列使用前还必须导入以下这些插件
LeanTween
一款免费的优秀动画补间插件

---

项目最终效果

项目最终效果

---

项目制作

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

导入LeanTween

建立项目文件夹
在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，效果如下图：

调整UI分辨率

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

制作Text预制体

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

FloatingText 预制体

编写脚本

新建脚本命名为 HUDText.cs，输入以下代码

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class HUDText : MonoBehaviour
{
    /// 

    /// 漂浮文字生成到某个父Canvas
    /// 
    public Canvas ParnetCanvas;
    /// 

    /// 漂浮文字预制体
    /// 
    public GameObject TextPrefab;
    /// 

    /// 时间
    /// 
    public float FadeTime = 0.56f;

    /// 

    /// 创建一个伤害漂浮文本
    /// 
    /// 
    /// 
    /// 
    /// 
    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.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);
        } 
    }

    /// 

    /// 漂浮文字移动结束,移除掉
    /// 
    /// 
    private void OnComplete(object o)
    {
        Destroy((GameObject)o);
    }
}

在场景里新建一个空物体, 命名为HUDText, 将上面脚本拖到这个物体上,然后在编辑器中绑定一些属性,如图:

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

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

    /// 

    /// 设置Text内容
    /// 
    public string text
    {
        get { return _label.text; }
        set { _label.text = value; }
    }

    /// 

    /// 设置颜色
    /// 
    public Color color
    {
        set { _label.color = value; }
        get { return _label.color; }
    }
}

然后将上面脚本拖动到之前我们创建好的FloatingText预置体,如图

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游戏，是一个挺实用的功能。别看功能虽小，我们通过不断学习和制作这些细小功能，最后将所有小小的组件汇聚成一个大的功能性的组件，这个时候会你开发的时间将会大大减少，达到快速复用开发。