Puzzle game with Phaser 3

During the Hackaton at LINE 2020, I wanted to discover and learn how to use the Phaser 3 game engine.

Though not finished, you can play the game here

Use "wasd" to move adventurer.
Use "qe" to increase/decrease radius.
Use "ji" and "ko" to rotate the blobs.

Why Phaser?

Phaser is open source, it is developed for use on mobile and desktop browsers, and we can use Typescript. Phaser has a large community and lots of examples and resources.

Pros:

Facebook Instant Games ready
Maintainers are continiously improving the game engine
Tons of examples

Cons:

Some of the many examples use Phaser 2, and are outdated, leaving you puzzled why your code does not work
Finding a solution to a bug in your game can be time consuming
It is only compatible in Browsers, with no export functionality to other platforms

I got the first impression from the web site that Phaser was old fashioned, silly, and not too serious. However, it is an engine with a lot of functionality, and updated regularly. Pahser 4 is in development, and the engine itself will be written in Typescript.

About the game

The game is a puzzle game, where you control an adventurer, and her two blobs. The adventurer can move in any direction, but the pets can only move around in a circle around the adventurer. The goal is to get all the playable characters into the goal area.

I originally created a game for a game jam a few weeks present. I got some positive feedback on the game mechanics, so I thought I would brush it up. At that time I was using a different engine, Kontra.js, designed for game jams, which means it has limited functionality. It was easy to use, and I could develop a prototype in four hours. Using Phaser on the other hand, took me around 20 hours, just to create the same mechanics with some additional graphics. That being said, I spent maybe 10 hours just to learn and use Tiled, to create maps with animations. The graphics were made by canarigames.

Radians, Vectors, and Math

Creating the logic to move the blobs in a circle was really taking me back to the school bench. I had to re-learn how radians and vectors worked. Collision detection was also something I struggled with getting right. Even though Phaser automatically detects collision when you give your character velocity (using a 2D Vector), it does not chain collision across bodies. I had to check for future positions, and see if the characters overlapped a wall or not, to make sure that the characters did not move when they should not.

Next Steps

The game is not finished, but I want to continue working on it in my spare time. I want to create a few more levels, some more animations and sound. Hopefully my fellow Liners and friends can pilot test the game, just to see if it has a future or not.

Conclusion

Using Phaser was a weird experience. I struggled with simple things, such as making the collision body be the same size as the sprite. It was difficult to debug the issue, and I stumbled upon a YouTube video that addressed the issue.