Today's Mobile Monday project is a fun little Windows Phone game that lets play with physics and Pirates. How's that for a combination?
Table of Contents
- System Requirements
- Farseer Physics Engine
- Adjusting The Game To 60 Frames Per Second
- Converting Images Into Physical Objects
- The Handle Input Loop
- The Update Loop
- The Draw Loop
- Final Considerations
Ahoy, Mate! In this article we are presenting a Windows Phone game (or at least the beginning of a game...) and hopefully it's going to be lots of fun in the end. But behind of the fun lies the basic technologies needed to build it. I'll present then in steps, and I hope to capture you interest until the end of the article.
"Pirates!" for Windows Phone is a game build in C# and XNA, using Farseer Physics Engine. The idea of the game is largely inspired on and also pays tribute to Rovio's "Angry Birds" game, which reached 500 million downloads at the end of 2011. Angry Birds may have addicted many people around the world, but from my part, I'm not addicted to the playing itself, but to pursuing the pieces needed to build a game like that.
Instead of birds, a cannon full of cannon balls. Instead of pigs, a big pirate ship full of pirates. Your mission here is to aim the cannon and destroy all pirates. (disclaimer: this story has nothing to do with the ongoing "SOPA" and "PIPA" thing...)
Here comes a short video that to give you a glimpse of what we are talking about here:
One thing thing that stood out for me, though simple, was how the author covered some tweaks to help improve the Farseer frame rate;
Farseer Physics Engine
Farseer is a wonderful open source physics engine, based on the original Box 2D open source project (as an aside, the Angry Birds game uses Box2D). The difference is that Box2D is written in C++ (and has been ported to many languages), while Farseer is made with C# aiming Silverlight and XNA. Also, the Farseer website claims this framework has many other features other than the ones provided by the original Box2D release.
Adjusting The Game To 60 Frames Per Second
In order to achieve the maximum frames per second (around 60 fps) provided by WP Mango in your device, you have to change the Farseer source code you downloaded like this:
- Double click the "Samples XNA WP7" solution. Choose the "Upgrade Windows Phone Projects..." to upgrade them all to the latest Windows Phone 7.5 Mango.
- In the constructor of game class, add this event handler:
The article continues from there, through each major area;
Converting Images Into Physical Objects
All dynamic objects in the game are created from the texture images. This is a very nice feature of Farseer engine that makes our life much easier. The farseer built-in functions create a solid object from our labyrinth plain image, provided that we leave the empty spaces with the transparent color, like this:
The Handle Input Loop
The Handle Input Loop is exposed by Farseer Engine and gives us the opportunity to detect and handle the users gestures.
This method is responsible for:
- Detecting the left ThumbStick movement and translating it into cannon movements.
- Detecting the "A" right button and shooting the cannon.
The Update Loop
In XNA framework, the Update Loop is invoked when the game has determined that game logic needs to be processed. This might include the management of the game state, the processing of user input, or the updating of simulation data. By overriding this method, we can add logic which is specific to our Pirates game.
In XNA, The Update method works in combination with the Draw method, and you must take into account that each one has its own specific role. That is, never try to draw sprites inside the Update method, and never ever calculate/update positions inside the Draw method.
The purpose of the Update class here is:
- To calculate the new cloud positions. There are 3 layers of clouds and each layer moves at its own speed.
- To alternate the sea appearance between one of the 4 existing sea textures.
- To move the camera according to the game state transitions (that is, at first the game is showing you the pirate ship, then the camera moves to your ship).
- To update the camera position along the path described by the cannon ball. This is useful to keep track of the game action.
- To control the camera zoom when needed.
- And maybe the most important of all: to update the cannon ball position (along with the smoke trace left while flying)
The Draw Loop
The Draw loop is called by the XNA framework it is time to draw a frame. We override this method to draw all the frames needed for our Pirates game.
This loop handles entirely the presentation part of the game:
- It draws the background texture
- It draws the sky, clouds, sea and ships
- It draws the cannon ball, the cannon and the smoke traces
- It draws the pirates and other objects on the scene.
- It draws the score and high scores.
Let's take a peek at the Solution (which ran and deployed to the emulator the first time for me with no problems);
The game project/code is easily approachable with most of the code in one place, PirateDemo.cs.
This isn't a complete game at this point, but it's a great starting point and even in this state fun to play with and best of all, covers a number of important things, such as the physics engine, game state management, etc.
If you're thinking about creating your own like game, this might be a great article and code to start your journey with...