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

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

推薦閱讀更多精彩內容