Click to Rate and Give Feedback
MSDN
MSDN Library
 How To: Display a Scoreboard for th...
Collapse All/Expand All Collapse All
How To: Display a Scoreboard for the XNA Framework Application

March 22, 2012

This topic demonstrates how to write text to the screen of an XNA Framework application. In the preceding topics of this series, the game infrastructure and logic was created. Detection of the user tapping the square that bounces around the screen was also implemented. This hit, or collision, count is the user’s score. We also added multiple levels to the game. Now that we have all these pieces in place, we add the ability to show a scoreboard for the game. The scoreboard is used to display the current score and the current level on the screen.

Before continuing with this step, you should complete the following topics.

  1. How to: Create an XNA Framework Application

  2. How To: Add Collision Detection to the XNA Framework Application

  3. How To: Add Levels to the XNA Framework Application

NoteNote:

The steps in the following procedure are for Visual Studio 2010 Express for Windows Phone. You may see some minor variations in menu commands or window layouts when you are using the add-in for Visual Studio 2010 Professional or Visual Studio 2010 Ultimate.

To display game progress, a scoreboard is added to the game that will show on the screen the current score and the current level being played.

To display a scoreboard for the game

  1. Add a new class to the WindowsPhoneGame1 project by selecting the Project | Add Class menu command. The Add New Item window will be displayed. Select Class in the list of items to add and type Scoreboard.cs in the Name field. Click Add to add the class to your project. A new class named Scoreboard.cs is now added to the project.

  2. Open the Scoreboard.cs file and add the following using directives to the top of the file.

    C#
    using Microsoft.Xna.Framework;
    using Microsoft.Xna.Framework.Graphics;
  3. Insert the following code into the body of the Scoreboard class. This code defines a scoreboard consisting of two text fields, one for the current score and one for the current level. The positions of these fields on the screen are defined using the scorePos and levelPos vectors, defined in the following code. A variable, _font, is defined to store the font to be used in rendering the text to the screen. The class contains two properties, Score and Level, for setting the game’s score and level. The font used to render the text is passed to the class in the Scoreboard constructor. Finally, the scoreboard class contains its own Draw method to render the current score and level, at the defined positions on the screen.

    C#
            private Vector2 scorePos = new Vector2(20, 40);
            private Vector2 levelPos = new Vector2(20, 60);
    
            private SpriteFont _font;
    
            public int Score { get; set; }
            public int Level { get; set; }
    
            public Scoreboard(SpriteFont font)
            {
                _font = font;
            }
    
            public void Draw(SpriteBatch spriteBatch)
            {
                spriteBatch.Begin(SpriteSortMode.BackToFront, BlendState.AlphaBlend);
                spriteBatch.DrawString(_font, "Score:" + Score.ToString(), scorePos, Color.Black);
                spriteBatch.DrawString(_font, "Level:" + Level.ToString(), levelPos, Color.Black);
                spriteBatch.End();
            }

    Now that a class is defined to manage writing scores to the screen, it will be called from the main Game1 class in the following steps.

  4. In the Solution Explorer, right-click the Content node, in this example named WindowsPhoneGame1Content (Content), and select Add | New Item. In the Add New Item window, select Sprite Font and then click Add. A new font object, named SpriteFont1.spritefont will be added to the project.

  5. In Game1.cs, add the following variable to the top of the class. This variable will be used to store the instance of the Scoreboard class that will be used by the game.

    // Display the score and the level on the screen.
    Scoreboard scoreBoard;
    
  6. In the Game1 class, add the following code at the end of the LoadContent method. This constructs the Scoreboard instance and initializes the Score and Level properties. The SpriteFont passed to the Scoreboard constructor is the name of the font that was added in the previous step.

    C#
    // Create the scoreboard and set the initial level and score values.
    scoreBoard = new Scoreboard(Content.Load<SpriteFont>("SpriteFont1"));
    scoreBoard.Level = currentLevel;
    scoreBoard.Score = collisionCount;
  7. In the CheckForTouchCollision method, add the following line of code below the line where the collisionCount is incremented.

    C#
    scoreBoard.Score = collisionCount;
  8. In the ResetGameCounters method defined earlier, add the following lines of code. This resets the Score and Level properties.

    C#
    scoreBoard.Score = 0;
    scoreBoard.Level = currentLevel;
  9. In the Draw method in the Game1 class, add the following line just before the call to base.Draw(gametime) is made. This updates the scoreboard when the game draws itself.

    C#
    // Call the Draw method on the scoreBoard object to update the scoreboard.
    scoreBoard.Draw(spriteBatch);
  10. Build the solution by selecting the Build | Build Solution menu command. The project should build without any errors. You can open the Error List window, if it is not already open, by selecting the View | Error List menu command. If there are errors, review the steps above, correct any errors, and then build the solution again.

  11. On the standard toolbar, set the deployment target of the application to Windows Phone Emulator .

    Target on Standard Toolbar selecting emulator

  12. Run the application by selecting the Debug | Start Debugging menu command. This will open the emulator window and launch the application. You will see a graphic bounce around the screen. You will also see a scoreboard in the corner of the screen. When you tap the moving square, the score will increase. Every time you reach the score of five, the level will change. This results in the square moving faster. The game has three levels. When you reach level three you can repeat level three.

  13. If the emulator times out into the lock screen, you can unlock it by clicking at the bottom of the screen and swiping upward.

  14. You can set debug breakpoints in the code by placing the cursor on the desired line of code and selecting the Debug | Toggle Breakpoint menu command.

  15. To stop debugging, select the Debug | Stop Debugging menu command.

At this point, the game has multiple levels and a scoreboard, which makes it easier to see what score and level that the player has at any time during the game. The next topic in this series describes how to add a trial experience to this game, such that the user is limited to playing only level one if the game has a trial license.

How To: Add a Trial Experience to the XNA Framework Application

© 2012 Microsoft. All rights reserved. Terms of Use | Trademarks | Privacy Statement
Page view tracker