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 Flash game creation tutorial – part 2

Emanuele Feronato Actionscript 3, Box2D, Flash, Game design

After seeing the character creation in Box2D Flash game creation tutorial – part 1, it’s time to add some coins to collect.

This process will involve some interesting Box2D features, like sensors and custom collision management.

I would suggest to read the basics of sensors at Erase Box: the tutorial and custom collision management at Creation of a Flash Stabilize! clone using Box2D – part 4.

Although they are both referred to an older Box2D version, they’ll introduce you to sensor and collisions.

Now the concept is simple: we are placing some circular sensors around the stage (the coins), then we’ll create a custom contact listener class to check whether the player is over a coin or not. If it’s over, we’ll remove the coin.

So this is the main script:

Let’s see the interesting lines:

Line 22: declaring my contact_listener variable, as custom_contact_listener type

Line 25: assigning my custom contact listener class to Box2D world

Lines 36-38: calling five times the draw_coin function passing three parameters: x position, y position and radius.

Lines 79-89: the draw_coin function… just a basic function that draw a circle… just notice at line 86 how I am declaring the circle as a sensor. This way the circle exists in the world but won’t physically collide with anything. Also, a sensor should be a static body, or it will fall down outside the stage as it won’t collide with anything.

Lines 150-156: scanning through all bodies to find, and eventually remove, bodies marked with remove. Such marker is handled by the custom contact listener class, located in the custom_contact_listener.as file:

BeginContact function will give us the fixtures involved in the collision. Then at lines 15-17 and 18-20 I am checking if the fixture is a sensor, then eventually mark its parent body to be removed.

Important: don’t try to remove the body inside this function, because bodies have a locked status while they are in the middle of a timestep, so you should remove a body only after you performed the Step (line 147 of the main file). This gave me a little headache, so you’ve been warned!

This is the result:

Pick up all little circles moving the player tapping on arrow keys.

Download the source code.

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 7

  1. manish

    i m in a in animation school quite wonderful
    using box2d as environment makes our job easier even i do not know much programming to make something nice animation thanks
    post but a question why u always wear a cap I saw your many pics on facebook

  2. Dave Fulton

    Awesome stuff! Box2D is my next area of exploration with actionscript so it’s great that you are sharing so much valuable information.

    I can’t seem to get Box2D to work with CS3 though… is there a version conflict?

  3. Pingback: A Freelancer’s Flash Bash [6] | Freelance Flash Games News

  4. Ollie

    Thanks for the tutorial.

    Is it possible to read the position of the sensor? It reports a position of 0,0 when I call .GetPosition

  5. Pingback: Getting a contact point between two bodies in box2d as3

  6. Jack

    Sorry I cannot comprehend this.

    You draw a black box with “UD” as the variable?
    But this is only up, down, left or right?
    And that somehow handles the collision detection?

Leave a Reply

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