[Tutorial] Animation for Battle GUI

[media]https://www.youtube.com/watch?v=PvkP_ep0wAY[/media]

As seen in the video I can animate my power gauge to set on fire once the player has reached the maximum amount.  You can also take this further to animate when the players meter is half way, or whatever you want.  This technique can be applied to the life bars as well.

*Disclaimer* - you need to have a good knowledge of how mechanim works and how to use it

Setting up the GUI
Before coding anything, you'll need to set up the power bars to have the necessary components.

You'll need:

• An animator Component(along with a new animation controller)

• An Audio Source

• A new script called AnimatePowerLifeBars(or whatever you want to call it)

Animating the meter
Im not going to go over how to animate the meter.  In the image below you'll see that I have 4 animation states that transition into each other inside of the animator controller.  I also have a bool parameter called "FullGuage"(I know its not the correct spelling, just bare with me). This parameter is really important because we will use this to tell mechanim to switch animations in code.  Also here's a tip, the idle animation is an animation where nothing is happening.  Once the meter is full, "FullGuage" will be set to true, and mechanim will transition to the "OnFire" animation.

It's important (for those learning mechanim now..) to know how to use transitions.  The "FullGuage" bool parameter is initially set to false inside of the controller.  if its set to true in the code, then I transition from the "Idle" state into the "Explosion", which will transition into the "OnFire" state once the animation is done.  Its important to note that the transition from "Idle" to "Explosion" will have the "True" condition, as seen in the image below.  The transition from "Explosion" to "OnFire" will have no condition.

Once the players power meter is not at it's maximum value, "FullGuage" is set back to false.  So the transition from "OnFire" to "Extinguish" needs to have the False condition as seen in the image below.  the transition from "Extinguish" to "Idle" will have no condition.

Code
Like I said you'll want to create that new script AnimatePowerLifeBars and attach it to your power meters.  Then you're gonna want to open up DefaultBattleGUI.cs.

first you'll want to scroll down to

#region public instance properties

I think it's line 48.  look for

public UFEScreen pauseScreen;

and add these lines under that

 //animating gauge bars
    public AnimatePowerLifeBars player1GuageExplosion;
    public AnimatePowerLifeBars player2GuageExplosion;

ok after that you'll want to scroll down to

#region public override methods
    public override void DoFixedUpdate

look for

if (this.player1GUI != null && this.player1GUI.gaugeMeter != null){
                    this.player1GUI.gaugeMeter.fillAmount = UFE.config.player1Character.currentGaugePoints / UFE.config.player1Character.maxGaugePoints;

then make this if statement look like this

if (this.player1GUI != null && this.player1GUI.gaugeMeter != null){
                    this.player1GUI.gaugeMeter.fillAmount = UFE.config.player1Character.currentGaugePoints / UFE.config.player1Character.maxGaugePoints;
                    if (UFE.config.player1Character.currentGaugePoints == UFE.config.player1Character.maxGaugePoints)
                    {
                        player1GuageExplosion.SetOnFire();
                        print("maximum power");
                    }
                    else
                    {
                        player1GuageExplosion.ReturnToNormal();
                    }

                }

It's pretty self explanitory that you're going to do the same thing to the if statement under this one which refers to player 2.

Ok, so were done with this script now.  Back to that script we created at the beginning.  paste this code inside of AnimatePowerLifeBars.cs.

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

public class AnimatePowerLifeBars : MonoBehaviour {

    private Animator anim;
    public AudioClip fireBegin;
    public AudioClip extinguish;
    private AudioSource audioPlayer;
    void Start()
    {
        anim = gameObject.GetComponent<Animator>();
        audioPlayer = gameObject.GetComponent<AudioSource>();
    }

    public void SetOnFire () {
        anim.SetBool("FullGuage", true);
        
    } 
    
    // Update is called once per frame
    public void ReturnToNormal () {
        anim.SetBool("FullGuage", false);
    }

    public void PlayExtinguishSOund()
    {
        audioPlayer.PlayOneShot(extinguish);
    }
    public void PlayExplosionSound()
    {
        audioPlayer.PlayOneShot(fireBegin);
    }
}

remember that, you need to have the sound clips attached to the power meter you want to the power meter, or else you'll get Null reference errors. To have the sounds play, you have to use them as animation events in your animations.  Which is why I made them public functions.  If you try to call these functions inside of another function, the sound will loop and will be very annoying.

Once you have all of this, make sure to select the BattleGui prefab in the hierarchy and assign both the player 1 and player 2 power meters to the fields circled in this image.  If you don't, you'll get more null reference errors.  Apply your changes to this prefab!!!