Build a HTML5 game like iOS lovely puzzle game “Warp Shift” using Phaser

Recently I started playing again Warp Shift by Deep Silver FISHLABS on my iPhone and between a level and another I thought it could be fun to create something similar in HTML5 using Phaser framework.

Warp Shift is a unique puzzle game set in a mysterious world. AppSpy says that it “is well-balanced and gorgeous to look at and filled to the brim with innovative twists and new ideas.”

It’s not easy to create a detailed tutorial of a game like this one, so we are approaching it step by step. In the first step, this one, we are going to build the engine which will render the first three levels. There’s a precise reason behind this choice: they are the most basic levels, as starting from level 4 new elements are added, and as said we are going step by step.

Let me show you the tilesheet used in the prototype:

We have, from left to right, top to bottom: the closed block, the block opened on the top, the block opened on the right, the block opened on the bottom, the block opened to the left, the player and the exit.

This is how original levels are rendered:

And this is the script capable of doing it:

Download the source code and familiarize with it because next time I will show you how to add more complex levels and above all how to add interactivity to the game.

  • Adam

    Hi, are you available for freelance? I have an issue with fonts on cocoonjs canvas+ phaser ios but not android.