Creating a progress bar for game content loading and value status

Creating a progress bar for game content loading and value status

When playing a game, especially for some big games, at the initialization phase, a progress bar will show you the game object loading status and percents. As a time-based game, the progress bar represents the remaining time. Moreover, a Role Playing Game (RPG) often uses the progress bar to present the current life value. A progress bar is a very common control in game development and is easy to use. In this recipe, you will find the inner code for creating a progress bar.

Getting ready

In Windows Phone 7 XNA programming, two methods will let you create the progress bar. One is using the rectangle for drawing the background and forefront. This is simple but not flexible and stylish. If you want to make some innovative and unusual visual effects, the primitives will not meet your needs. The second method will give you much more space to realize your idea for the progress bar. You can use graphic design tool to draw the background and forefront images as you like, then render these images and change the size of the forefront image to comply with the on going percents; even the round or other shapes can be used for presenting the progress status. In this example, we will use the rectangle images (second method) for implementing the progress bar in Windows Phone 7.

How to do it...

The following steps give you a complete guidance to develop a progress bar in your Windows Phone 7 game:

  1. 1. Create a Windows Phone Game project in Visual Studio 2010 named ProgressBar, change Game1.cs to ProgressBarGame.cs and insert a ProgressBar.cs in the project. Then add ProgressBarBackground.png and ProgressBarForefront.png to the content project.

  2. 2. Add a ProgressBar class in ProgressBar.cs to the main project. Add the code to the ProgressBar class fields:

    // SpriteBatch for drawing 2D image
    SpriteBatch spriteBatch;
    // ProgressBar forefront and background images
    Texture2D texForefront;
    Texture2D texBackground;
    // The background and forefront positon
    Vector2 backgroundPosition;
    Vector2 forefrontPosition;
    // The offset of forefront image from the background.
    float forefrontStartOffSetX;
    float forefrontStartOffSetY;
    // Current value of progressbar
    public int Value;
    // The Min and Max values of progressbar
    public int Min;
    public int Max;
    // Percent of current value around 100
    float percent;
    // the actual rendering width of forefront image
    float actualWidth;
    // The direction of progress.
    bool increase = false;
  3. 3. Next, we define the Increase property:

    // The increasing direction
    public bool Increase
    return increase;
    // When increasing, the Value begins from Min
    if (value)
    increase = value;
    Value = Min;
    // When decreasing, the Value begins from Max
    increase = value;
    Value = Max;
  4. 4. The next step is to define the constructor of the ProgressBar class:

    public ProgressBar(Vector2 position, Texture2D forefront,
    Texture2D background, SpriteBatch spriteBatch)
    this.spriteBatch = spriteBatch;
    texForefront = forefront;
    texBackground = background;
    backgroundPosition = position;
    // Calculate the offset for forefront image
    forefrontStartOffSetX = (texBackground.Width -
    texForefront.Width) / 2;
    forefrontStartOffSetY = (texBackground.Height -
    texForefront.Height) / 2;
    // Create the forefront image position
    forefrontPosition = new Vector2(backgroundPosition.X +
    backgroundPosition.Y + forefrontStartOffSetY);
    // Intitialize the Min and Max
    Min = 0;
    Max = 100;
    // Set the increasing direction from high to low.
    Increase = false;
  5. 5. After the constructor, the following method definition is the Update(), so add the method to the ProgressBar class:

    public void Update(GameTime gameTime)
    // If decreasing and Value greater than Min, minus the
    // Value by one
    if (Increase && Value < Max)
    else if (Value > Min)
    // Compute the actual forefront image for drawing
    percent = (float)Value / 100;
    actualWidth = percent * texForefront.Width;
  6. 6. The final step of creating the ProgressBar class is to define the Draw() method:

    public void Draw()
    spriteBatch.Draw(texBackground, backgroundPosition,
    spriteBatch.Draw(texForefront, forefrontPosition, new
    Rectangle(0, 0, (int)actualWidth,
    texForefront.Height), Color.White);
  7. 7. Use the ProgressBar class in our game. First, add the code to the class field:

    // Texture objects for background and forefront images
    Texture2D texForefront;
    Texture2D texBackground;
    // The background image position
    Vector2 position;
    // Progress bar object
    ProgressBar progressBar;
  8. 8. Then insert the initialization code to the LoadContent() method:

    // Load the background and forefront images
    texForefront = Content.Load<Texture2D>("ProgressBarForefront");
    texBackground = Content.Load<Texture2D>("ProgressBarBackground");
    // Initialize the progress bar
    position = new Vector2(200, 240);
    progressBar = new ProgressBar(position, texForefront,
    texBackground, spriteBatch);
  9. 9. Next, insert the code to the Update() method:

    // Update the progress bar
  10. 10. Finally, put the code in the Draw() method:

    // draw the progress bar
  11. 11. Now, build and run the application, and it will run as shown in the following screenshots:

How it works...

In step 2, the texForefront and texBackground are the Texture2D objects that hold the progressBar forefront and background images. The next two variables forefrontStartOffSetX and forefrontStartOffSetY indicate the offset position of forefront from the background; Value stores the progressBar current value; the Min and Max defines the range of the progressBar; percent and actualWidth will be used to calculate and store the current width of the forefront image respectively; the last variable increase represents the direction of the progressBar value increasing.

In step 3, if the Increase value is false, which means it is decreasing, the Value begins from the right with Max. Otherwise, the Value will begin from the left.

In step 4, notice the computation for forefront image offset, we use the background image width minus the width of the forefront image, get the gap between the left sides of the two images, then use the gap value and divide it by 2, get the offset on the X-axis from the background for the forefront image. The offset on the Y-axis is similar. After getting the offset of the forefront image, we set Min to 0 and Max to 100 the value range of progressBar. The last line is to define the increasing direction. False, here, stands for the progress value that will decrease from 100 to 0, right to left.

In step 5, the first part of the Update() method is to change Value by one, according to the increasing direction. The second part is about computing the actual width of the forefront image for rendering.

In step 6, this code draws the background image and forefront image on screen. Notice the third parameter in the Drawing() method for the forefront image. This is a Rectangle parameter, which represents the part of the forefront image for rendering in every frame; it helps you to adjust the size of the forefront image for presenting the value variation of the progress bar.

In step 7, the texForefront stands for the forefront image of the progress bar; the texBackground represents the background image of the progress bar; position defines the progress bar position on the Windows Phone 7 screen; the last variable progressBar is the progress bar object which will perform the different progress behaviors.