Develop a Flash game like Angry Birds using Box2D

October 10, 2011 • Actionscript 3, Box2D, Flash, Game design by Emanuele Feronato • 25 Comments

Here we are with one of the most famous games running on your iPhone/iPad… Rovio‘s Angry Birds!

A lot of developers criticize this title, saying it’s just a clone of “shoot something to destroy something using physics”, but what can I say? It’s fun.

So don’t be envy and let’s start understanding how does the sling work.

I wrote a quick and quite messy code just as a pre-release, I will probably adjust something and explain the code tomorrow, but for all you “gimme the code now, I can read it”, here it is the sling:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	import Box2D.Dynamics.Joints.*;
	public class Main extends Sprite {
		private var world:b2World=new b2World(new b2Vec2(0,10),true);
		private var worldScale:int=30;
		private var bird:birdMc=new birdMc();
		private var birdSphere:b2Body;
		public function Main() {
			var bg:backgroundMc=new backgroundMc();
			addChild(bg);
			addChild(bird);
			bird.x=170;
			bird.y=270;
			bird.buttonMode=true;
			addWall(320,10,320,395);
			addWall(320,10,320,-5);
			addWall(10,320,-5,240);
			addWall(10,320,645,240);
			addEventListener(Event.ENTER_FRAME,updateWorld);
			bird.addEventListener(MouseEvent.MOUSE_DOWN,birdClicked);
		}
		private function addWall(w,h,px,py):void {
			var floorShape:b2PolygonShape = new b2PolygonShape();
			floorShape.SetAsBox(w/worldScale,h/worldScale);
			var floorFixture:b2FixtureDef = new b2FixtureDef();
			floorFixture.density=0;
			floorFixture.friction=10;
			floorFixture.restitution=0.5;
			floorFixture.shape=floorShape;
			var floorBodyDef:b2BodyDef = new b2BodyDef();
			floorBodyDef.position.Set(px/worldScale,py/worldScale);
			var floor:b2Body=world.CreateBody(floorBodyDef);
			floor.CreateFixture(floorFixture);
		}
		private function birdClicked(e:MouseEvent):void {
			addEventListener(MouseEvent.MOUSE_MOVE,birdMoved);
			addEventListener(MouseEvent.MOUSE_UP,birdReleased);
			bird.removeEventListener(MouseEvent.MOUSE_DOWN,birdClicked);
		}
		private function birdMoved(e:MouseEvent):void {
			bird.x=mouseX;
			bird.y=mouseY;
			var distanceX:Number=bird.x-170;
			var distanceY:Number=bird.y-270;
			if (distanceX*distanceX+distanceY*distanceY>10000) {
				var birdAngle:Number=Math.atan2(distanceY,distanceX);
				bird.x=170+100*Math.cos(birdAngle);
				bird.y=270+100*Math.sin(birdAngle);
			}
		}
		private function birdReleased(e:MouseEvent):void {
			bird.buttonMode=false;
			removeEventListener(MouseEvent.MOUSE_MOVE,birdMoved);
			removeEventListener(MouseEvent.MOUSE_UP,birdReleased);
			var sphereShape:b2CircleShape=new b2CircleShape(15/worldScale);
			var sphereFixture:b2FixtureDef = new b2FixtureDef();
			sphereFixture.density=1;
			sphereFixture.friction=3;
			sphereFixture.restitution=0.1;
			sphereFixture.shape=sphereShape;
			var sphereBodyDef:b2BodyDef = new b2BodyDef();
			sphereBodyDef.type=b2Body.b2_dynamicBody;
			sphereBodyDef.userData=bird;
			sphereBodyDef.position.Set(bird.x/worldScale,bird.y/worldScale);
			birdSphere=world.CreateBody(sphereBodyDef);
			birdSphere.CreateFixture(sphereFixture);
			var distanceX:Number=bird.x-170;
			var distanceY:Number=bird.y-270;
			var distance:Number=Math.sqrt(distanceX*distanceX+distanceY*distanceY);
			var birdAngle:Number=Math.atan2(distanceY,distanceX);
			birdSphere.SetLinearVelocity(new b2Vec2(-distance*Math.cos(birdAngle)/4,-distance*Math.sin(birdAngle)/4));
		}
		private function updateWorld(e:Event):void {
			world.Step(1/30,10,10);
			for (var currentBody:b2Body=world.GetBodyList(); currentBody; currentBody=currentBody.GetNext()) {
				if (currentBody.GetUserData()) {
					currentBody.GetUserData().x=currentBody.GetPosition().x*worldScale;
					currentBody.GetUserData().y=currentBody.GetPosition().y*worldScale;
					currentBody.GetUserData().rotation=currentBody.GetAngle()*(180/Math.PI);
				}
			}
			world.ClearForces();
			world.DrawDebugData();
		}
	}
}

And this is the result:

… you should know how to play… drag the bird to fire it with the sling.

Download the source code.

Rate this post: 1 Star

(21 votes, average: 4.57 out of 5)

Loading ...

Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 25 comments

Mavari

on October 10, 2011 at 7:27 pm

Excelent post!! I also made a game using box2d, about rescuing 33 Chilean miners … check it out on http://mavari.cl/MinersHero.html

Regards
Chris

on October 10, 2011 at 7:31 pm

Very nice!
Two “newer” games on the android market are “bunny shooter” and “early bird”, which use the same basic concepts of angry birds, but they are at the top downloaded!

So learning how to make your own angry birds like game would be helpful for any developer.

I love all the box2d tutorials!
Kalle

on October 10, 2011 at 7:45 pm

This looks cool:) Can you also say how the objects breaking is done in this game(do they use animations for breaking?). It would be very useful. Thanks.
kek

on October 10, 2011 at 7:46 pm

Do you know QuickBox2D ?
I like using it, you have very few code lines compared to box2D.

http://actionsnippet.com/?page_id=1391
Sudeep Acharya

on October 10, 2011 at 7:56 pm

wow nice tutorial great job again !
Scott

on October 10, 2011 at 8:25 pm

Haha I suggested this :D:D:D:D:D:D:D:D:D:D:D:D:D
Alex

on October 10, 2011 at 8:43 pm

Now there will be new clones of Angry Birds))
XD

on October 10, 2011 at 9:17 pm

when i was aiming i hit the wall -_-’
Malken

on October 10, 2011 at 9:54 pm

By the Gods!
Gliiz

on October 11, 2011 at 12:28 am

Nice !

Just curious how to setup the scrolling for following balls.
Kirtimaan

on October 11, 2011 at 2:47 am

Thanks for nice share as always. Do you have any plan to expand this tutorial a bit further, like dealing with camera motion and world panning?
Arindam

on October 11, 2011 at 8:41 am

Very good..I love the tutorials…

I want to develop a thing like in catch the candy (iphone). How they are making a stretchable Hand.. of a player..
Can you please tell me.
Oleksandr

on October 11, 2011 at 7:04 pm

Fantastic, very nice
robertjoseph

on October 12, 2011 at 12:23 pm

Hi, I’m not a developer, but I am looking for someone to produce one game – and then probably a second. The first project would involve taking an elephant across various obstacles, and through a number of levels. The budget is not high (it’s intended to help promote a small brand) but we’re not looking for a highly sophisticated game. Ideally it would be developed for IOS and android. Can anyone help please?
Ben Reynolds

on October 12, 2011 at 7:15 pm

Great choice for a game tutorial, I know a lot of people would love to learn the mechanics behind the beloved Angry Birds! Even though I am one of those developers you mentioned who “criticize this title, saying it’s just a clone of “shoot something to destroy something using physics”, I still admit it’s a fun game and a perfect application of Box2D at its best :)
kumo

on October 14, 2011 at 8:58 am

This is how we learn and improve. Once we are able to remake the game, we should be able to improve the game and bring up the fun part to a higher level. I’m hoping to see a better game coming out.
MC

on October 14, 2011 at 9:44 am

Emanuele, this is a feature requested by many
and it should not be too difficult for you:
You should use some script to hide/show the flash_preview
(specially when you post more than one flash_movie in the same page)
and you should be able to reload/refresh the flash without
reloading the entire page…
Rocanten

on October 16, 2011 at 12:26 am

to MC
I think we cannot demand anything from Emanuele. Thanks for his work.

Anyway we will see a lot of terrible clones of Angry Birds after this post i guess :)
shyamal

on November 7, 2011 at 10:55 am

ela emanuele,
i was looking for that code
LOL

on November 11, 2011 at 5:03 pm

OMG Adobe Flash shared this tutorial on the Facebook page!!!
ritterliu

on November 18, 2011 at 2:07 pm

Awesome job!!!
josh

on December 20, 2011 at 6:19 pm

hey emanuele, can you post a link to download the .fla and .swf thanks
Mike

on January 4, 2012 at 5:22 pm

What is the flash version you need for the .fla? because i tried opening it with macromedia flash 8 and adobe flash cs4..it says unexpected file format
Starling API – 20 – Lier Starling avec Box2D pour gérer les collisions « Adobe Flex Tutorial

on January 14, 2012 at 7:02 pm

[...] http://www.emanueleferonato.com/2011/10/10/develop-a-flash-game-like-angry-birds-using-box2d/ [...]
Ideas and solution for mini games 2 « Project Management

on March 21, 2012 at 3:33 pm

[...] wind blows game ( dandelion game), a tutorial: http://www.emanueleferonato.com/2011/10/10/develop-a-flash-game-like-angry-birds-using-box2d/ Develop a Flash game like Angry Birds using Box2D – Emanuele [...]

Emanuele Feronato

italian geek and PROgrammer

Develop a Flash game like Angry Birds using Box2D

This post has 25 comments

Mavari

Chris

Kalle

kek

Sudeep Acharya

Scott

Alex

XD

Malken

Gliiz

Kirtimaan

Arindam

Oleksandr

robertjoseph

Ben Reynolds

kumo

MC

Rocanten

shyamal

LOL

ritterliu

josh

Mike

Starling API – 20 – Lier Starling avec Box2D pour gérer les collisions « Adobe Flex Tutorial

Ideas and solution for mini games 2 « Project Management

Flash Game Development by Example

Protect from Flash decompilers

Top categories

All categories