MGS: Pong (Pages 1-3)
In part one of the mini game article series, I am going to show you how to create a very simple Pong game from scratch. The tools you will need include Photoshop (or any other painting program such as Paint.NET or even MSPaint), Visual C# 2005 Express, and of course the Xna framework.
First we need to create our project, to give us a home base for all of our work. Go ahead and fire up C# Express and create an empty windows project. I am going to call mine MGSPong for lack of any imagination or any better title. Once the project has been created, add a folder called “Content” and then another underneath that called “Textures.” This is where we will store out art, no matter how bad it may be!
Okay, so now we need some art for our project. I am going to use Photoshop and the “PNG” format to allow for transparency, but using the Magenta color in MSPaint and saving to “BMP” will have the same effect. Specifically, I will be using Photoshop CS2 as the following screenshot shows. Here I have a new image opened with a width of 30 pixels and a height of 100 pixels.
Using the shape tool, I am going to draw a rectangle with some predefined shading. To do this, I first select the rectangle from the toolbox, and then on the top bar I select the style I want. I have decided to go with a fairly white style so I can color the object in our game with greater ease. Since this is going to serve as the player’s paddle, we want to be able to change the color of it without having to recreate the texture. When we draw the paddle, we will color it by adding color on top of what color exists in the texture already. Because of this, very dark values for each channel (Red, Green and Blue) will not serve us well. The below screenshot shows the resulting paddle I have made.
You will notice that I have purposefully left space around the square; this is to allow for a border to be put on the outside. To do this, we first have to rasterize the layer (this is a special Photoshop step). You can do this by right clicking the layer and selecting “Rasterize Layer.” You will notice that the border disappears from the rectangle. Now double click the layer to bring up its blending options, and enable stroke. Set the border size to 1, and the color to black.
Once that is done, our paddle is ready to smack some balls! Save the file into the Textures folder you created earlier. If you are using a bitmap (.bmp) format, make sure to have magenta in any place it should be transparent. If you are saving the file with the PNG format, you do not need to do this as long as it can create an alpha channel for you. I have saved mine via Photoshop as “Paddle.png” without the need for any magenta.
Now we can add the file to our project and start using it! In order to add the file to the project, open the Solution Explorer and click “Show All Files” (shown below) to see all the files in the project’s directory. The paddle image file should come up, and when it does, right click it and select “Include In Project.”
In the next section of this article we will get into coding the actual game, learning about modular design through the use of classes.
