Develop a Flash game like Angry Birds using Box2D – Following bird with the camera and skinning crates

Here we go with another Angry Birds tutorial. Once you know how to kill the pigs, it’s time to make the camera follow the bird, so we can design levels wider than the stage.

The concept behind this feature is explained in the post following a body with the camera in Box2D – The smart way. I also applied the theory explained there to the bird.

Also, I skinned the crates with a new sprite called Rock, that I remove each time a crate is broken.

There’s nothing much to say, that’s what you’ll get:

and this is the script:

We are only one step away from creating a playable Angry Birds level, then I’ll explain everything line by line.

Meanwhile, download the source code.

  • Great tutorial as usual, Emanuele. Thanks.

    One thing always made me nervous about box2D:
    The ball keeps rolling until it hits a wall.
    It never stops even if it has a very slow speed.

    What is the best approach to this issue?
    Adding inertia? friction? or anything else?

    Thanks again.
    You are the best ;)

  • James

    Why does the bird keep rolling at the same speed?

  • Emanuele Feronato

    I hate this behavior too, but it won’t be a problem in this case since the bird will be automatically removed after a given amount of seconds.

    Anyway, a good amount of friction should fix the problem.

  • checo

    is it in your plans to include the predictive trajectory line?

  • Emanuele Feronato

    actually, it wasn’t. But it would be an interesting challenge and quite an useful feature, so I’ll show it in next step.

  • Pingback: Ride2Esc » Develop a Flash game like Angry Birds using Box2D – Following …()

  • Love your coding style . . it’s so pretty. My code always ends up looking like a car accident of foobars and the alphabet. The concept is well demonstrated and anybody with some coding experience could turn this into a full featured angry birds clone.

  • A0V

    Hey Emanuele Feronato, I have a problem, I have no idea where to put the codes. Should I design game by myself and add the codes? Where do I put it at? Please reply..

  • Emanuele Feronato

    A0V, if you download the source code at the end of the post you will get every file you need in order to make it work with Adobe Flash

  • Hey Emanuele, I’m brand new to all of this. I know you usually don’t create a complete flash game. I would like to learn how to create a menu, scoring system, ect. Can you make a tutorial for this? Currently, I’m using Box2D, FlashDevelop, and of course Flash Professional CS5.5.

  • Agartine

    Hi Emanuele, I only recently spotted your blog and have been following your tutorials. Marvelous work!

    I do have one problem though, I have Flash CS5 and I can’t open your recent FLAs, and I am very interested in this one. Can you by any chance include a CS5 version of the FLA somewhere? or can you email it? I hope it’s not a bother, I just want to see how you have done this awesome game.

    Thanks a lot!

  • Frank Walsh

    Hi Emanuele,

    Do you take on paid projects? I have a client looking for a project and your work here would suggest you’d be a great help to the project.

    Frank

  • Pingback: 2011????????Flash?? | ????????()

  • Pingback: Angry “Starling-Nape” Birds - stu wild - ramblings of a wildgeeza...()

  • Xone

    i dont understand what posX is i want to do this example with javaScript and i dont know how
    can someone explain to me that posX

  • ArmanBM

    Tanks Thats Fantastic! :)
    really clean code…

    Xone:
    as far as i know posX is nothing to do with javascript
    this is just a variable that holds distance between Bird and middle of stage (in X direction )
    so when it become negative (means bird is going to pass middle of the stage) Camera is moving to left and keep Bird On Middle of screen.