Build 10 games and learn game development along the way in this fast paced game development course

Get the source code of 12 commercial games, loaded 50+ million times, and learn the secrets of game design

Learn how to make a successful Flash game from a real world example. Fully commented source code

Create realistic Flash physics games from scratch with advanced features, from Angry Birds to Crush the Castle

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.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (51 votes, average: 4.80 out of 5)
Loading ... Loading ...
Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

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

This post has 39 comments

  1. Reginis

    on November 3, 2011 at 1:36 pm

    Very useful for level design and testing.

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

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

  4. 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?

  5. checo

    on November 3, 2011 at 11:41 pm

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

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

  7. mageec

    on November 4, 2011 at 9:40 am

    thanks emmanuel you are a rock

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

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

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

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

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

  13. 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?

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

  15. 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!

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

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

  18. Emanuele Feronato

    on December 13, 2011 at 7:41 pm

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

  19. 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?

  20. dengsw

    on February 7, 2012 at 11:27 am

    good

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

  22. beatless

    on May 3, 2012 at 5:19 am

    I have the same question with line 86.
    Thank you

  23. 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… [...]

  24. 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?

  25. adam

    on June 9, 2012 at 10:52 am

    I would like to make an Angry bird game please.

  26. adam

    on June 9, 2012 at 10:52 am

    I hope I could make a game.

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

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

  29. ic

    on July 13, 2012 at 7:05 pm

    In the name of GOD
    fantastic
    tnx

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

  31. 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 ?

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

  33. alex

    on April 9, 2013 at 2:09 am

    Hello bro Nice example we are waiting your more

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

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

  36. CitrusNoob

    on June 7, 2013 at 6:39 pm

    @edi: source code is available?

    waiting solution to my problem

  37. kush

    on August 27, 2013 at 11:52 am

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

  38. TT

    on November 11, 2013 at 12:50 pm

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

  39. Zach Foley

    on January 13, 2014 at 11:57 pm

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

Thank you for the download!!

I hope you will find it useful and make something interesting out of it

To keep up to date with the blog, why don't you like my Facebook page and follow me on Twitter?

Want to learn more? Don't miss this:

Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now

×