Create HTML5 Vertical Endless Runner cross platform games

Using Phaser framework and other FREE software
Endless runner games are gaining more and more popularity and they are really easy to code.
I will take you by hand through the creation of a complete HTML5 vertical endless runner cross platform game with a lot of features and room for customization.
100 pages + 31 source code examples with a free update to come in a few days.

Box2D: tutorial for the absolute beginners – step 2

Emanuele Feronato Actionscript 3, Box2D, Flash

After understanding the meaning of the first lines in Box2D: tutorial for the absolute beginners, it’s time to explain the rest of the script.

Lines 19-27: These lines handle the debug draw. Remember Box2D does not draw anything, it just calculates position, rotation and motion of every object in the world. So it’s up to you to attach real graphic assets to worl objects. Anyway, with some lines you can enable a debug draw mode that will help you during the creation of your script. For more information about debug draw read Understanding Box2D debug draw.

Line 28 declaring final_body, b2Body type. b2Body is the object used to represent one rigid body. A rigid body is a chunk of matter that is so strong that the distance between any two bits of matter on the chunk is completely constant. They are hard like a diamond. Box2D only handles rigid bodies.

Line 29 and 31 declare and create the_body variable, b2BodyDef type. b2BodyDef handles the body definition. With the body definition we can specify the initial position of the body.

Line 30 and 33 declare and create the_box variable, b2PolygonDef type. b2PolygonDef is a polygon definition.

Line 32: setting the initial position of the body. Remember values are in meters and refer to the center of the body.

Line 34: SetAsBox function takes the_box and turns it into a box, passing the half-width and half-height as parameters. Read carefully… half-width and half-height. In meters.

Line 35: defining the friction of the box

Line 36: defining the density of the box. Setting the density of a body to zero, like in this case, will make the body static. A static body is not affected by gravity, collisions and so on. It’s just fixed in the stage. This will represent the ground.

Line 37: CreateBody creates the body previously defined

Line 38: I am creating the polygon shape previously defined with CreateShape on the body previously created with CreateBody

Line 39: Once the shape is attached, we instruct the body to compute its mass properties from the attached shapes using the method SetMassFromShapes. This is when the objects really exists.

Lines 40-42: Adding some listeners

Lines 45-58: This function, to be executed at every second, creates a box in the same way I created the ground, with the only exception at line 54 I am setting a density different than zero, meaning the body is not a static one. Every body with a density will react to collisions, gravity, forces and so on.

Lines 60: We must update the world at every frame. We can do it with Step function. Step has two parameters: the first is the time interval, in seconds. It means at every frame I am going to update the world as if 1/30s passed. The second is the constraint solver. The constraint solver solves all the constraints in the simulation, one at a time. A single constraint can be solved perfectly. However, when we solve one constraint, we slightly disrupt other constraints. To get a good solution, we need to iterate over all constraints a number of times. The suggested iteration count for Box2D is 10.

And now the entire script has been explained.

If you manage to turn this script into something interesting, send me at once and I’ll publish it on the blog.

Stay up to date
Follow me on the social networks and never miss a post.

Official Emanuele Feronato Facebook page

Official Emanuele Feronato Twitter account

From null to full HTML5 cross platform game

I will take you by hand from the bare bones of JavaScript programming through the creation of a full cross platform HTML5 game, with detailed explainations and source code.

If you don't know where to start, then From null to full HTML5 cross platform game is the book for you.

Comments 14

  1. yacine

    but how to creat a 2d car game with suspensions.
    please send me the tutorial with source
    thanks you make great tutorials

  2. Arxanas

    YES! I will soon enough figure out AS3!

    Just wondering, but is there any specific reason Box2D was ported into AS3?

    Does AS2 lack the functionality needed to make Box2D work, or is AS3 the choice because it is more powerful?

  3. Niall Lavigne

    @Arxanas – it was ported to AS3 mainly because AS3 resembled C code in the way it works and occasionally in layout too – making it easier to work and definitely very fast.

    AS2 would probably be too time consuming and slow to use, though I tried porting it once. I should probably finish that…

  4. Pingback: Weekly Shared Items - 30. January, 2009 « toxin 2.0

  5. Pingback: Box2D - Tutorial para novatos en el manejo de librerías de Física con AS3 « Shift F12

  6. Nils

    1. Can you describe how to set the gravity for the earth?
    2. What are the major diffences between version and

  7. Vinicius


    just so you know, I’ve been struggling all day with this (otherwise amazing) tutorial, and finally managed to make it work, but some important changes occured in the last version of box2d.

    A list of some of them is available here :

    for example, b2World creator takes now 2 arguments instead of 3, b2World.Steps takes 3 instead of 2, debugDraw properties cannot longer be set dynamicaly but by calling methods (debugDraw.SetFillAlpha(0.3) instead of debug_draw.m_fillAlpha=0.5) and so on.

    Thanks all the same and keep up the good work.


  8. Sam

    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.

    If you have any questions, ask. :-)

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


    PS: Sorry for the same comment post, Emanuele.. (Just in case someone saw this post first.. :P)

  9. Pingback: Ninja Robot Dinosaur » Blog Archive » AS3 Boot Camp – Learn to program Flash games in 30 days

  10. Sharan

    Hey…. I found this tutorial really helpful but am facing a problem. When I try compiling any of the files given, I get an error saying:

    2.1a_2\Source\Box2D\Dynamics\, Line 871 1046: Type was not found or was not a compile-time constant: b2Fixture.

    Please do help. I need this for my project really quick.


Leave a Reply

Your email address will not be published. Required fields are marked *