Unity3D: Progressbar using new UI system

06 Aug

Before Unity 4.6 new UI system came out, to create a progress bar, the typical process involve writing the OnGUI() function as follows:

public Texture2D emptyProgressBar; // Set this in inspector.
public Texture2D fullProgressBar;  // Set this in inspector.

void OnGUI() 
    GUI.DrawTexture(Rect(0, 0, 100, 50), emptyProgressBar);
    GUI.DrawTexture(Rect(0, 0, progress, 50), fullProgressBar); = TextAnchor.MiddleCenter;
    GUI.Label(Rect(0, 0, 100, 50), string.Format("{0:N0}%", 
progress * 100f)); }


This is OK, however not recommended in the new GUI system in Unity 4.6+: you don’t want to mix the GUI with the new and legacy system, right?

Here is the process to create a progress bar using the new UI system:

  • Create a new project in Unity3D
  • Add a UI Image, name it “Background”, set the sprite to the background image;

    image image

  • Add another UI Image (or duplicate the above background UI object) , name it “Foreground”, set the sprite to the foreground image;

image image

  • Change the foreground UI image’s Image type to “Filled”, Fill Method to “Horizontal”


  • Create a C# script, name it “Progress.cs”, attach it to the foreground UI image:

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

public class Progress : MonoBehaviour {

    Image foregroundImage;
    public int Value
	    if(foregroundImage != null)
	        return (int)(foregroundImage.fillAmount*100);	
	        return 0;	
 	    if(foregroundImage != null)
	        foregroundImage.fillAmount = value/100f;	

     void Start () {
	foregroundImage = gameObject.GetComponent<Image>();		
	Value =0;
//Testing: this function will be called when Test Button is clicked
public void UpdateProgress()
    Hashtable param = new Hashtable();
    param.Add("from", 0.0f);
    param.Add("to", 100);
    param.Add("time", 5.0f);
    param.Add("onupdate", "TweenedSomeValue");         
    param.Add("onComplete", "OnFullProgress");
    param.Add("onCompleteTarget", gameObject);
    iTween.ValueTo(gameObject, param);		

public void TweenedSomeValue(int val){
    Value = val;

public void OnFullProgress()
    Value =0;

Compile and Run! That is it! Happy coding!


Posted by on August 6, 2015 in Programming, Unity 3d


Tags: , , , , , , , , , ,

2 responses to “Unity3D: Progressbar using new UI system

  1. Eshan Naithani

    July 20, 2016 at 3:09 pm

    thanks man!😀

  2. Dan

    August 29, 2016 at 6:51 pm

    Im getting an error on this script
    Assets/Scripts/Progress.cs.cs(31,21): error CS0116: A namespace can only contain types and namespace declarations


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: