Upgrade Your Game: TinyTennis (C#)
- Posted: Oct 31, 2006 at 2:50 PM
- 14,636 Views
- 25 Comments
Loading User Information from Channel 9
Something went wrong getting user information from Channel 9
Loading User Information from MSDN
Something went wrong getting user information from MSDN
Loading Visual Studio Achievements
Something went wrong getting the Visual Studio Achievements
|This article is a part of Upgrade Your Game series of tutorials. It walks you through the game architecture components for our tribute to Pong!, which we'll call TinyTennis.|
Time Required: 1-3 hours
Visual C# Upgrade Your Game Series
Welcome to the Upgrade Your Game series of tutorials. There are four tutorials, each covering how to write a simple computer game using Visual Studio Express products. Though the games are simple, each one teaches some game development techniques and builds on the last to improve your skills. The skills can be applied to more complex games including 3D games using Microsoft DirectX.
Let's begin by creating a really simple game like Pong!, which uses only three moving objects and a straightforward gameplay and scoring technique. Given that you probably play games thousands of times more complex than this (such as The Sims or Half Life), you may initially dismiss this exercise as a waste of time; however, it's a great way to learn some of the fundamental concepts of video games in just a few lines of code. If these techniques are already familiar to you, then you may be interested in the MSDN game development webcasts, which cover 2D and 3D game development with Managed DirectX.
This tutorial walks you through the game architecture components for our tribute to Pong!, which we'll call TinyTennis.
You are also free to use the source code as the basis for your own projects, and to share your work with others or upload it to the Internet.
Note: This documentation assumes that you have a basic knowledge of programming concepts and the Visual Basic environment. You can learn more about these topics in the product documentation by clicking Help on the menu bar, and then clicking Contents, Index, or Search. You can also access Help by positioning the mouse cursor on language keywords or user interface elements such as windows or dialog boxes, and pressing F1.
Once your project is loaded into the Visual Basic environment, you can compile and run the program in one step.
To build and run TinyTennis:
The game launches and you can control the left bat using the Q and A keys.
If you are new to 2D game development, check out the 2D Game Primer (Visual Basic).
For TinyTennis, you'll need three very simple rectangular sprites that can be moved around the screen. In order to keep things simple for the first game (and because I recognize that a lot of .NET developers come from a Windows Forms background), I have chosen to use PictureBox controls to represent the sprites. A picture box has all the characteristics needed for this simple game:
Using a picture box is not something you would do in a real computer game, but it's something that is very simple to get started with and hopefully something you already know about. In the next game, you will replace the picture box with real graphics.
The base class definition is:
public class Sprite
public PointF Velocity;
public PointF Location;
public SizeF Size;
The inherited class adds a member for the control.
public class ControlSprite : Sprite
public Control Control;
The inherited class defines how to draw it. Since Windows Forms can only be positioned at integer pixel boundaries, you have to round the sprite positions.
public override void Draw()
//Move the control to the correct location
Control.Location = new Point((int)(Location.X + .5f), (int)(Location.Y + .5f));
//and redraw it
The Windows Forms controls used in this game are created in the designer by dragging picture boxes onto the form. Since the size and position are set in the code, there's no need to position or size them correctly in the designer. All you need to do is name them correctly.
(Click image to zoom)
Just because the game is simple doesn't mean that you should avoid good software engineering practices. This is especially important since you want to create a base on which to build the next two games. And, although Visual Studio Express has some refactoring support, it always helps to get things right from the beginning.
The most important class is the sprite. Sprites have a position and a velocity. Velocity is how fast the position changes in pixels per second. If velocity is 0, then the position will stay the same and you'll have a static sprite. In addition, you need to remember how big the sprite is so that you can work out collisions.
The game loop needs to call each sprite and perform two tasks: update and draw. Since you know the velocity, you can implement the movement part of the animation in the base class. Any complex or additional updates will be handled in an inherited class. For this game, drawing the sprite will be left to an inherited class since there is no general case.
Because I'm using PictureBox controls, I've decided to create an inherited ControlSprite class that can be thrown away in the later examples. ControlSprite sets the position of the control that represents the sprite and calls the RefreshMethod to paint it on the screen.
The Bat and Ball objects inherit from ControlSprite and provide the special processing that each of those require. For example the Bat class changes its velocity based on keyboard presses and AI. The Ball class changes its velocity based on collisions with bats and the edges of the gameplay area.
(Click image to zoom)
As mentioned in 2D Game Primer (Visual Basic), it's important to move the sprites based on time rather than a fixed distance per frame.
The first thing to do is make sure you have an accurate measure of the time. The .NET Framework 2.0 added the StopWatch class, which uses the most accurate measure available on your computer.
private Stopwatch _timer = new Stopwatch();
//Initialise and start the timer
_lastTime = 0.0;
private void TinyTennis_Paint(object sender, PaintEventArgs e)
//Work out how long since we were last here in seconds
double gameTime = _timer.ElapsedMilliseconds / 1000.0;
double elapsedTime = gameTime - _lastTime;
_lastTime = gameTime;
Sometimes animation is based on how far into the game you are; sometimes it's based on how long it has been since the last time around the game loop. Rather than having every object calculate these two values, you do it once and pass it to the Update() function for each object.
The Update method of the Sprite objects and their inherited classes eventually gets called with these times:
public virtual void Update(double gameTime, double elapsedTime)
//Move the sprite based on the velocity
Location.X += Velocity.X * (float)elapsedTime;
Location.Y += Velocity.Y * (float)elapsedTime;
The interesting thing about AI for TinyTennis is actually making the AI do things wrong. It's interesting because normally AI is about making a computer play well. For this game playing, a perfect game is trivial for the computer:
Of course this kind of opponent is no fun to play against, so the AI challenge for this game is making the computer miss the ball in a realistic, human way. I have chosen to take three approaches to this: