Gravity Tutorial – Windows Phone 7 Version – Part II

Assuming you’ve gone through Part I, you now have a ball showing up at location 100, 100 on the simulator screen. Now let’s get it moving. Here’s the plan: we’ll set up another Vector2 for velocity, and add that to position on each frame, then check to see if we’ve hit any walls and bounce off them.

We’ll jump ahead hear and add a few more variables that we’ll eventually need, just so they’ll be there. Again, right with the rest of the class variables:

[csharp] public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
Texture2D ball;
Vector2 position;
Vector2 velocity;
float ballSize = 40;
float gravity = 500;
float bounce = -1.0f;
[/csharp]

We can initialize the floats as we create them, and in LoadContent, we’ll initialize the velocity.

[csharp]protected override void LoadContent()
{
// Create a new SpriteBatch, which can be used to draw textures.
spriteBatch = new SpriteBatch(GraphicsDevice);

ball = Content.Load(“ball”);
position.X = 100;
position.Y = 100;
velocity.X = 150;
velocity.Y = 175;
}[/csharp]

Note that the velocity values may seem high if you’re using to doing things on a pixels-per-frame basis. Here, we’ll be multiplying by the elapsed time that has passed since the last frame, so we’re really taking pixels-per-second here. This is also why the gravity value is so high.

Now we need to simply add the velocity to the position and check the boundaries. If you’ve read my AS3 Animation book, this should be old hat to you. In fact, if you’ve done any programmatic animation, this should be all very familiar, so I’m not going to go through it line by line, just touch the highlights. This code goes, of course, in the Update method.

[csharp]protected override void Update(GameTime gameTime)
{
// Allows the game to exit
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
this.Exit();

float width = graphics.GraphicsDevice.Viewport.Width;
float height = graphics.GraphicsDevice.Viewport.Height;

float elapsed = (float)gameTime.ElapsedGameTime.TotalSeconds;
velocity.Y += gravity * elapsed;
position += velocity * elapsed;

if (position.X + ballSize > width)
{
position.X = width – ballSize;
velocity.X *= bounce;
}
else if (position.X < 0) { position.X = 0; velocity.X *= bounce; } if (position.Y + ballSize > height)
{
position.Y = height – ballSize;
velocity.Y *= bounce;
}
else if (position.Y < 0) { position.Y = 0; velocity.Y *= bounce; } base.Update(gameTime); }[/csharp] First we get the width and height of the screen. It's a bit convoluted, but there it is. As an aside, if Objective-C likes long-winded property and method names, C Sharp seems to like digging into sub-objects to get at deeply nested properties. That violates a principle or two, but we'll let it slide. Next we get the elapsed time since the last Update call. Update is passed a GameTime object. We can go diving into that to get the elapsed time in seconds and multiply the velocity by that before adding it to the position. From there, it's all basic motion code. Add gravity to velocity, velocity to position, check the left, right, top, and bottom edges, reset position if the ball has gone past any of them, and reverse the velocity on the specified axis. And there we have it. A bouncing ball. No interaction with touches or accelerometer yet, but this should be enough to get you started. I'll try to add more features to this in the next day or two.

This entry was posted in Windows Phone 7. Bookmark the permalink.

Leave a Reply