XNA 4.0 Game development blog
By Brommel 19 Comments
Pong..The Adventure Begins!
Super Awesome Tutorial
Last night I was able to find a really nice tutorial to get me started using XNA. After going through the 2d sprites tutorial I felt making a pong game would be a cinch.
Breaking Down Pong
What objects does Pong have that I need to make sprites for so I can draw them XNA style? A bar and a ball. So I just simply created a bar and ball in MS Paint and added them to my projects content. Now we need to draw them. XNA makes this very easy. All you need to do is load your content into a texture and then draw it whenever the Draw() function is called.
Of course I created classes for the bar and ball called Bar and Ball (i am so creative with class names). These classes have fields for their position, texture, and the viewport that they are being draw in (this is the Window the game is in). In these classes we create public drawing method to be called whenever the object needs to be drawn. It looks like the following:
public void Draw(SpriteBatch spriteBatch)
{
spriteBatch.Begin();
spriteBatch.Draw(Texture, Position, Color.White);
spriteBatch.End();
}
So all we have to do is call that function whenever we want our object to be drawn. Now I want to get some movement in the ball. To do this, I added another Vector2 field to the Ball class called Velocity. And we move the ball like so:
public void Update()
{
Position += Velocity;
}
That update function is called whenever we want to update the position of the Ball object. The ball now will move around the around the screen based on the values we give to Velocity. However, we have yet to add collision detection, so I added some detection in the the Update code for when the ball hit a wall.
I then wanted to start moving the bar around using the arrow keys on the keyboard. Just as the we did with the ball we define an Update() method in the Bar class that will update the position of the bar whenever we hit an arrow key. The final result is something that looks like this:
All in all this took me about 1.5 hours to do, including the time reading the tutorials. Tonight I will implement a second bar and restrict their movement to only up and down against the sides of the Viewport. Also I need to add collision detection for when the ball hits a bar, and some sort of scoring mechanic for when the ball gets past the bar. We'll see what I can get done by tomorrow.
Day 2
I got a working clone of Pong now. The collision detection for the bars is working great. The scoring is working. I still need to add sound and a score limit so a winner is declared and a new game starts. Also should implement a pause so you can walk away without having to restart the game.
To do the collision detection for the bars I decided to create a separate class to handle when the ball hit the bar. The class is shown below:
I am not completely happy with the way this is implemented. A lot of repeating code and it just doesn't look good. I will probably redo this later. However it was late when I wrote it and I just wanted to get it working before I slept. In retrospect I probably made more work for myself later on and shouldn't have rushed and should have thought more carefully about the code design.
The only other new feature I added was a class to handle scoring and to keep track of each players current score. This Scorer class also draws the players scores.
Xna makes this really simple. Drawing strings works the same was as drawing the bars and ball. The update and draw code for the Scorer class is below. Tonight I will look into the different font types available for the SpriteFonts. Currently I just have it to whatever the default value was whenever you create a new SpriteFont content object.
The adding a second bar and handling their movement was trivial. I all had to do was create a second object of the Bar class and tell it to update and draw in the main game loop. Tonight I will add sound, pausing, new game start when one ends, and maybe computer AI so I can play by myself and not have to control both bars at the same time :)
Oh yeah here is a screen shot of what it looks like playing now.
