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.

Understanding polygon clipping and introducing PolygonClipper AS3 class

Emanuele Feronato Actionscript 3, Flash

This is the second step in the creation of a Box2D (or Nape) destructible terrain without using bitmaps and marching squares rendering.

Let me do a small recap showing you some related, interesting posts about the topic:

* Using marching squares algorithm to trace the contour of an image – to trace the contour of a PNG image with transparency and turn it into a polygon.

* Reduce the number of points in a polygon with the Ramer-Douglas-Peucker algorithm – to reduce the number of points and vertices of the polygon.

* Polygon triangulation: decomposition of a polygon into triangles with AS3 – to split polygons in triangles.

* Create non-convex, complex shapes with Box2D – to make Box2D able to triangulate complex shapes and render them correctly.

* From PNG to Box2D – first attempt – putting all together.

The final example worked, but it did not allow me to create polygon with holes. The final goal of making a destructible terrain is the capability of adding holes in it.

So I played a bit with poly2tri class, which allows holes but does not want holes to overlap or break polygon perimeter.

Next step is using a library which handles polygon clipping. Angus Johnson made a Delphi script which manages difference, intersection, exclusive-or and union between polygons. It’s called Clipper, and has been ported to AS3 by Chris Denham, and it’s really what I need.

With this simple script:

I am able to show you the four ways to perform polygon clipping:

From left to right, top to bottom, respectively intersection, union, difference and xor of two overlapping triangles.

Next step will be managing holes with this class to handle holes and poly2tri to triangulate resulting polygons. And finally we’ll have our Box2D/Nape pure destructible terrain engine.

Game design ideas are welcome, meanwhile 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 2

Leave a Reply

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