How I implemented the Stop the Pop Thermometer Health Bar

This page shows how I implemented the thermometer health bar in Stop the Pop!

This is what the health bar looks like in isolation in the editor.

The thermometer is split into 4 images. 

• Thermometer Overlay
• White Body
• Red Body
• Glow

They are arranged in the inspector like below. The Thermometer was added as a UI Image but the Image component was then removed from the Thermometer. The Glow, WhiteBody, RedBody and ThermometerOverlay are all UI Images. Note that the order of these images in the editor is important otherwise the thermometer will not appear to function correctly.

In the Scene view, it looks like this:

The Thermometer has a ThermometerBehaviour script attached to it and an Animator component. You can find the content of the ThermometerBehaviour script below.

The animator is updated every frame from the script with the current temperature. The animator is set up so if the temperature reaches 0.8, it enables an animation which just scales the thermometer from the original size to a larger size and and back to the original size.




When using the script, the RedBody needs to be attached to the redFill Image reference from the editor.
The Glow Image also needs to be attached to alertGlow reference from the editor.

The percentage of the redFill Image that is shown on screen is controlled by setting redFill.fillAmount. This value needs to be between 0 and 1.

The way script works is that it has a currentFill float. The purpose of using this float to add in a bit of animation when jumping between one temperature value to another. Every frame it lerps between currentFill and currentTemperature.
The script also checks if a temperature threshold has been reached. If the threshold of 0.8f has been reached, the glow is enabled.

External scripts can modify the thermometer by changing the value of currentTemperature of the ThermometerBehaviour script.

---

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

public class ThermometerBehaviour : MonoBehaviour {

    [Range(0.0f, 1.0f)]
    public float currentTemperature = 0;

    public Image redFill;
    public Image alertGlow;

    float currentFill = 0f;
    float animationSpeed = 5f;    //the speed of the lerp 
    Animator animator;

    void Start() {
        alertGlow.gameObject.SetActive (false);
        animator = GetComponent<Animator> ();
    }

    void Update () {
        //this is purely cosmetic so the fill is always gradually moving and there is no sudden jumps
        currentFill = Mathf.Lerp(currentFill, currentTemperature, Time.deltaTime * animationSpeed);
        if (currentTemperature > 0.8f) {
            alertGlow.gameObject.SetActive (true);
        } else {
            alertGlow.gameObject.SetActive (false);
        }
        animator.SetFloat ("temperature", currentTemperature);
        redFill.fillAmount = currentFill;
    }

    public void Reset() {
        currentTemperature = 0;
        currentFill = 0;
    }
}  

---