Phaser tutorial: how to create an HTML5 survival horror game in 6 easy steps

As promised, here we go with the full tutorial to create the survival horror engine I showed you in the post A quick HTML5 survival horror prototype made with Phaser.

The concept is the same as already explained in the original AS2 post Create a survival horror game in Flash tutorial and its AS3 version: Create a survival horror game in Flash – AS3 version.

With Phaser everything is built upon bitmapData and its getPixel32 method.

Let’s split the prototype in 6 steps

1 – PLACING GRAPHIC ASSETS ON STAGE

Here we just place the floor texture, the player (a green square) and the walls which is a PNG image with transparency. Using a black color to draw walls while leaving empty space transparent gives the best results.

And this is the result:

Don’t try to interact with it because it’s only a canvas with three images.

2 – MOVING THE CHARACTER WITH ARROW KEYS

As you will see in the highlighted lines, I am creating a cursor key listener and assign each key press an horizontal and vertical speed. If one and only one arrow key is pressed, the player moves.

Here is the result: try to move the player with arrow keys.

Unfortunately, walls does not stop the player, so it’s time to add the first hit test using getPixel32 method

3 – PREVENTING THE PLAYER TO WALK OVER WALLS

To prevent the player to walk over walls, we simply check if the player is about to hit the wall with one of its vertices. We simply need to check the color of walls image at green square vertices coordinates.

And here it is the result: try to walk over the walls

You can’t. There are several, more optimized ways to do this, but since the main topic of the tutorial is getPixel32 method, I used it for player movement too.

From now on, we’ll be focus on the torchlight.

4 – WALLS VERSUS RAYCAST

This is the concept: starting from player origin, we emit a series of rays at a given angle interval, checking at every pixel if a ray hits the wall and stopping it accordingly. This will represent the torchlight.

The result is here. Try to move the torchlight with the mouse.

Now it’s time to turn a series of rays into a filled area

5 – RAYCAST TO AREA

In this fifth part I only made some changes to turn a series of rays into an area, nothing interesting from a programming point of view

Now the torchlight moves filling an area rather than just shooting a bunch of rays

Now, it’s time to turn a yellow area into an actual flashlight

6 – MASKING THE FLOOR

To create the flashlight effect, you just need to use torchlight bitmap as a mask for floor image. Randomly change floor alpha to create a flicker effect

And this is the final result. See it by yourself

That was incredibly easy, wasn’t it? That’s the magic of Phaser. I plan to extend the prototype adding enemies, what do you think about?

Meanwhile, download the source code and give me feedback.

  • Oleh

    niiiiiiice!

  • i see only black stage

    i see only black stage

  • Miwwa

    Can you say, how make floor not full black, with some alpha opacity, like twilight ?

  • Great tutorial! Always something to learn on this website!

  • Erasne

    Awesome tutorial! If you show us how to add enemies or get coins, candys or treasures, it will become complete!.

    If you add some features to the examples, just let us know!

  • Chris

    Great tutorial! It is nice to see how easy this can be implemented using Phaser.
    I would be very interested in seeing how you would implement enemies to this game. And also something that would make it more realistic: add a visible area around the player so you can see a little bit around him, which seems more natural.

  • Matthew

    this really is a very cool tutorial, I can’t wait to put it to use. Thanks Emanuele!

  • Great post and ideas for a game! We are also exploiting Phaser for developing an hotel browser game :)

  • Pingback: Play with light and dark using ray casting and visibility polygons | Emanuele Feronato()

  • Hi Emanuele
    Thanks for this clever tutorial.
    Just allow me to underline one thing : the getPixel32 method doesn’t work correctly on both IE9 and 10. Both of them return wrong values, and besides, they behave differently from each other… strange, as usual with IE.
    So the solution I suggest is to use the getPixel method, and then test the .a channel like this :
    var color = wallsBitmap.getPixel(x, y);
    if(color.a === 0){…};

  • Can you mask a sprite that is above everything? for example a transparent sprite

    Thanks for the tuto Senpai! :D

  • Hi Emanuele,

    Bro, is possible to apply this concept with tilemaps in Phaser? :o

    Regards, Nicholls

  • Greetings, how would one do this with a circular radius, while colliding with a sprite’s edges? For example, if a character was holding a torch?

  • Egemen

    Spent my hours trying to fix an issue, where the lines disappear when they satisfy if(wallsBitmap.getPixel32(landingX,landingY)==0)

    Then i realised you put maskGraphics.moveTo(player.x,player.y); IN THE INNER LOOP, then checked the next step and there it wasnt there, thats wrong, please fix it in the 4th step.