Fairygui gain buff value change display

FairyGUI gain BUFF Display of value changes

Click here to download the material

One 、FGUI The operation

1、 Import resources

2、 Create two new bitmap fonts and an animation

（1）addValue Bitmap fonts

（2）attackValue Bitmap fonts

（3）Fire Animation

3、 Create a new font and background

Then you can add a sequence frame animation on the right , When combat effectiveness increases , Let the flames flash . As shown in the figure below ：

4、 Add action

（1） Before adding dynamic effects , Add group first , This will be more convenient for subsequent processing .
Future generations , Hold down Ctrl+G, Play group , And select the advanced group


（2） Add action



You can also add some small details , Even the flame also needs to add special effects . We hope that when the player's value changes , That is, when the combat effectiveness increases , Let the flame show , It means stronger .

（1） First, reset the axis of the flame , Then change its opacity to 0

（2） Enter dynamic editing again , Try to do some special effects by yourself , No specific requirements

（3） Make some small changes

5、 Make buttons

 Increase the value of the value by clicking the button .

（1） Import material


（2） New component , Used to control the button display , That is, the main scene （ Main panel ）


（3） The new button


（4） Drag the button to Component1 In the component

6、 Packaging releases

Two 、Unity The operation

1、 Display button

2、 Write a script

Be careful ： Need to introduce DOTween.dll library , The first thing you need to do is Unity Search in the resource store of “dotween”, Import after downloading , Only in C# The script introduces using DG.Tweening; The namespace of .

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using FairyGUI;
using DG.Tweening;

public class ZengYiBUFF : MonoBehaviour
{
    
    private GComponent mainUI;  // Lord UI
    private GComponent addValueCom;  // Add value components 
    private float startValue;  // End value 
    private float endValue; // Starting value 
    
    void Start()
    {
    
        mainUI = GetComponent<UIPanel>().ui;  // Get master UI
        addValueCom = UIPackage.CreateObject("Package1", "AddValue").asCom;
        //.asCom Turn it into GComponent type 
        addValueCom.GetTransition("t0").SetHook("AddValue", AddAttackValue);  // Set up FGUI The event of the keyframe corresponding to the tag added in 
        mainUI.GetChild("n0").onClick.Add(() => {
     PlayUI(addValueCom); });  // Register the monitoring event for the button 
        // Set its tag status 
    }

    // Update is called once per frame
    void Update()
    {
    

    }
    
    private void PlayUI(GComponent targetCom)
    {
    
        mainUI.GetChild("n0").visible = false;
        GRoot.inst.AddChild(targetCom);
        Transition t = targetCom.GetTransition("t0");// Set dynamic effect correlation 
        startValue = 10000;
        int add = Random.Range(1000, 3000);
        endValue = startValue + add;
        addValueCom.GetChild("n2").text = startValue.ToString();
        addValueCom.GetChild("n4").text = add.ToString();
        t.Play(() =>
        {
    
            mainUI.GetChild("n0").visible = true;
            GRoot.inst.RemoveChild(targetCom);
        }
        );
    }
    
    /// <summary>
    /// This method is to reduce the current combat effectiveness from 10000 Add to 12000,
    /// Need to introduce using DG.Tweening Namespace （Unity Download from the resource store ）
    /// </summary>
    private void AddAttackValue()
    {
    
        DOTween.To(() => startValue, x => {
     addValueCom.GetChild("n2").text = Mathf.Floor(x).ToString(); }, endValue, 0.3f).SetEase(Ease.Linear).SetUpdate(true);
    }
}

3、 Running effect