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

Box2D: tutorial for the absolute beginners

This is a tutorial about Box2D dedicated to the absolute beginners.

I received a lot of request asking for this, so here we go.

What is Box2D

Box2D is a feature rich 2d rigid body physics engine, written in C++ by Erin Catto.

There is a Flash version called Box2DFlashAS3, but among Flash developers it’s called Box2D as well, that you can download from this link.

Being a Flash porting, we will use AS3 to make our project, instead of C++ as required by the original library.

Once you downloaded and unpacked the zip file in a folder, this is what you will get:

You are now ready to begin

Your first Box2D experiment

Start Flash and create a new AS3 Flash file and call it (example) demo.fla. Save it in the same folder you used to unzip Box2D package. Also in your properties panel assign the Class name to (example) demo, this way:

Now create a new actionscript file, call id demo.as and save it in the same folder.

Your folder now should look this way:

it’s time to edit demo.as

Lines 2-5: some commons Flash libraries used to make the demo

Lines 6-9: Box2D libraries… it’s not that important at the moment to know everything about them… they’re just some libraries

Line 11: Declaring the_world variable, b2World type. b2World is the the main object to deal with the Box2d engine. It stores all the joints and bodies, handles listeners and is responsible for stepping through the simulation.

Line 14: Declaring the_environment, b2AABB type. The physics environment generated by Box2D is not infinite, and b2AABB is the container of such environment. Think about it as a bounding box. Inside this bounding box, the world is ruled by Box2D physics.

Lines 15-16 : Defining the upper and lower corners of the environment bounding box, in meters. 1 meter = 30 pixels. So our box has sides made by 6000 pixels. They’re pretty too much for a single-screen project, but if you are using scrolling, it could be useful to set up a big environment. For more information about pixels and meters refer to Understanding pixels and meters with Box2D and how to select an object with mouse – part 2.

Line 17: Declaring gravity variable, b2Vec2 type. b2Vec2 is a vector with x and y components.

Line 18: Starting up the world: the constructor has three parameters: environment, the worldAABB bounding box, gravity the world gravity vector, and a boolean set to true to improve performance by not simulating inactive bodies.

And now you created the world. Next time I’ll explain the rest of the script

Anyway, this is the result

And this is the source code to download.

I hope this will help you start playing with Box2D.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (110 votes, average: 4.54 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 78 comments

  1. Superdean

    on January 28, 2009 at 12:35 am

    YES!
    finally a box 2d tutorial i can understand!
    this actually might make me migrate to AS3…

  2. Yowan

    on January 28, 2009 at 3:37 am

    Awesome!!
    Thanks a lot!

  3. Shival

    on January 28, 2009 at 11:03 am

    You are really the rockstar of programming

  4. Shival

    on January 28, 2009 at 11:06 am

    make it PROgramming

  5. Xavi

    on January 28, 2009 at 6:57 pm

    thanx emanuele for making a tut for Box 2D that is for begginers
    i haven’t started AS3 yet, but i think this will help…
    do u have a beggining AS3 tutorial

  6. Prankard

    on January 29, 2009 at 4:04 am

    Very basic for my taste. But you can’t satisfy everyone :)
    Glad you got a good response from your other users.
    Keep up the more advanced tutorials too.

  7. Emanuele Feronato

    on January 29, 2009 at 12:20 pm

    […] Box2D: tutorial for the absolute beginners […]

  8. Xodus

    on January 29, 2009 at 1:58 pm

    XD

  9. FrozenHaddock

    on January 29, 2009 at 2:03 pm

    Excellent!

    I shall be closely following both the basic Box2D tutorials tonight and start playing around with them!

  10. Weekly Shared Items - 30. January, 2009 « toxin 2.0

    on January 30, 2009 at 9:53 am

    […] Box2D: tutorial for the absolute beginners […]

  11. Koczo

    on February 2, 2009 at 4:33 pm

    It looks great, but when i’m trying to open “demo.fla” file in Adobe Flash CS3, I got the message “Unexpected file format”. Do you know why?

  12. A smart way to manage sleeping objects with Box2D : Emanuele Feronato

    on February 18, 2009 at 11:04 am

    […] you followed Box2D: tutorial for the absolute beginners, then you know you can put some object to “sleep” to improve performance by not […]

  13. Erase Box, a Box2D game made with my tutorials : Emanuele Feronato

    on February 21, 2009 at 1:13 pm

    […] a mix of your tutorials about “Box2D for absolute begginers” and “Totem Destroyer Prototype“. I also added some other features, such as the […]

  14. Fabien Millerand

    on February 23, 2009 at 3:43 am

    Hi,

    I wanted to know if there was an easy way to add a texture to those ‘boxes’..
    Thx
    Fabien

  15. lol

    on March 20, 2009 at 6:59 pm

    uuuh, yeeeah, that’s so PROOO Mr. PROgrammer

  16. Tobias C.

    on April 16, 2009 at 4:55 pm

    Thanks a lot!!!!

  17. Fighterlegend

    on April 25, 2009 at 8:47 pm

    Can you put it in a Flash CS3 format?

    Or do I NEED Flash CS4?

    If I do, that would suck! :(

  18. AS3 Flash Physics Engine Box2D | [mck]

    on May 1, 2009 at 11:15 am

    […] Boy Wonder!!) Emanuele Feronato (an Italian PROgrammer) has written an extremely useful tutorial: box2d tutorial for the absolute beginners/. This one is a very good starting […]

  19. Destruction

    on May 4, 2009 at 6:02 am

    Nice guide, might play around with it sometimes.
    Also, hi Fighterlegend!

  20. Thempc

    on May 28, 2009 at 2:09 pm

    to Fighterlegend:
    no you do not NEED CS4 for this,
    this can also be done in CS3 with ease.

    PS: awesome tutoial 5/5

  21. Androoo

    on August 6, 2009 at 2:26 pm

    Why don’t you reply to peoples questions?

  22. Mokey

    on August 8, 2009 at 5:20 am

    Nice tutorial. I’m still learning as3 and this will be very useful. Thanks!

  23. Box2DFlash - Falling Text | Cyan[c] Design

    on August 26, 2009 at 5:54 am

    […] want to give yet another shout out to Emanuele Feronato. If you are looking at this code, and are completely lost, he has EXCELLENT tutorials to get you […]

  24. cyancdesign

    on August 27, 2009 at 4:24 am

    This one help me start off on the right foot. And all your other tutorials are awesome! I was able to expand on this to turn the boxes into dynamic falling text.
    (^_^)// Cheers.

  25. shuping chen

    on August 29, 2009 at 5:16 am

    Thank you very much.^_^

  26. Chris

    on October 13, 2009 at 2:35 am

    Thanks for these, really finding them useful.

    One thing though, you mentioned that 1 meter = 30 pixels… is that a default or do you have to set that ratio somewhere in the code?

    Thanks again.

  27. Efe

    on October 21, 2009 at 6:26 am

    Thank you for the lovely tutorial, its beyond amazingly useful. As a low to mid-level Flash progrommer / animator, getting a handle on the Box2D stuff through just the examples is actually quite difficult (and not helped by the slightly more ambiguous naming conventions it uses)

    But seriously, amazing stuff. Thanks :)

  28. Sam

    on November 17, 2009 at 8:37 pm

    I don’t seem to have flash, to create a new AS3, I need help. Can you give me a link?

  29. bubloobasu

    on December 22, 2009 at 7:47 am

    Can u pls explain the rest of the script

  30. Sucks man...

    on January 8, 2010 at 3:37 am

    Errm.PART 2!!!!!!!!!!!!!!!!!!!!!?????????????????

  31. No it doesn't!

    on January 8, 2010 at 3:39 am

    HAHA! I found it XD

    http://www.emanueleferonato.com/2009/01/29/box2d-tutorial-for-the-absolute-beginners-step-2/

    :D

  32. clayton

    on January 25, 2010 at 3:34 pm

    i followed the directions exactly as listed, however when i try to run the program, it gives me a bunch of errors starting with:

    1046: Type was not found or was not a compile-time constant: b2World.
    1046: Type was not found or was not a compile-time constant: b2AABB.
    1046: Type was not found or was not a compile-time constant: b2Vec2.

    anyone have any ideas?

  33. Rackdoll

    on January 27, 2010 at 2:48 pm

    @clayton

    your classpaths arent correct configured..
    these errors happen when flash or your code editor cannot find the class you are trying to use..
    So check your linkage to the classes and try again :)

    it also helps to get a basic understanding of AS3.0 and OO before you start a tutorial like this one.

    ;)

  34. Angry

    on January 28, 2010 at 5:40 am

    ok. I tried this and it was an epic fail.

    The idiots who made Box2d decided to randomly change the whole thing! The box2d looks nothing like the screenshots you had. Could you plz make a new tutorial?! thanks.

  35. Xalvez

    on January 28, 2010 at 11:12 am

    I got the same error with #26.
    Help pls ><

  36. Box2D tutorial for the absolute beginners – revamped : Emanuele Feronato - italian geek and PROgrammer

    on February 2, 2010 at 1:00 am

    […] About a year ago I published a Box2D tutorial for the absolute beginners. […]

  37. Sam

    on February 6, 2010 at 4:34 pm

    Hi, guys.

    You need to have the following in order to successfully run Demo.fla.

    1. Adobe Flash CS4
    2. Box2DFlashAS3_2.0.2

    Download Box2DFlashAS3_2.0.2 in here.

    http://sourceforge.net/projects/box2dflash/files/

    If you have any questions, ask. :-)

    Thank you for the great tutorial, Emanuel! You rock!

    Sam

  38. merve

    on February 13, 2010 at 9:43 pm

    hello,
    i liked very much the scene i see in the last animation screen.

    now i want to ask whether it is possible to write an application without using flash development environment? i am a newbee in software developing but i like flash applications too. but i am a student and no have money for flash development environment.
    is there a compiler for action script desperate from flash development environment?
    i googled a bit but find nothing.

    thanks for tutorial and any possible advises.

  39. Gab

    on February 14, 2010 at 3:55 am

    I tryed this code with Adobe Flash IDE CS4 : It’s okay.

    When I try with an AS3 project with Flash Develop, debugDraw doesn’t display any objects.

    I use : FlashDevelop 3.0.6/Box2D 2.0.2/Flex 3.4

  40. Tim

    on February 23, 2010 at 2:25 pm

    Learning AS3 and your tutorial is an awesome way to experiment. Really one of the best sites I’ve found about Flash, Actionscript, and games. Thanks for sharing your knowledge.

  41. reb1rth

    on March 11, 2010 at 4:14 am

    hii those whor getting error just like #26 and #29 check out this link http://orenyomtov.com/topic/flash
    i had the same error i got it sorted nw.

  42. one1989

    on May 8, 2010 at 6:05 am

    Great tutorial. I’m very excited in box2d. Hope you can give more..

  43. Physics Engine für Flash: Box2D | Multitouch and Beyond

    on May 17, 2010 at 3:21 pm

    […] Einsteiger Tutorial von Emanuele Feronato: http://www.emanueleferonato.com/2009/01/27/box2d-tutorial-for-the-absolute-beginners/ […]

  44. Adbury

    on May 20, 2010 at 12:32 pm

    Hey Emanuele, Nice tutorial though the box 2d files i downloaded had nearly 60 to 70 syntax errors like the one below all was same error

    1084: Syntax error: expecting identifier before lessthan.
    public var m_vertices:Vector.;
    the use of this bracket caused a lot of problems

  45. claudio

    on June 8, 2010 at 5:01 pm

    Doesnt work i dont know why
    do i have to put it in a special rute in flash installation directory?

  46. Roshan C

    on June 12, 2010 at 12:24 pm

    hi,
    A very simple and nice tutorial and followed all the instruction as said in tutorial but i got 10 compile time errors :- 1084: Syntax error: expecting identifier before lessthan. all the errors were same. I am using FLASH CS3. I created demo myself since i am not having CS4. Thanks for such a b’ful tutorial.

  47. games

    on June 20, 2010 at 7:48 pm

    Great tutorial, with the latest version there were a lot of errors, but after downloading the previous version Box2DFlashAS3_2.0.2 all worked great without any errors.
    Thanks for this tutorial!

  48. Alexandre Colella

    on June 27, 2010 at 5:48 pm

    Thanks! Great easy-to-learn tutorial!

  49. shefyg

    on August 12, 2010 at 8:10 am

    hi Emanuele,

    10x for this tutorial

    I think you should consider update it. I saw that in the latest B2Box – there is now more public b2DebugDraw.m_sprit instead we have b2DebugDraw.SetSprite()

    If either of you (readers of this tutorial) encountered this problem – I hope I helped.

    The way I solved this, is by going to decleration of class b2DebugDraw, and looking for m_sprite.

    Best Regards, Shefy

  50. Useful Links « Mobile training support

    on September 30, 2010 at 4:57 pm

    […] http://www.emanueleferonato.com/2009/01/27/box2d-tutorial-for-the-absolute-beginners/ […]

  51. Neko

    on November 29, 2010 at 12:03 am

    Warning, don’t waste your time with this tutorial – Box2D has been updated in the 2 years since this was written and this tutorial is currently broken. :(

  52. Danko

    on December 29, 2010 at 2:32 pm

    great tutorial!

  53. stan

    on March 4, 2011 at 9:17 am

    You’re just taking tutorials from here and there and adding them to your site as your own tutorial.

    You are not even explaining the code( which Im sure you don’t know yourself seeing as they are copied from other tutorials).

    Why not make a simple original tutorial?

  54. Draco18s

    on March 4, 2011 at 5:51 pm

    Because it’s a CS4 file.

  55. Draco18s

    on March 4, 2011 at 6:11 pm

    Finally, something that might actually help me figure out how to START a project with Box2D. Unfortunately, they updated the engine to a new version, and this demo can’t be converted:

    b2Body no longer has a CreateShape function. Or anything that appears to do even remotely the same thing.

    At least the old package is still available.

  56. satya pandey

    on March 17, 2011 at 7:06 am

    hi sir , Good morning
    While working with above tutorial, i am facing problem with following
    1. debug_draw.m_sprite=debug_sprite;
    2. var the_box:b2PolygonDef;

    it’s showing compile time constant, definition not found & Attempted access of inaccessible property m_sprite through a reference with static type Box2D.Dynamics:b2DebugDraw.

    please sir help to resolve these problem.

    Thanking you……….

  57. Bryce Neal

    on March 21, 2011 at 9:24 pm

    @Satya

    This tutorial is out of date. Somewhere along the line defs were renamed to shapes. Try b2PolygonShape.

  58. AndrewThompson

    on June 8, 2011 at 7:15 am

    Hey Awesome tut!

    I have a problem though. I am getting a “Scene 1, Layer ‘Layer 1′, Frame 1, Line 1 1037: Packages cannot be nested.” Compiler Error.

    Any ideas why or how to fix it?

  59. Rafael

    on June 12, 2011 at 6:07 am

    To make this tutorial Download this file:

    http://sourceforge.net/projects/box2dflash/files/box2dflash/Box2DFlashAS3_2.0.2/

    not the latest.

    Ty Feronato

  60. George

    on August 14, 2011 at 8:29 am

    Hi,
    I’m new to all this. I’ve been trying to follow your tutorials but they don’t seem to be in order? I found the first one thru the web and this one by chance. I would really like to learn how to use this powerful tool and see what I can come up with. Could you please email me the link or links to all of these tutorials you are offering?
    Also, since I have not found all the tutorials are you explaining how to create a game from start to finish using this box2d method?
    Thanks,
    George =)

  61. Evgeney

    on September 6, 2011 at 8:08 pm

    Thanks a lot.

  62. Kin Jung Il

    on November 14, 2011 at 3:12 pm

    I can’t do it D:

  63. Portfolio Mike Dammers » Blog Archive » Spelen met physics

    on February 25, 2012 at 1:20 pm

    […] emanueleferonato – Box2D tutorial for absolute beginners. […]

  64. Farseer tutorial for the absolute beginners | Code to Preload

    on April 15, 2012 at 2:02 pm

    […] post is inspired (and somewhat a direct copy) of a couple of posts Emanuele Feronato wrote back in 2009 about Box2D (his tutorial was ActionScript 3 based for Box2D, this is C# XNA for the Farseer […]

  65. You're a fucking idiot

    on May 29, 2012 at 8:57 pm

    Your tutorials are so unintuitive and badly explained, I’m surprised any beginner would be able to understand them. Here’s a suggestion: When writing a tutorial, actually EXPLAIN the process as you go along rather than getting people to write out masses of code verbatim which doesn’t work after the masses of time it takes to write.

    Also if this code doesn’t work with the latest version of Box2D, then add an update or even better, update your defunct tutorial so I don’t have to scratch my head for ages trying to work out what I’ve done wrong WHEN I HAVEN’T DONE ANYTHING WRONG. I think you should stop writing tutorials because you are absolutely shit at it. :(

  66. maria

    on July 9, 2012 at 7:10 pm

    thanx a lot, it really helped me a lot.

    regards maria

  67. Sachin

    on July 14, 2012 at 2:51 pm

    I have downloaded the version from your site for flash. but I am not able to run this .fla file in flash cs5. It’s giving me lots of error. Can u please give me provide me working version? thnx

  68. JohnWise

    on October 3, 2012 at 10:10 am

    Hi Friends ..
    What should I do in Adobe Flash CS5 ?
    I faced with so many errors after doing that !
    Thanx ..

  69. Box2D C++?? ?????? | Software MyZone

    on November 14, 2012 at 3:48 am

    […] Emanuele Feronato(Flash) […]

  70. Box2D C++ ??-?? | Oh!Coder

    on November 18, 2012 at 6:30 am

    […] Emanuele Feronato(Flash) […]

  71. Joe the plumber

    on November 28, 2012 at 7:40 pm

    Please note that this tutorial only works with the older version of box2d version 2.02

    I see alot of angry comments here and I have to say if you’re not prepared to put some time into doing some research into why things don’t work then Programming isn’t for you. Game development has a steep learning curve that takes years of practice and experience it doesn’t come by just looking at a few web tutorials.

  72. Noobman

    on December 15, 2012 at 7:24 am

    HELP IT DOESNT WORK EMANUEL PLEASE MAKE AN UPDATED VERSIOn.
    Thank you in advance :)

  73. Tony

    on January 4, 2013 at 6:21 pm

    It gives me a lot of errors such as “Couldn’t found definition of Box2D.Dynamics” when I try to debug it and didn’t work, but when I save it, swf file is works. What should I do?

  74. Tony

    on January 7, 2013 at 4:43 pm

    error 1046 on line “public function on_time(e:Event) {“

  75. Tony

    on January 7, 2013 at 5:06 pm

    even source code gives me error 1046!

  76. Box2D C++??-?? | ?????

    on January 19, 2013 at 3:53 pm

    […] Emanuele Feronato (Flash) […]

  77. Arch

    on March 11, 2013 at 8:50 pm

    hello, i am a truely beginner to box2D and need some major help with this box2D feature. I am actually using the code for drawing line,forming a wall for the ball to bounce and roll on which you have provided in another tutorial. However, I am quite confused on how to set a angled(SLANTED) BOUNDARIES/WALLs so the ball will not roll out of the stage.

    Is there any way for me to use my own graphics (Movieclip etc) as the WALL?
    Is it possible for the BOUNDARIES/WALL to have a function that allows me to create effect like sound or something when the ball touches it?

    Hope you can help me understand this complicated plugin better~ THANKS!

  78. Flash Game Development Inter-web mash up: Jan 31, 2009 « 8bitrocket.com

    on August 25, 2013 at 11:15 pm

    […] For Absolute Beginners (no Bowie songs included) Emanuele has part 1 and part 2 of his excellent BOX2D tutorials up on his […]

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

×