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

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:

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.

  • Very useful for level design and testing.

  • ami

    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.

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

  • 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

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

  • Danny

    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

    thanks emmanuel you are a rock

  • Digitalic

    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.

  • wow 8 ball hi Emanuele pls tutorials thanx for mach

  • 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,

  • James

    Emanuele can you do a AS3 conversion of this game:

    you done a AS2 version of it :D

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

  • Anonymous

    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/
    at Box2D.Dynamics::b2World/Step()
    at Main/fakeRelease()
    at Main/birdMoved()

    What might be wrong?

  • Anonymous

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

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


  • George

    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

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

  • Emanuele Feronato

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

  • Flex_Developer

    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


  • yasdar

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

  • beatless

    I have the same question with line 86.
    Thank you

  • Pingback: How draw I draw Trajectory Line in Box2DWeb? | PHP Developer Resource()

  • Julien


    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?

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

  • I hope I could make a game.

  • Rajat De

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

  • gameDev

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

  • ic

    In the name of GOD

  • qurc

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

  • blacknotblack

    Could you write tutorial about flying arrow like this: ?

  • Viraj

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

  • Hello bro Nice example we are waiting your more

  • CitrusNoob


    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


  • edi


    I made something similar in nape
    here is a link:


  • CitrusNoob

    @edi: source code is available?

    waiting solution to my problem

  • kush

    plese tell me how to load the images in box2d. actually Iam using javascriptand html5 crafty game engine.

  • TT

    How do i do the same implementation in Javascript and Box2d with out using flash.??
    Please suggest.

  • Using world step to draw a predictive path won’t do. Because it will move all the other objects in the world too. Instead, just add up the vectors:

    var step:Number = 1 / 30;
    var position:b2Vec2 = new b2Vec2(dogsInPlay[0].art.x / WORLD_SCALE, dogsInPlay[0].art.y / WORLD_SCALE)
    var velocity:b2Vec2 = new b2Vec2(-launchStrengthMultiplier * Math.cos(launchAngle), -launchStrengthMultiplier * Math.sin(launchAngle))
    var gravity:b2Vec2 = new b2Vec2(0, world.GetGravity().y * step);

    var dotCount:int = 100;

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

    position.x += velocity.x * step;
    position.y += velocity.y * step;
    position.y += gravity.y * step ;
    gravity.y += world.GetGravity().y * step;

    if (i % 5 == 0)

    trajectoryDots[i / 5].visible = true;
    trajectoryDots[i / 5].x = position.x * WORLD_SCALE;
    trajectoryDots[i / 5].y = position.y * WORLD_SCALE;
    trajectoryDots[i / 5].scaleX = ((i – dotCount) / dotCount);
    trajectoryDots[i / 5].scaleY = trajectoryDots[i / 5].scaleX;