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.
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.
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;
}
}
