Cube Koala clone

Create a game like Cube Koala with Phaser, and use Tiled as a level editor. First, take a look at Cube Koala if you are not familiar with the game already. It has a really simple yet strong game mechanic, where you rotate the world around the player to reach the gaol.
We replicate this behavior with the Phaser game engine in HTML5. We use the P2.js physics engine, which is part of Phaser, to simulate the physics. But first of all we have to build a level with Tiled which we load and compile in Phaser later on.


create a level

We use a tile based level, which means we need a tileset and Tiled as a level editor. Keep in mind that we have to compile the tilemap later, if there are rotated or mirrored tiles we have to add this abilities to our compiler as well. This is not a huge problem to add, it’s just not included in the basic script below.


First level
32x32pixel tileset



The idea is to move the world center to the center of the screen, the world center is by default on the top left of the screen (0,0). Add the tilemap level with an offset to move the player to the world center, which acts as pivot for the level rotation. Since we have to keep the player at the world center, we have to move the level instead of the player. To move the level we use the gravity force, wich is currently applied to the player, and apply it to the level. Therefore we have the level moving accordingly to the world physics while the player is still at the center and can rotate around itself. To rotate the level we rotate the whole world and alter the gravity to match the new world angle.
To keep things simple, the script below shows the most basic version without rotated or mirrored tiles, no spikes or hit detection, no exit or level reset.

use and to rotate the world



Although the full script is uncommented about 100 lines code, the result is amazing. I could play hours creating and testing new levels. The game mechanic work just fine and the performance is great, even on mobile devices.