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.

Slicing, splitting and cutting objects with Box2D – part 4: using real graphics

Emanuele Feronato Actionscript 3, Box2D, Flash

The fourth part of this tutorial comes from Antoan Angelov and not only allows us to slice any kind of bitmap image mapped on our Box2D objects, but also improves the code making it faster and more robust.

This is the final result:

Use the mouse to slice objects.

And this is the fully commented and explained code:

userData class is as follows:

The result is really amazing so I think we’ll see some new game concepts using slicing.

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 31

  1. James

    That is so cool. I’m sure it won’t take long for someone to develop a game that revolves around Sharks with lazer beams on their heads…

  2. MC

    I noticed this developer used beginBitmapFill insted of masking to show the texture… Is this better / optimal than masking in cpu terms?

  3. Antoan Angelov

    I think this is the best way to do it. If you make a sprite which holds the texture image and a mask, its probably slower because the CPU has to render both the sprite and the mask. You could use an alpha mask on a DisplayObject (MovieClip, Sprite, Bitmap, etc.) – you do it by using BlendMode.ALPHA (, but I think its slower too, because the CPU renders two display objects here as well. The beginBitmapFill() method does not require additional sprites, thus it makes is easier for the CPU to render.

  4. Pingback: All you need to know about how to write Box2D game | Artits Rastas

  5. Dev

    Thank you for such a nice tutorial, But in my case I am using physics editor for editing physics parameters and getting vertices of a complex object. Physics editor gives me shape using a combination of different shapes. and eventually a single body will have different fixtures associated with it. This algorithm assumes a body will have single shape,fixture associated with a body.
    so how can we slice an object which is composed of different shapes.

    @mmankt, you are saying that the best way of doing this is using uv mapping of polygon. Do you have any reference/blog post regarding this or can you please provide me hints on this.

  6. bht

    I’ve tried to port it to iOS, and most of the time its quite ok, but there are a lot of b2Asserts unfortunatelly… (Assertion failed: (m_I > 0.0f))

  7. Pingback: How To Make A Game Like Fruit Ninja With Box2D and Cocos2D Part 1 | Ray Wenderlich

  8. Pingback: How To Make A Game Like Fruit Ninja With Box2D and Cocos2D Part 1 | | Hacker ColonyHacker Colony

  9. mohit parihar

    sir its possible to change this code into j2me for mobile, if it possible then give me j2me version of this source code.

  10. Pingback: ???? Box2D ? Cocos2D ????Fruit Ninja??? Part 1 | ??

  11. Tetsuken

    I’m new on game programming and begginer on programming and i found your site and its been very usefull as knowledge source, i’m here to ask if is possible use that slicing functions on STENCYL?

  12. Pingback: ????Box2D?Cocos2D?????Fruit Ninja?????-?1??

  13. Pingback: Cómo hacer un juego como Fruit Ninja utilizando Box2D y Cocos2D – Parte 1

  14. Pingback: ????Box2D?Cocos2D?????Fruit Ninja?????-?1??

  15. Pingback: ????Box2D?Cocos2D?????Fruit Ninja?????-?1??

  16. yann


    how you made ??to raise the limit on the number of vertices in a polygon.

    because in java the limit is 8 vertices per polygon.

    In other words your code if a cut was creating a polygon with 9 sides my application crach.


  17. Pingback: ????Box2D?Cocos2D?????Fruit Ninja?????-?1?? | ??????????????

Leave a Reply

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