FlatRedBallXna:Tutorials:FlatRedPong Tutorial – Part 3


This tutorial series will show you how to create a simple but complete pong clone.
In this part of the series you will learn to organize the game in Screens (create a menu screen, add a popup screen), add a pause mode to the game and make mouse based collision detection.

Adding a new Screen

Since the game is nearly feature-complete after the second part of this tutorial series, you should attach more importance to how your code is organized. At the moment everything is placed in a single code file. That’s fine for the beginning but will be a pain when your project grows.

Furthermore there should be a frame to the game. The game should start with a menu screen where you can start the game. After finishing the game, the menu screen should appear again.

To convert the game into a Screen you need to learn how to create Screens. You will learn that in the following tutorial chapter “Create a template”: Screen:How to use Screens

After downloading the template, create a new Screen named GameScreen and add it to your project.

Note: If you at a new screen for the first time, it may be added to your projects root directory. The template added a new directory called “Screens” to your project. You should move your newly created file GameScreen.cs there also.

Note: If you had to move the file, the generated Namespace could be wrong. The Namespace should be

You may need to change it.

Converting the game to GameScreen

After creating the new GameScreen class, move all logic from the game to the new class.
First you should copy all class variables (the Sprites, scores, texts, game over flag) to the top of the new class.
Next move all the initialization code from the Initialize()method of the game to the Initialize()method of the GameScreen.

Be careful: If you add a new screen for the first time, it may be added to your projects root directory. The template added a new directory called “Screens” to your project. You should move your newly created file GameScreen.cs there also.

Your games Initialization() method should be very short by now:

Now move all the update logic from the games Update() method to the GameScreens Activity() method.

Your games Update() method should also be very short:

Since the method performing all the update tasks is called Activity() in the Screen class, the call to base.Update(gameTime) in the game over handling must be changed to base.Activity(firstTimeCalled).

Also copy all the created private methods over to the screen class:

  • HandleInput()
  • CheckCollisions()
  • SetSpriteCollision(Sprite sprite)

Note: If your code does not compile you may have to add some using statements at the top of your code. By pressing <Shift> + <Alt> + <F10> when your cursor is on the unknown type you can let Visual Studio do thos work for you.

Now our game screen is complete. We just need to add it to the ScreenManager.

Add the following code to the games Initialize() method:

You also have to clean up your objects since you use the Screen. But this is managed by the Screen class.

Just add all your Sprites and Texts to a specific list:

You should place these statements into the Initialize() method of the GameScreen to the according blocks in the code. The objects in these lists will be destroyed when the Screen is destroyed.

Compile and run the code. When everything was moved correctly the game should work in the same way as before. But your code is more organized now.

Screen FlatRedPong Tut2 1.png

Adding a menu screen

Create another Screen named MenuScreen and add it to your project.

You will need a background and a button graphics. Again you can create your own graphics or you take these:

Flp Background.png

In the menu Screen there will be two buttons:

  • Start new game
  • Exit game

There will also be a tip text for each button which explains what it does.

Add the following variables at class Scope:

Now initialize these variables in the Initialize() method:

Nothing really new here. The sprites and text are initialized, the position, collision and color are set and the objects are added to mSprites and mTexts list for automatic removal.

Note: You may copy the method SetSpriteCollision(Sprite sprite) from the GameScreen to the MenuScreen.

A better way to do this task is to create a class MyScreen (derived from Screen) and implement the method there. All special Screens (like GameScreen) will derive from MyScreen.

Another way of centralize a method like this is to create a static helper class.

Since the new screen should be seen on startup, you have to add it to the ScreenManager in the games Initialize() method:

Compile and run the code. You will see the new menu screen on startup.

Screen FlatRedPong Tut3 1.png

Now some logic is needed in the screen. First the game should be started again.
Add the following code to the Activity() method:

As you can see, the update handling will be put in an own method again.

Create the method:

Lets take a look at the code. First all variables that will be set later are reset. Then it will be checked if the mouse “is on” the exit buttons collision rectangle. If it is, the text color of the “Exit Game” text is set to red. Furthermore a display text for the tip text is set.

Since the mouse is on the exit button it is checked if the left mouse button is pressed. If it is, the method ExitGame() is called which should return to the menu screen.

The same handling is performed for the “New Game” button, but another tip text is set and the method StartGame() is called which should move to the game screen.

Add the both methods called above at the end of the MenuScreen class:

This method calls the games Exit() method using the FlatRedBallServices class.

This method sets the MenuScreens property IsActivityFinished to true and calls the method MoveToScreen(…) to proceed to the GameScreen.

Compile and run the code. When you hover the mouse over the buttons you will see the text color of the button will turn red. Furthermore will there be a tip text next to the buttons.

When you click on the button “Exit” the game will exit. Clicking the button “New Game” will start a new game.

Screen FlatRedPong Tut3 2.png

Adding Pause Function

The last action of this part of the tutorial is to add another Screen to the game. This screen handles a paused game.
Pressing the keys “P” or “Escape” will pause the game.

You will need a background graphics. Again you can create your own graphics or take the one below:

Flp Pause.png

I added the complete text of the screen to the image. So there are not many objects around in the screen.

Note: The Image has a semi transparent gradient from the center to all borders. This will have the effect that you can still see the paddles, ball and score when game pauses.

The initialisation is accordingly simple:

Note: If you copied the code for MenuScreen and PauseScreen, then you will set the property

To have them work properly, you have to add some more lines of code:

This will disable the FRBs own mouse cursor.


This will hide the mouse cursor in the game.

Since the PauseScreen will be used as a “PopupScreen”, you need to clean it up on your own:

Now the PauseScreen can be called if the defined keys are pressed during the game.

Add the following code at the end of the Activity(…) method of the GameScreen:

The collision checks and the input handling is only done, if not in pause mode. You have to add the variable “pause” on class scope (it’s a bool type).

Before the pause flag is checked, the method HandlePauseMode() is called.
The method looks like this:

There are two parts in this method:

  1. Game is running

    Then the keys “P” and “Escape” are checked. When they are pressed, pause flag is set. If pause is set afterwards, the PauseScreen will be loaded as a Popup and the game is paused by calling the method PauseGame().

  2. Game is paused

    The keys “Space” and “Escape” are checked. When “Space” is pressed, the method ContinueGame() is called to continue the game. When “Escape” is pressed, the PauseScreen is set to null and the MenuScreen is called using the MoveToScreen(…) method

How you can see, the whole pause logic is in the game, including the PauseScreen logic.

To pause the game the ball is stopped. To continue the game, the balls velocity will be reset.
Let’s take a look at the two methods:

To pause the game, the balls velocity is stored in a new class variable. Then the velocity of the ball is set to 0 and the pause flag is set to true.

To continue the game, the balls velocity reset from the class variable. Then the pause flag is set to false. The initialization of the save variable is not necessary, but good style.

You need to define the variable ballVelocity of type Vector3 at class scope.

Compile and run the code. Now we have a comfortable, pausable pong game!

Screen FlatRedPong Tut3 3.png

Did this article leave any questions unanswered? Post any question in our forums for a rapid response.