Time for action – Flex those GUI muscles

Let's take a trip down memory lane to the previous chapter, where we became OnGUI ninjas. We'll use the GUI techniques we already know to display the two bars, and shrink the foreground bar as time runs out.

1. In the DoCountdown function of the ClockScript, calculate the percentage of time elapsed by comparing the startTime and the timeRemaining values:

   function DoCountdown()
   {
     timeRemaining = startTime - Time.time;
     percent = timeRemaining/startTime * 100;
     if (timeRemaining < 0)
     {
       timeRemaining = 0;
       clockIsPaused = true;
       TimeIsUp();
     }
     ShowTime();
   }

2. Store the initial width of the clockFG graphic in a variable called clockFGMaxWidth in the Awake function:

   function Awake()
   {
     startTime = 120.0;
     clockFGMaxWidth = clockFG.width;  
   }

3. Create the built-in OnGUI function somewhere apart from the other functions in your script (make sure you don't create it inside the curly brackets of some other function!)

   function OnGUI()
   {
     var newBarWidth...