If you came here for a tutorial on XNA and game programming, look no further. What better way to learn than to create a simple Pong Game for Windows Phone 7!
The first thing that you are going to do to is to import the assets that we will be using during this tutorial, you can Download them here. Now that you've downloaded the needed tools, let's get our environment set up! This game will be in Landscape mode so place this in your Game1 Constructor:
graphics.SupportedOrientations = DisplayOrientation.LandscapeLeft;
graphics.IsFullScreen = true;
graphics.ApplyChanges();
Now Create 3 variables for our Textures:
private Texture2D backgroundTexture;
private Texture2D paddleTexture;
private Texture2D ballTexture;
Next go into the LoadContent() Function and load the assets:
protected override void LoadContent()
{
spriteBatch = new SpriteBatch(GraphicsDevice);
backgroundTexture = Content.Load<Texture2D>("pongBackground");
paddleTexture = Content.Load<Texture2D>("paddle");
ballTexture = Content.Load<Texture2D>("ball");
}
Next, lets get something drawn on the screen. What we need to draw are: two paddles, a ball, and the background.
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
spriteBatch.Begin();
spriteBatch.Draw(backgroundTexture, Vector2.Zero, Color.White);
spriteBatch.Draw(ballTexture,
new Vector2(GraphicsDevice.Viewport.Width/2f-ballTexture.Width/2f, GraphicsDevice.Viewport.Height/2f-ballTexture.Height/2f),
Color.White);
spriteBatch.Draw(paddleTexture, new Vector2(0, GraphicsDevice.Viewport.Height/2f-paddleTexture.Height/2f),
Color.Red);
spriteBatch.Draw(paddleTexture, new Vector2(GraphicsDevice.Viewport.Width-paddleTexture.Width, GraphicsDevice.Viewport.Height / 2f-paddleTexture.Height/2f),
Color.White);
spriteBatch.End();
base.Draw(gameTime);
}
Let’s break this code down! What we did here was center the ball and the paddles. Debug the code and now preview your work.
So what have you learned? Now you know how to load assets in XNA, draw and position them on the screen.
Before I end this tutorial, how about we get one of the paddles moving using the UP & DOWN keys... Let us refactor the code. We will need to create a variable so we know the position of the player paddle.
private Vector2 playerPaddlePosition;
Now instantiate it in the initialize function:
protected override void Initialize()
{
base.Initialize();//important to call this before you set the vector
playerPaddlePosition = new Vector2(0, (GraphicsDevice.Viewport.Height - paddleTexture.Height) / 2f);
}
Now replace:
spriteBatch.Draw(paddleTexture, new Vector2(0, (GraphicsDevice.Viewport.Height-paddleTexture.Height)/2f),
Color.Red);
with:
spriteBatch.Draw(paddleTexture, playerPaddlePosition,
Color.Red);
We are ready to move the Paddle! Create a HandleKeyboardPress function:
private void HandleKeyboardPress()
{
var state = Keyboard.GetState();
if(state.IsKeyDown(Keys.Up))
{
playerPaddlePosition.Y -= 10;
}
if(state.IsKeyDown(Keys.Down))
{
playerPaddlePosition.Y += 10;
}
playerPaddlePosition.Y = MathHelper.Clamp(playerPaddlePosition.Y, 45, 450-paddleTexture.Height);
}
Call it in the Update function:
protected override void Update(GameTime gameTime)
{
// Allows the game to exit
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
this.Exit();
HandleKeyboardPress();
base.Update(gameTime);
}
So all we are doing is either decrementing or incrementing the Y value by 10 and are using the MathHelper.Clamp method to restrict the value of movement between 45 and 350. Why these two values? Well if you open the pongBackround.png and check what the Y value of the black borders are they will be 45 and 450.
Now since, XNA draws the origin of the image at (0,0), we need to take the height into consideration for the Max value. We need to subtract 450 from the height (100 px).
If this part is unclear, don't subtract the height and the paddle will go right through and only stop when the paddles local coordinate of Y=0 (Top left corner) touches the world coordinate (Screen) of Y=450.
Here is the video of what we made:
Download the Project Here.
Stay tuned for Part 2, I will show you how to get the ball moving and colliding with the player paddle and we will implement the CPU AI. Part 3 will do the scoring, screen menus (play game, options) and finish off whatever needs to be done.
Tags: WP7,
XNA,
Box2D
Categories: Windows Phone 7 |
WP7 |
XNA