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.

Following a body with the camera in Box2D – The smart way

Emanuele Feronato Actionscript 3, Box2D, Flash, Game design

We are about to create an intelligent camera that will follow a body in Box2D. What’s the difference between an intelligent camera and a dumb one?

Simple… the intelligent camera follows the object keeping it in the middle of the screen as long as there are enough game area to fill the screen. The dumb one just keeps the object in the middle of the screen, sometime causing to have just a little part of the game on the screen.

Let me make things clearer with a real world example:

In this map, taken from Crystal Kingdom Dizzy, the cherry is followed by a smart camera, because the cherry is centered and the game area fills the entire screen.

Now look at this:

The cherry moved up and the camera followed it in a dumb way: the camera wanted to keep the cherry in the middle of the screen, but doing it will make the game scroll down even if there aren’t enough game area to fill the entire screen.

An intelligent camera should show the cherry this way:

So when the cherry moves in a direction that would make the game scroll away from the screen, the camera has to release it and don’t keep it in the middle of the screen until there is enough gaming area to fill the entire screen.

How do we apply this concept to the catapult prototype?

This way:

And this is the result:

Left and right arrows to move the catapult, spacebar to fire

Download the example and wait for the fully commented 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 12

  1. Bwakathaboom

    Off topic – do you usually use a single-class when developing your games? When do you decide to break off into multiple classes?

    I find other people’s coding styles fascinating.

  2. lala

    very off topic – i wasn’t able to find your contact information. i have been following this blog for almost a year. previously related to 3d graphics now going to learn flash scripting. your blog has always been amazing / informational / rapid update resouce. now when i wanted to start doing exercises, i found it extremely hard to find what i have read at some point. e.g: flash game structure discussions, box2d tutorials, if somehow you can improve menu / navigation. catagorise, then it will be amazing.
    specially if series of tuorials can come under a menu.
    sorry if this disturbs or annoyed.

  3. Lorenzo

    altro off topic: in questi giorni continuo a ricevere errore 500 quando tento di accedere al tuo sito.

  4. AlexRath


    how about some Ease?
    An elastic following, not so hard…
    You know, softer, so that the Ball is not always exact in the middle.
    That shows the speed better.

  5. Peter

    I just wanted to say thanks. Your tutorials have been more help than all the other Box2D resources I’ve found put together. Keep up the good work!

  6. Pingback: Following a body with the camera in Box2D

  7. Pingback: Shifting the camera and setting a new scene when using Box2D - FAQs System

  8. Adnan Afzal

    Hello !

    I love your games and your work. It’s awesome.
    I just want to know how to do the same thing (smart camera) in Box2D JS ?

    Thank you.

Leave a Reply

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