Introduction

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.

Getting Started

Building and Running TinyTennis

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:

Press F5 to build and start the game under the debugger.

The game launches and you can control the left bat using the Q and A keys.

Game Development Concepts

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:

It's rectangular.

It can have a background color.

It can be positioned at specific positions on the screen.

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 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.

publicoverridevoid Draw(){//Move the control to the correct location Control.Location = new Point((int)(Location.X + .5f), (int)(Location.Y + .5f));//and redraw it Control.Refresh();}

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)

Code structure

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.

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:

Simple AI (Artificial Intelligence)

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:

Calculate the exact position the ball will end up and move the bat there. This involves some math but is simple to do.

Track the ball by moving the bat towards the current Y position of the ball. There is no math involved, but as long as the ball speed is not greater than the bat speed this will always work.

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:

The computer doesn't start moving the bat until the ball is close to the computer side of the screen. How close can be varied to make the AI smarter or dumber.

The computer doesn't track bounces — it will look which way the ball is heading and move towards it, but a last-minute bounce may throw it off.

Just like a human, sometimes the computer will over- or underestimate how well it tracks the ball. This is implemented by adding a random offset into the movement that can, once again, be varied to change the skill level.

Extending TinyTennis

Add a start-up splash screen that allows the player to choose between one and two players.

Add an additional bat for each player by creating an extra picture box, and then creating additional Bat objects.

Add multiple balls. The game play will need to change a little. For example, do you want to pause the game when a point is scored? Or, do you want to score the point and make a new ball appear?

Since the sprites are just picture boxes, you can set the background image property to give the game a whole new look and feel. Remember that the collision detection is done based on the rectangular shape of the picture box; if the image does not fill the
picture box, it might look odd when the ball bounces.

The Discussion

near the top of this page is a link that says 'C# Download' which is a download of a .vsi file that installs a .zip file containing the source. Pay attention to where it installs the .zip file, to make sure you can find it and unzip it. On my PC it put it in a Visual Studio 2005 templates directory.

I downloaded unzipped and opened the tiny tennis solution using visual c# 2008 express edition. This required a conversion. After compilation I got errors and warnings, which I've pasted in at the bottom of this. I hope I'm not just being a greenie, and I'm bringing up a relevant question but in either case, hopefully you will still have an answer.

Thank you

Following are the warnings and error messages:

Warning 1 Load of property 'RootNamespace' failed. The string for the root namespace must be a valid identifier. TinyTennis

Started a new project with it as the template and it compiled just fine. I didn't even have to convert it. To get it as a Template, I clicked on "Visual C#" in my project types in the "New Project" dialog.