Need help working with NGUI progress bar

I am new to NGUI and now I find myself tinkering with the progress bar: a tool I want to implement in my game.

Before, I had a regular GUI window with two labels being drawn and that was how I displayed the user’s progress.

This is what it looks like:


This is what I have in code. This class handles drawing the numbers onto the screen.

using UnityEngine;
using System.Collections;
using Simulation;
using System;

public class ProgressTracker : MonoBehaviour
    public static ProgressTracker objectInstance;

    //GUI Elements
    public Rect GUIRectWindow, // the GUI background for the progress tracker
                r_msg; //a message that will display "Gestures Left"

    private int _TotalTaskCount = 0;

    void Start()
        if (objectInstance == null)
            objectInstance = this;//keep using the same game object

        _TotalTaskCount = TaskCollection._tasksSum;

    // Update is called once per frame
    void OnGUI()
        if (!Application.isLoadingLevel)
            GUI.Box(GUIRectWindow, "");
            drawLabel(r_msg, "Progress: " + GameManager.Get.CompletedTasks.ToString() + " / " + _TotalTaskCount);
    public void ProgressTracking()
        //TODO: NGUI Progress bar logic???
    void drawLabel(Rect rect, String labelname)
        GUI.Label(new Rect(GUIRectWindow.x + rect.x, GUIRectWindow.y + rect.y, rect.width, rect.height), labelname);

What I want to know is what are the steps required to transfer the information I have in my current progress tracker into NGUI’s progress bar? Many thanks in advance!

NGUI Progress Bar uses a UISlider component - the variable that you need to change is “value” which ranges from 0 to 1f.

So you need to update your drawLabel function and divide your value which should range from 1-15 by the total (15) to get it within the range of 0-1f. Then assign that value to the NGUI Progress bar and it will be updated instantly.

    void drawLabel(Rect rect, int value)
float percentageValue = value/15f;
       GameObject.Find("ProgressBarName").GetComponent<UISlider>().value = percentageValue;


In NGUI is way easier to do that (I assume u know how to create NGUI elements)

  1. Compose your progres bar of NGUI sprites( like put some background etc.)

  2. On the top put another sprite (lond ractangle) which will be your actual progress bar, in Uisprite settings change “sprite type to filled”, and “fill dir” horizontal. Play with fill amount slider to see how it will look.

  3. On the top of that (higher depths) add a UIlabel.

  4. In Any script define two references like in code below, and drag previously created sprite and label to these slots.

    public UISprite myBar;
    public UILabel myLabel;

  5. In your code update values of these items:

    void UpdateBar()

    myBar.fillAmount = curentExp/(float)expRequiredForNextLevel;
    myLabel.text = currentExp + “/” + expRequiredForNextLevel;

and voila, you can update them in Update, but i normally always try to only update them when their value changes.