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.

Totem Destroyer prototype made with Dreemchest

Emanuele Feronato Box2D, Game design

Do you remember Dreemchest? It’s an amazing 2D development engine packed with features I blogged about some time ago.

Meanwhile Dreemchest evolved and got a bunch of new features, and now the first Dreemchest-powered game, Match them All, has been released on the App Store.

Do you want to have a brief overview of Dreemchest capabilities? Let’s see how to crate a Totem Destroyer prototype in just a few steps. The aim of the tutorial is to create some physics crates destroyable with a mouse click, using the WYSIWYG editor.

First, we want to create a standalone project, which is an executable file to be run on the computer. Let’s enter the resolution and the project name.

We need some graphics, so in the Assets panel let’s start to import assets.

A large brown bar will be our ground, so we are placing it at the very bottom of the stage.

It’s just a PNG image at the moment, so we need to create a physics body which will represent it. In the Assets panel let’s create a shape.

Which kind of shape are we going to create? A rectangle

We assign the newly created shape the same size of the PNG ground

Now that the ground physics body has been created, drag and drop it onto the PNG image to bind physics body to the image.

And we are done with the terrain. The creation of the blocks will require just a little bit of scripting because of the mouse listener.

Create a new script

Which will contain this lua code:

It’s now easy to load the new crate asset and assign it the bmpCrate class and the physics shape with shCrate class.

At this time, just drag and drop the class on the stage and you will create physics driven boxes which will disappear on mouse click.

This is how your main project will look when you’re done:

As you can see, with Dreemchest you can easily create games with basic scripting and a WYSIWYG editor. Download the project source code or the final Windows exacutable.

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 1

  1. Lennard

    The Dreemchest website is woefully short on info. What they are promising is compelling but soon they will have to contend with Unity 2d which will hit the same platforms but also include a web player.

Leave a Reply

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