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.

Simulate radial gravity (also known as “planet gravity”) with Box2D as seen on Angry Birds Space

Emanuele Feronato Actionscript 3, Box2D, Flash

With the launch of Angry Birds Space I am sure you are wondering how to simulate planet gravity with Box2D.

And guess what… the basics are very easy.

First, in space there’s no gravity, so you will create a b2World world without gravity this way:

Then, it’s just a matter of applying Forces according to bodies and planets position.

Look at this script:

The whole code just create static bodies (planets) and let you place dynamic bodies (debris) with the click of the mouse.

The only interesting part of the script is the for loop in the update function, which I’ll explain line by line:

Loop which scans for all debris previously stored in debrisVector Vector declared at line 14 and updated at line 54

Gets debris position

Loop which scans for all planets previously stored in planetVector Vector declared at line 13 and updated at line 38

I need to know the mass of the planet because the bigger the mass, the more intense the gravity attraction. Unfortunately Box2D static bodies do not have mass, so I need to get the circle shape of the planet…

… and get its radius. So in this case the bigger the radius, the more intense the gravity attraction

Gets planet position

Creates a new b2Vec2 variable which will store the distance between the planet and the debris

Adds debris coordinates, then…

… subtracts planet coordinates

Calculates the distance between the planet and the debris

Checks if the debris should be affected by planet gravity (in this case, the debris must be within a radius of three times the planet radius)

Inverts planet distance, so that the force will move the debris in the direction of the planet origin

Gets the sum of distance vector components. I will need this to make gravity attraction weaker when the debris is far from the planet, and stronger when the debris is getting close to the planet

This is the final formula to make the gravity weaker as we move far from the planet

And finally the force can be applied to debris

This is the result:

Click to create debris.

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 20

  1. Post
  2. Asr JW

    great tutorial!!.
    if you could help me?! Can you make a tutorial to make a dress up game to be like the game MapleStory ^_^

  3. Phil Harvey

    Code works nicely, I converted it to use ND2D and build mobile (iOS and Android) builds, and they run at a very nice frame rate.

  4. Fede

    Grazie Emanuele!

    What happens if the “planet” gets destroyed in the tick method? I get some strange behaviours from the “debris” bodies in a similar game but wanted to check if your version does the same.

  5. Pingback: ??????Box2D???????? | ???

  6. TNT

    Hi there…
    I am not really sure if this setup is the only thing to get it as accurate as possible. If you shoot such a box, (just simple apply force) it is very easy for the box to escape the planet. Instead, what I would want to try is; how can you get the box orbiting around the planet and land softly on the surface. This way, the box will orbit around the planet and the distance between surface and box is getting smaller and smaller.
    How can you do something like that? Any ideas would be very helpful!

  7. Pingback: No, this is not going to be Angry Birds Space v2 ;-) « MV Fusion

  8. shanshan

    sorry im very entry level, this could be a totally stupid question, but I could what’s this initializing doing here:
    private var planetVector:Vector.=new Vector.();

    So is planetVector an array?
    If so: why not just declare it as an array?
    If not: whats the difference between using Vector. and an array of b2body?

  9. Pingback: Simulate planet gravity with Phaser + Box2D as seen on Angry Birds Space | Emanuele Feronato

Leave a Reply

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