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
{
    /// <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, 將上面腳本拖到這個物體上,然后在編輯器中綁定一些屬性,如圖:

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預置體,如圖


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游戲，是一個挺實用的功能。別看功能雖小，我們通過不斷學習和制作這些細小功能，最后將所有小小的組件匯聚成一個大的功能性的組件，這個時候會你開發的時間將會大大減少，達到快速復用開發。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容