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