I was asked the other day by a colleague how easy it would be to start developing a game for Windows Phone from scratch. After explaining him that developing a game for Windows Phone essentially means developing a game for Windows 7, Windows 8 and XBox 360 at the same time, I decided not to describe how easy it is but to actually show him. I also timed myself. He had seen MonsterUp on the web, and was curious how it would be possible to simulate gravity , so the challenge was to make a ball bounce on the screen. I already had Visual Studio and XNA installed on my computer, but if you want to follow this and see how easy it is by yourself, you can download the free tools here. With a simple installation you will have everything you need including a free version of Visual Studio and a phone emulator. You can use these tools to develop for Windows Phone, XBOX 360 and Windows with little or no changes to the code.
So back to our bouncing ball tutorial. Consider this a “Hello World” for game development in XNA and Windows Phone. I guess I should mention that knowledge of Object Oriented programming is required here as well as some C, C++ or C# knowledge. We use C# for XNA.
Launch Visual Studio and choose to create a new Windows Game (File->New->Project). Name it whatever you want. I named mine “Gravity”.
Download a ball texture. I have one here for your convenience. Put it inside the Content directory that exists in your solution directory (which you created before). Drag and drop it on the Content section, in the Solution explorer of your solution. Your solution explorer should look like that:
If you click on the ball.png you will see that it has been assigned an automatic asset name “ball”. This is how we will recognize it when we load it in the game.
Now double click on Game1.cs on the Solution Explorer. This is the main game file which is automatically created for you. In here, there are a few important functions, which are also created automatically for you. One of them is called “Update”. This is called automatically and as fast as possible by XNA. Another is called “Draw”. Also called automatically, but depending on how heavy your game is, it may skip its run (in the default configuration) if the system it runs on cannot handle the load. This is called frame skipping. The important thing is that within the Update function you update the game logic (sprite movements, AI etc.) while in the Draw function you … well… draw stuff on the screen :)
Anyway, back to our ball thing. After “SpriteBatch spriteBatch” near the beginning of the file, add the following lines:
Texture2D ballTex;
Vector2 ballPosition;
Vector2 ballVelocity;
The first one creates an object which holds graphics (or texture) data. The other two are Vector2 objects, which essentially holds two float numbers. We will use the Vector2 objects to hold the position and velocity of the ball (duh).
In the LoadContent function (which is called once in the beginning of the game to load stuff) add the following line (after spriteBatch = new SpriteBatch(GraphicsDevice);)
ballTex = Content.Load<Texture2D>(“ball”);
With this small line, you have actually loaded the ball texture in the ballTex object. The Content object handles the loading depending on the file type (in this case, a .png file is loaded on a Texture2D object).
In the Update function, before the base.Update(gameTime) add the following lines:
ballPosition += ballVelocity;
ballVelocity.Y += 0.1f;
if (ballPosition.Y > 100)
{
ballPosition.Y = 100;
ballVelocity = -ballVelocity;
}
These lines update the ballPosition (by adding a Vector2 to another), simulates gravity (by adding a float to the Y component of the velocity – so the gravity pulls the ball towards the bottom of the screen) and also handles bouncing (if the ball moves beyond 100, reverse the ballVelocity and return the ball to the “ground”).
Finally, in the Draw function, add these lines before base.Draw(gameTime):
spriteBatch.Begin();
spriteBatch.Draw(ballTex, ballPosition, Color.White);
spriteBatch.End();
I’ve also changed the background color to Black, but this is optional.
Believe it or not, we are done! With 12 lines of code, we have a perfectly bouncing ball. Not really a game, but you get the point. Hit F5 and watch your little ball bounce away on your Windows PC.
And now for some XNA magic. The challenge was to create a Windows Phone game that does exactly that, not a Windows game. No problem! All you have to do is right click on “gravity” (the one with the Windows flag next to it) inside the Solution Explorer and choose “Create Copy of Project for Windows Phone”. Choose Windows Phone 7.1 and click OK. This creates the necessary files for a Windows Phone project but keeps the same source files which are shared between the Windows project and the Windows Phone project. Now right click on the Windows Phone Copy of gravity and select Set as Startup Project. Hit F5. This should launch the emulator and run your game. No code changes (you may need to rotate the emulator using the rotate button on the left to see this properly).
This is just a simple example, but you get the idea of how powerful this stuff is. You can improve the physics (or use the excellent Farseer library), you can include nice visual effects, a way of actually interacting with the game, menus, sprites etc. but if you can create a bouncing ball in 5 minutes you can see how easy this will be.
Here is the final solution if you are too lazy to type 12 lines (or you otherwise get stuck somewhere).
