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.

The magic of compound objects with Box2D

Emanuele Feronato Actionscript 3, Box2D, Flash, Game design

You can call it complex shapes, compound shapes, complex objects, compound objects or even poisoned underpants, but you all want to create complex “things” with Box2D.

Despite the “complex” word, it’s very easy to create one.

You just have to add multiple shapes to a body.

If you followed my latest Box2D tutorials, you will find the whole code I am going to show you very familiar, with some exceptions I will explain.

But first let’s take a look at what I am going to create: a perfect tile based maze, made with small squares representing the tiles and managed as a single object.

Here it is: if you drag the maze, you will see it’s a single object made (compound) with small tiles – the real objects, used as primitives.

Here it is the code:

You can find the maze at line 16 (yes, I did not create it dynamically, feel free to do it if you want), and now let’s look at the difference between a normal and a compound object.

A normal object, like the green static floor, after the CrateShape method at line 51, has a setMassFromShapes that finalizes the object itself.

If you look at the maze, inside the two cycles at lines 57-58, I only have CreateShape calls while a single setMassFromShapes is called after I completed the cycles.

This way, I am getting all objects merged in one big, compound, object.

And that’s all…

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 19

  1. samuvagyok

    Good article!
    Have you ever tried to use “custom” polygons?
    When I created one in box2d it seems it doesn’t use the physics – no gravity, no collision etc. and I still can’t find any helpful post in the box2d forum. Maybe I missed something that is in the setAsBox method…
    Would you write an article about custom shapes?
    Thanks, and best regards!
    S

  2. Pingback: Understanding custom polygons in Box2D : Emanuele Feronato

  3. Justin Edmond

    I’m getting the same issue as some other people where nothing is showing up…

    I’m digging around the code but I can’t find a reason why it should be doing this.

  4. Pingback: Real world catapult prototype using Box2D : Emanuele Feronato - italian geek and PROgrammer

  5. pbear

    For those getting no result, you need to add a line to set the flags. It was apparently dropped from the previous version. Right before these lines:

    m_world.SetDebugDraw(dbgDraw);
    // debug draw end

    Add:
    dbgDraw.m_drawFlags = b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit | b2DebugDraw.e_coreShapeBit | b2DebugDraw.e_aabbBit | b2DebugDraw.e_obbBit | b2DebugDraw.e_pairBit | b2DebugDraw.e_centerOfMassBit;

    And you should be able to see what is going on.

  6. Zerchan

    for(var currentBody:b2Body = world.GetBodyList(); currentBody; currentBody = currentBody.GetNext()){
    if(currentBody.GetUserData()){
    if(currentBody.GetUserData().skin){
    currentBody.GetUserData().skin.x = currentBody.GetPosition().x*worldScale;
    currentBody.GetUserData().skin.y = currentBody.GetPosition().y*worldScale;
    currentBody.GetUserData().skin.rotation = currentBody.GetAngle()*(180/Math.PI);
    }
    }

    The render loop it’s the same??

  7. Pingback: Flash Game Development Inter-web mash up: Dec 17, 2008 « 8bitrocket.com

  8. Pingback: The magic of compound objects with Box2D – HTML5 version powered by Phaser | Emanuele Feronato

Leave a Reply

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