0
点赞
收藏
分享

微信扫一扫

Unity 伤害飘血效果

愚鱼看书说故事 2022-03-11 阅读 127
unityc#

Unity 伤害飘血效果


前言

一、效果演示

在这里插入图片描述
字的颜色没调整好,所以有点不好看。

二、相关代码

根据自定义曲线控制飘字效果

using LFrameWork;
using TMPro;
using UnityEngine;

namespace Game
{
    public class HUDText : LMonoBehaviour,IUpdate
    {
        private readonly Vector3 r_LifeBarOffsetY = new Vector3(0, 2.2f, 0);

        //飘字持续时间
        [Range(0, 10f)] [SerializeField] protected float m_DurationTime;
        [SerializeField] protected AnimationCurve m_AlphaCurve;
        [SerializeField] protected AnimationCurve m_ScaleCurve;
        [SerializeField] protected AnimationCurve m_OffsetXCurve;
        [SerializeField] protected AnimationCurve m_OffsetYCurve;

        protected Transform m_FollowPlayer;
        protected TMP_Text m_HUDText;
        protected float m_CurrentTime;

        protected float m_OriginX;
        protected float m_OriginY;
        
        public void SetData(Transform target, string info)
        {
            m_FollowPlayer = target;
            m_HUDText = GetComponent<TMP_Text>();
            m_HUDText.text = info;

			//设置文本的起始位置
            transform.position =
                Utils.GetScreenPos(Camera.current, m_FollowPlayer.position + r_LifeBarOffsetY);
            
            m_OriginX = transform.localPosition.x;
            m_OriginY = transform.localPosition.y;
            
            //加入到自定义生命周期控制中
            LifeCycleManager.Instance.AddUpdate(this);
        }

        private void OnDisable()
        {
            LifeCycleManager.Instance.RemoveUpdate(this);
        }

        public void UpdateFun()
        {
            m_CurrentTime += Time.deltaTime;
            var tmpPercent = m_CurrentTime / m_DurationTime;
            if (tmpPercent > 1f)
            {
                //对象池回收
                RPGGame.Instance.RecycleObject(gameObject);
                return;
            }
            //静态扩展方法
            m_HUDText.SetColorAlpha(m_AlphaCurve.Evaluate(tmpPercent));
            transform.localScale = Vector3.one * m_ScaleCurve.Evaluate(tmpPercent);
            transform.SetTransLocalPosX(m_OriginX + m_OffsetXCurve.Evaluate(tmpPercent));
            transform.SetTransLocalPosY(m_OriginY + m_OffsetYCurve.Evaluate(tmpPercent));
        }
    }
}

工具方法,世界坐标和屏幕坐标的转换

        public static Vector3 GetScreenPos(Camera camera, Vector3 worldPos)
        {
            var tmpScreenPos = RectTransformUtility.WorldToScreenPoint(camera, worldPos);
            return new Vector3(tmpScreenPos.x, tmpScreenPos.y, 0);
        }

对于颜色渐变效果:
因为我这里的文本用的是TextMeshPro组件,所以对于字体变色可以直接修改其对应的属性。来控制文本的颜色渐变。
在这里插入图片描述
对于老版的Text组件,这里贴上一个脚本。在生成网格时修改顶点颜色,达成渐变的效果

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

namespace Game
{
    public class TextGradient : BaseMeshEffect
    {
        public Color32 topColor = Color.white;
        public Color32 bottomColor = Color.black;

        public override void ModifyMesh(VertexHelper vh)
        {
            if (!IsActive() || vh.currentVertCount == 0) return;
            
            var tmpVertices = new List<UIVertex>();
            vh.GetUIVertexStream(tmpVertices);
            
            for (var i = 0; i < tmpVertices.Count && tmpVertices.Count - i >= 6; i += 6)
            {
                ChangeColor(tmpVertices,i, topColor);
                ChangeColor(tmpVertices,i + 1, topColor);
                ChangeColor(tmpVertices,i + 2, bottomColor);
                ChangeColor(tmpVertices,i + 3, bottomColor);
                ChangeColor(tmpVertices,i + 4, bottomColor);
                ChangeColor(tmpVertices,i + 5, topColor);
            }
            
            vh.Clear();
            vh.AddUIVertexTriangleStream(tmpVertices);
        }   

        private void ChangeColor(List<UIVertex> uiVertices,int index, Color color)
        {
            var tmpVertex = uiVertices[index];
            tmpVertex.color *= color;
            uiVertices[index] = tmpVertex;
        }
    }
}

在文本上添加此脚本以后,修改TopColor和BottomColor脚本也可以实现渐变的效果
在这里插入图片描述

最后再分享一下自己调的四种曲线
在这里插入图片描述
AlphaCurve
在这里插入图片描述
ScaleCurve
在这里插入图片描述

OffsetXCurve
在这里插入图片描述
OffsetYCurve
在这里插入图片描述

举报

相关推荐

0 条评论