[Tutorial + Video] Creating a small Angry Birds clone for Windows Phone in 5 minutes

Scenes From A Developer Memory

Dimitris - Ilias Gkanatsios Personal Blog. A blog about various stuff, including .NET, Unity, Windows Phone and more!

[Tutorial + Video] Creating a small Angry Birds clone for Windows Phone in 5 minutes

  • Comments 3
  • Likes

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

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).

image

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

image

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

image

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

image

Add reference to the physics helper libraries you downloaded earlier

image

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.

image

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

image

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.

image

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

image

 

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

image

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.

image

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

image

Add a PhysicsObject behavior onto the rectangle.

image

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

image

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

image

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.

image

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

image

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

image

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).

image

Select PhysicsCollisionTrigger as the new trigger type

image

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.

image

(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.

image

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.

image

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

image

(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

 

Your comment has been posted.   Close
Thank you, your comment requires moderation so it may take a while to appear.   Close
Leave a Comment
  • Zero lines of code.. Love it :P

  • Thers code you just dont relise it :O

  • This is really nice...can you show us on how to create slingshot and setting background?