Displaying a countdown timer graphically as a pie-chart style clock

Another way to display a timer graphically is as a kind of clock, so the player can see the time running out. The following example shows elapsed time as the red portion of the circle:

Displaying a countdown timer graphically as a pie-chart style clock

Getting ready

In the 0423_04_09 folder, you'll find a series of pie-chart PNG images.

How to do it...

To display a pie-chart style graphical countdown timer, please follow these steps:

  1. Attach the following script class to the Main Camera:
    // file: CoundownClock.cs
using UnityEngine;
using System.Collections;

public class CoundownClock : MonoBehaviour 
{
  public int timerTotalSeconds = 5;
  
  public Texture2D time0;
  public Texture2D time10;
  public Texture2D time20;
  public Texture2D time30;
  public Texture2D time40;
  public Texture2D time50;
  public Texture2D time60;
  public Texture2D time70;
  public Texture2D time80;
  public Texture2D time90;
  public Texture2D time100;

  private int countdownTimerDelay;
  private float countdownTimerStartTime;
  
  private void Awake(){
    CountdownTimerReset( timerTotalSeconds );
  }
  
  private void CountdownTimerReset(int delayInSeconds){
    countdownTimerDelay = delayInSeconds;
    countdownTimerStartTime = Time.time;
  }
    
  private void OnGUI(){
      float propertionRemaining = (CountdownSecondsLeftFloat() / timerTotalSeconds);
      GUILayout.Label( TimeRemainingImage(propertionRemaining) );
    }

  private float CountdownSecondsLeftFloat(){
    float elapsedSeconds = Time.time - countdownTimerStartTime;
    float secondsLeft = countdownTimerDelay - elapsedSeconds;
    return secondsLeft;
  }
  
  private Texture2D TimeRemainingImage(float propertionRemaining)
  {
    if( propertionRemaining > 0.9 ){  return time100;  }
    else if( propertionRemaining > 0.8 ){  return time90;  }
    else if( propertionRemaining > 0.7 ){  return time80;  }
    else if( propertionRemaining > 0.6 ){  return time70;  }
    else if( propertionRemaining > 0.5 ){  return time60;  }
    else if( propertionRemaining > 0.4 ){  return time50;  }
    else if( propertionRemaining > 0.3 ){  return time40;  }
    else if( propertionRemaining > 0.2 ){  return time30;  }
    else if( propertionRemaining > 0.1 ){  return time20;  }
    else if( propertionRemaining > 0 ){  return time10;  }
    else{	return time0;  }
  }
}
  2. With the Main Camera selected in the Hierarchy view, drag each of the images into the Inspector view for the corresponding public variable.

How it works...

This recipe is a combination of the basic countdown timer and the display of images for floats and ranges. Key aspects of this recipe include:

  • The total number of seconds needs to be known by the OnGUI() method, so that a normalized proportion of time remaining can be calculated (in the range 0.0 – 1.0).
  • The seconds left needs to be returned as a float, so the clock will work fine for short time intervals or long ones, and so the CountdownSecondsLeftFloat() method returns the remaining seconds as a float rather than an integer value, as in the previous recipes.
  • The TimeRemainingImage() method takes in a float argument in the range 0.0 – 1.0, and uses if statements to return the image corresponding to the proportion of the total seconds remaining in the countdown.

There's more...

Here are some details you don't want to miss:

Creating your own images with a spreadsheet

The pie-chart clock style images were created using a spreadsheet, and by just changing the two values. Stacked bar charts are another useful spreadsheet graph for timer or health graphical images.

See also

  • The Displaying a digital countdown timer recipe.
  • The Displaying a countdown timer graphically (5, 4, 3, 2, 1 – blast off) recipe.
  • The Displaying images for corresponding floats and ranges recipe.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.227.79.241