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.

How to create the sequel of a game

Emanuele Feronato Actionscript 3, Box2D, Flash, Game design

During these days I am playing with Box2D to create the sequel of SamePhysics.

It was my first Box2D game (you can download the source code here), people found it funny so I decided to make a sequel to improve some features I missed in the original game.

Since it’s my first sequel, I had to make some considerations before starting to code. That’s what I want to share with you.

1) Choose wisely which game deserves a sequel

This is the first thing, and the most obvious one. If people did not like the original game, probably they won’t like the sequel. Or, even worse, they won’t even look at it. With two sponsors, ranking higher than 3 and 3.5 respectively on Kongregate and Newgrounds and more than 2.5M views, we can say people liked SamePhysics

2) Fix issues according to the feedback

You don’t upload a game to Kongregate just to make it spread virally, do you? The most interesting thing about Kong is the qualified feedback players give to the game. The aim of a good sequel should be improving things people liked, and reducing things people did not like.

In the original game, one of the major flaws was the collision detection. Using the contact listener class included in Box2D, I was be able to see two boxes as “colliding” only if they collided for real in the physics world. Too bad the sprites on screen are just a visual representation of such world, so if two of them aren’t touching because there are, let’s say, two centimeters of empty space between them, there’s no way to show such a tiny distance on the stage. At 30 pixels per meter, I would need 0.6 pixels to show two centimeters, but I can’t do it.

Look:

In the physics world the left red crate isn’t touching the right one, but what the player sees is they touch, so he expects to be able to remove them both.

In the sequel I did not use the custom contact listener but I used some tricks to create some kind of “what you see is what you get” effect with even a tolerance.

In this picture the boxes marked with arrows do not touch, but they are so close that players would expect (or at least hope) they touch. So, I made them touch. Moreover, playing with such tolerance, I also solved point 3:

3) Add a new game mode

Making a reskin of the game or just adding some levels can’t be considered as a sequel. You should add a new game mode. Playing with the tolerance mentioned above, I can create various game modes, let’s say “realistic”, “arcade”, “nightmare”, and so on.

4) Improve the graphics

You will need to polish, or even better, redraw the graphics. Players have to see your worked and improved your skills in the the time passed since the release of the first game. And, above all, you made your best to make the game better. I am still playing with the graphics but I think I will be using strange characters rather than simple crates.

5) Add new elements to game design

Would you play another Angry Birds game with the same old birds? That’s why Angry Birds Space introduced a new environment and new birds. The game is basically the same: try to randomly fire a bird hoping to kill all pigs, but the radial gravity and the new birds added a new twist, so now we can try to randomly fire a bird hoping to kill all pigs, but, and this is the key, having fun.

6) Have a look at new APIs

How many time passed since the release of the original game? Probably the APIs you used to manage leaderboards and handle achievements changed, and introduced new features. You will need to stay up to date with the new APIs because a new game with old APIs is worse than an old game with new APIs

That’s it at the moment, I hope you will see the sequel in a week or so.

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 5

  1. Emanuele Feronato

    During these days I am playing with Box2D to create the sequel of SamePhysics.

    It was my first Box2D game (you can download the source code here), people found it funny so I decided to make a sequel to improve some features I missed in the original game.

    Since it’s my first sequel, I had to make some considerations before starting to code. That’s what I want to share with you.

    1) Choose wisely which game deserves a sequel

    This is the first thing, and the most obvious one. If people did not like the original game, probably they won’t like the sequel. Or, even worse, they won’t even look at it. With two sponsors, ranking higher than 3 and 3.5 respectively on Kongregate and Newgrounds and more than 2.5M views, we can say people liked SamePhysics

    2) Fix issues according to the feedback

    You don’t upload a game to Kongregate just to make it spread virally, do you? The most interesting thing about Kong is the qualified feedback players give to the game. The aim of a good sequel should be improving things people liked, and reducing things people did not like.

    In the original game, one of the major flaws was the collision detection. Using the contact listener class included in Box2D, I was be able to see two boxes as “colliding” only if they collided for real in the physics world. Too bad the sprites on screen are just a visual representation of such world, so if two of them aren’t touching because there are, let’s say, two centimeters of empty space between them, there’s no way to show such a tiny distance on the stage. At 30 pixels per meter, I would need 0.6 pixels to show two centimeters, but I can’t do it.

Leave a Reply

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