Develop a Flash game like Angry Birds using Box2D – predictive trajectory line

November 3, 2011 • Actionscript 3, Box2D, Flash, Game design by Emanuele Feronato • 35 Comments

This should have been the last step of the Angry Birds series, but I got an interesting request from a reader and I wanted to show you how to do it.

We will see how to create a predictive trajectory line. Very useful for beginner and unskilled players.

This is what you’ll get: I added the predictive trajectory line to the script published on step 1 to reduce the total amount of code displayed:

Drag and release the bird with the mouse.

Where’s the magic? Let’s look at the source code:

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:Bird=new Bird();
		private var birdSphere:b2Body;
		private var preview:Sprite=new Sprite();
		public function Main() {
			var bg:Background=new Background();
			addChild(bg);
			addChild(bird);
			addChild(preview);
			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);
			}
			fakeRelease();
		}
		private function fakeRelease():void {
			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));
			preview.graphics.clear();
			preview.graphics.lineStyle(1,0x000000);
			preview.graphics.beginFill(0xff0000);
			for (var i:int=1; i<=150; i++) {
				world.Step(1/30,10,10);
				preview.graphics.drawCircle(birdSphere.GetPosition().x*worldScale,birdSphere.GetPosition().y*worldScale,2);
				world.ClearForces();
			}
			preview.graphics.endFill();
			world.DestroyBody(birdSphere);

		}
		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();
		}
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

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:Bird=new Bird();

private var birdSphere:b2Body;

private var preview:Sprite=new Sprite();

public function Main() {

var bg:Background=new Background();

addChild(bg);

addChild(bird);

addChild(preview);

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

}

fakeRelease();

}

private function fakeRelease():void {

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

preview.graphics.clear();

preview.graphics.lineStyle(1,0x000000);

preview.graphics.beginFill(0xff0000);

for (var i:int=1; i<=150; i++) {

world.Step(1/30,10,10);

preview.graphics.drawCircle(birdSphere.GetPosition().x*worldScale,birdSphere.GetPosition().y*worldScale,2);

world.ClearForces();

}

preview.graphics.endFill();

world.DestroyBody(birdSphere);

}

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();

}

When I drag the bird with birdMoved function (lines 49-60), at the end of such function I call another function called fakeRelease which will handle the trajectory line.

fakeRelease just adds a “fake” bird to the world and give it the linear velocity as if the player fired it, and you can see lines 62-78 are just a copy/paste of lines 95-111.

The difference is I simulate with a loop (line 82) a series of world steps and draw a circle in the position the bird would be at every step. The core of the function is at line 84.

And now you have the predictive trajectory line too. Download the source code.

Rate this post: 1 Star

(44 votes, average: 4.86 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 35 comments

Reginis

on November 3, 2011 at 1:36 pm

Very useful for level design and testing.
ami

on November 3, 2011 at 5:14 pm

nice code, i love the simple of your explain , i Learning a lot from your blog.
but i have a one note, you must put a refresh button i the swf, It’s annoying to refresh the page every time that you want to See the example.
Marc

on November 3, 2011 at 6:15 pm

That’s pretty cool Emanuele! That must be the same kind of code they used for the unicorn in Peggle.
tambi jalouqa

on November 3, 2011 at 6:21 pm

Looks amazing,

But how are you incrementing the step through the same world without consequences. What if there was already some physics on the screen. do we have to create a new world?
checo

on November 3, 2011 at 11:41 pm

Maybe The line 94, removing the birdMoved Listener cancels the increment in the original world?
Danny

on November 4, 2011 at 12:27 am

An interesting example, since the other objects will actually be asleep while you loop the world step shouldn’t be too much of a problem.

Although if you have some other stuff going on an identically set up world would fix that. Nice
mageec

on November 4, 2011 at 9:40 am

thanks emmanuel you are a rock
Digitalic

on November 4, 2011 at 10:31 am

I think you have done a good job of replicating the features of Angry Birds; it’s been good fun watching this tutorial series develop.

I have a suggestion for a refinement that I think would be great for beginners to AS3. How about showing the catapult elastic? I have noticed that in Angry Birds, the elastic gets thinner as you stretch it and I think this would be a great learning opportunity without too much coding.

Also, although I do appreciate that your code is for prototype purposes, I think that, for the benefit of beginners, it would be a good idea to avoid copy and pasting code into multiple functions as you have done with the predictive trajectory code. This could be placed in a function which reduces all sorts of ‘risks’ related to cut and paste and would set a good example to beginners.
umzug

on November 4, 2011 at 1:31 pm

wow 8 ball hi Emanuele pls http://www.miniclip.com/games/8-ball-pool-multiplayer/tr/ tutorials thanx for mach
Thomas Burleson

on November 5, 2011 at 4:28 pm

This is exactly what I want to help my 11yr son visualize trajectories and understand the relationships between graphics, physics, and code.

Nice tutorial. Thanks again,
ThomasB
James

on November 5, 2011 at 7:02 pm

Emanuele can you do a AS3 conversion of this game: http://www.emanueleferonato.com/2008/06/17/adding-a-new-twist-to-the-prototype-of-a-flash-game-like-poux/

you done a AS2 version of it :D
Will

on November 5, 2011 at 7:07 pm

Wow, Great tutorial man! All of your tutorials are awesome and you are too.
Thanks for your time making our life easier.
Anonymous

on November 15, 2011 at 9:26 pm

I’m getting this error while implementing it with the other code :

TypeError: Error #1010: A term is undefined and has no properties.
at customContactListener/PostSolve()
at Box2D.Dynamics::b2Island/Report()
at Box2D.Dynamics::b2Island/SolveTOI()
at Box2D.Dynamics::b2World/http://www.box2d.org/ns/b2internal::SolveTOI()
at Box2D.Dynamics::b2World/Step()
at Main/fakeRelease()
at Main/birdMoved()

What might be wrong?
Anonymous

on November 15, 2011 at 9:46 pm

Nevermind, fixed it. Had to make a couple of changes to the customContactListener and to the code.
jaydn

on December 4, 2011 at 8:55 am

awesome stuff. I was wondering where i can find “Bird” class? it wasnt part of the download or code on page.

Thanks!
George

on December 8, 2011 at 2:20 pm

If you have other stuff moving in the Box2D world you should create a separate one for the trajectory… 150 world steps will mess up other bodies already in the world.
Nice tutorial … I had already done a similar implementation but with 2 b2D worlds.
Flex_Developer

on December 13, 2011 at 7:33 am

Nice article.. can you please tell me what is Bird class exactly? In downloaded source it is not there.
Thanks.
Emanuele Feronato

on December 13, 2011 at 7:41 pm

Bird has no .as class, it’s just the bird movieclip
Flex_Developer

on January 19, 2012 at 12:30 pm

Hi, I am using your code in one application for touch mobile device. But this trajectory path drawing (fakeRelease()) is making touch movement of bird very slow. Commenting fakeRelease(),touch works normally. Can you please tell me what can be workaround for this?
dengsw

on February 7, 2012 at 11:27 am

good
yasdar

on March 9, 2012 at 4:48 pm

Hi, I have a small question for you Emanuele.
how does the For loop in line 86 work?
Thank you
beatless

on May 3, 2012 at 5:19 am

I have the same question with line 86.
Thank you
How draw I draw Trajectory Line in Box2DWeb? | PHP Developer Resource

on May 16, 2012 at 8:38 am

[...] http://www.emanueleferonato.com/2011/11/03/develop-a-flash-game-like-angry-birds-using-box2d-predict... [...]
Julien

on May 20, 2012 at 5:48 pm

Hi,

When you simulate the launch, you actually fast-forward the world.
If there was other objects, they would have been fast-forwarded at the end of the fake launch.
How do you get around that without creating another instance of the game?
adam

on June 9, 2012 at 10:52 am

I would like to make an Angry bird game please.
adam

on June 9, 2012 at 10:52 am

I hope I could make a game.
Rajat De

on June 30, 2012 at 6:18 am

Can you give the coding of making this in as2 , i am good at as 2 but not at as 3
gameDev

on July 4, 2012 at 8:37 am

Can u plz make a turotial to get same output without box2d. it will really help me…thx
ic

on July 13, 2012 at 7:05 pm

In the name of GOD
fantastic
tnx
qurc

on October 23, 2012 at 8:27 am

Are there any options for calculating the trajectories of objects without creating physics objects and using world.step()? In the case where we using a multiple objects (and mobile device) all works very slowly:(
Thanks
blacknotblack

on November 12, 2012 at 4:58 pm

Hello!
Could you write tutorial about flying arrow like this:
http://flashgameblogs.ru/blog/box2d/858.html ?
Viraj

on November 20, 2012 at 12:13 pm

Has anybody done it in cocos2d?
I have tried but not getting result..
Thank you,
Viraj
alex

on April 9, 2013 at 2:09 am

Hello bro Nice example we are waiting your more
CitrusNoob

on May 3, 2013 at 8:02 pm

Hello

Nice tutorial, can you make this with CitrusEngine(with starling+Box2D)

With box2d it’s ok but with Citrus I don’t know how we can do that

thank’s
edi

on May 10, 2013 at 12:52 pm

hello

I made something similar in nape
here is a link:
http://toastermedia.net/matematyczna_sowa/MatematycznaSowa.html

regards
ed

italian geek and PROgrammer

This post has 35 comments

ami

checo

Danny

mageec

Digitalic

James

Anonymous

Anonymous

George

Flex_Developer

Emanuele Feronato

Flex_Developer

dengsw

yasdar

beatless

Julien

Rajat De

gameDev

ic

qurc

blacknotblack

Viraj

CitrusNoob