In this post, we are going to show hot to create a small Angry Birds clone for Windows Phone 7 in 5 minutes using Expression Blend and zero (yes, zero) lines of code. Of course, the game that we will create is far from finished but it can serve as a start for your new awesome game.

Check the video explaining the tutorial

(Please visit the site to view this video)

We will use Windows Phone developer tools (they include Expression Blend for Windows Phone) which you can download from http://create.msdn.com and the free/open source Physics Helper library (download here: http://physicshelper.codeplex.com). Physics Helper is a helper library for the popular physics engine Farseer (http://farseerphysics.codeplex.com/). Basically, it adds some Behaviors inside Expression Blend in order to use the engine without writing any code at all!

First of all, you download the Physics Helper library, extract the dlls. Then you open Expression Blend and create a new Windows Phone Application. Pay attention so that the version is 7.0 (haven’t tested the library with 7.1 projects, but it might work).

Delete everything on the page, and change the layout of LayoutRoot element to Canvas (in order for it to work with the Farseer library).

Change the SupportedOrientations property of the PhoneApplicationPage to Landscape (if you can’t find the property, there is a handy search textbox).

Also change the Orientation property via the Device menu on the left

Add reference to the physics helper libraries you downloaded earlier

Rebuild the project (either pressing Ctrl-Shift-B or go to Project->Build Project menu item). Behaviors should be visible on the Assets->Behaviors pane.

Drag a PhysicsController behavior to the LayoutRoot object. This will identify the object as the object where physics happen!

Select the newly added behavior, go to its properties and enable “MousePickEnabled”. This will make drag drop operation on the controller and its children work.

Let’s do some drawing. Create a *closed* path on the LayoutRoot object. You are free to play with its Fill brush.

We want the path to participate in our physics world, so drag a PhysicsObject behavior onto it.

Go to this behavior’s properties and activate IsStatic. This happens because we want the path to act like it is the Earth, i.e. no gravity forces applied onto it.

Create a rectangle onto the surface. We’ll use it as for the pigs to appear on it.

Add a PhysicsObject behavior onto the rectangle.

Now, in my sample, I have copied and pasted the rectangle 3 times, to create this

but you can place them as you wish! Make sure that the behaviors have been copied, too.

Let’s add the bird and the pigs to the project (for newbies, it’s easy; just right click the project and select “Add Existing Item”). After you’ve done that, place them on the drawing surface.

Make the bird and the pigs physics object by dragging the PhysicsBehavior on them.

Now, let’s make the pigs go “boom” when they collide with the bird. Drag a PhysicsExplodeBehavior onto the first pig.

There are some stuff you have to do for its properties. For starters, select a new TriggerType (an event for the explode behavior to get executed).

Select PhysicsCollisionTrigger as the new trigger type

The selected trigger has some additional properties. It needs to get the IDs of the two bodies that, when they collide, it will get executed. To do this, you can use the square button. This button lets you click on elements on the drawing surface (or the objects and timeline panel) and use them as arguments in your trigger. We select the bird and the first pig, as we want this trigger to run when these two elements collide.

(Blend automatically named bird as “image” and the first pig as “image1”).

Then, select to deactivate the body (so that the pig disappears after the collision) and create 5 particles. Particles are the tiny small pieces of pixels in games, useful to do many effects such as explosions.

Trigger ready! Repeat the process for the second pig, starting with dragging a PhysicsExplode behavior onto it. Be careful to select the correct images (pig, bird) for this collision. At the end, your objects and timeline panel should look like this.

You’re done! Press F5 to deploy to emulator, turn its orientation to landscape and enjoy!

(pigs destroyed with one shot only!)

You have seen a very short intro to the Helper for the Farseer Phycics library. Everything you saw can be implemented in code, and you *will* need to write lots of code to create a fully functional and entertaining game. Nevertheless, you can use the above tutorial to get a glimpse of what’s possible with Farseer Physics engine and create the next killer game yourself!

To download the source code, check the file AngryBirdsCloneWP7 on my skydrive folder https://skydrive.live.com/?cid=10e568adbb498dc8&sc=documents&uc=1&id=10E568ADBB498DC8%21365

[Disclaimer]Angry Birds title and assets are copyright of Rovio Entertainment Ltd. www.rovio.com [/disclaimer]

Don’t forget to check kids’ apps for WP7 that I have co-developed here: http://www.windowsphone.com/en-US/search?q=anlock

First Words: Learning Animals