HTML5 prototype of mobile hit “Flipping Legend” with top down view made with Phaser

Did you play Flipping Legend by Hiding Spot Games and NoodleCake Studio?

From the 5 stars TouchArcade review: “Flipping Legend has you playing as one of several character types who have the ability to flip diagonally across the world, much like a bishop on a chess board. So, you can’t hit anything right in front of you, necessarily. You have to be constantly thinking in diagonals, trying to string together jumps, because your health constantly decreases when you’re not bopping enemies”.

We are going to try to build something similar using HTML5 with Phaser. We’ll need to scale down the gane to a two-dimensional game, loosing some visual appeal but allowing to be played in portrait mode, which is an interesting feature.

As all infinite runners, there’s nothing “infinite” and the player won’t move, but it’s the entire game to move towards the player, giving the idea of the player running through an infinite world.

Also, we need two player sprites, as player can disappear from one side of the path appearing on the opposite side of the path, so in this case the “I am moving out” and the “I am moving in” effects are made each one with its own sprite and tween.

Last but not least, tweens and tiles are reused and once the game starts there’s no need to create new assets.

Let’s have a look at the game:

Click or tap on the left/right half of the canvas to move the hero accordingly. If you have a mobile device, play it directly from this link.

And this is the completely commentd source code, pay attention at the way I am using two sprites when the hero wraps around the path, and how I manage multiple resolutions:

Next time I will use the vertical black bars to place the GUI, meanwhile download the source code.