Masking to make a health bar

alt text

How can I make a health bar like this one?
I have a full version of a health bar and an empty version of a health bar.
I want to use masking on the full health bar to show the percent of health you have.
The solution doesn’t have to be masking.
I just think that masking seems the most appropriate for this problem.

Here is how I ended up making my health bar.
It uses an image of a gradient from white to transparent for the mask.


Here is the shader I wrote for the bar.
Use the texture of the health bar for Base and the gradient for Mask.

Shader "Custom/Mask" {
	Properties {
		_Color ("Main Color", Color) = (1,1,1,1)
		_MainTex ("Base (RGBA)", 2D) = "white" {}
		_MaskTex ("Mask (RGBA)", 2D) = "white" {}
	SubShader {
		Tags { "Queue" = "Transparent" }
		Pass {
			Blend SrcAlpha OneMinusSrcAlpha
			SetTexture [_MainTex] {
				constantColor [_Color]
				combine Constant * Texture
			SetTexture [_MaskTex] {
				combine Previous, Previous * Texture
	Fallback "Sprites/Default"

Here is the script attached to the bar. At percent = 0, the bar is invisible, and percent = 1, the bar is completely unveiled.

using UnityEngine;
using System.Collections;

public class HealthBar : MonoBehaviour
	public float percent;
    float oldPercent = 0;

	void Update ()
		if (oldPercent != percent) {
			renderer.material.SetTextureOffset ("_MaskTex", Vector2.right * (1 - percent * 2));
			oldPercent = percent;

This took me forever to figure out but it works great. I like how I can lerp the health since I don’t use discrete frames. One thing I don’t understand is this warning: “Material uses fixed function shader. It is not compatible with SpriteRenderer”