Puzzle game with Phaser 3

We had a hackathon at work in 2020, and I wanted to discover and learn how to use the Phaser 3 game engine. The version I used at the time was Phaser v3.24.1.

Though not finished, and only 1 level, you can play the game here

• Use "wasd" to move adventurer
• Use "qe" to move the monster blob pets closer or farther away from the adventurer
• Use "ji" and "ko" to rotate the monster blob pets

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 continuously 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
  • Remember to check which version of Phaser the example is using
• Finding a solution to a bug in your game can be time consuming
• Out of the box, Phaser is only compatible in Browsers, with no export functionality to other platforms
  • Using Electron, it can be possible to create Desktop apps
  • Creating a WebView in Android or iOS, you can also embed the game on a native app, but you have to figure it out yourself

My first impression from the web site was mixed. I felt Phaser was old fashioned, silly, and not too serious. However, it is an engine with a lot of functionality, and updated regularly. Phaser 4 is in development, and the engine itself will be written in TypeScript. Phaser version 3 is also in active development, and I've later come to grow and like Phaser more and more. Even though my first impression wasn't that great, It have become my favorite game engine to work with. I've used Unity in the past, and Unity is a great piece of engine as well, but debugging is so much faster in Phaser, and I'm able to focus on the game instead of everything else Unity offers. I can play around with particle effects and shaders for hours. It becomes a trance I cannot easily escape. Phaser on the other hand makes me focus on the game itself, focusing on the core elements, and not get lost in the jungle of effects and eye candy in Unity.

About the game

The game is a puzzle game, where you control an adventurer, and her two monster blob pets. The adventurer can move in any direction, but the monster blob pets can only move 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 far from finished, but I don't think I will continue working on it. I played it again, 3 years after developing it, and the controls are too difficult. I only get frustrated while playing the game, which isn't a good sign. Maybe the game plays better with a controller, where I can use the thumb sticks to control the pets.

Conclusion

Using Phaser for the first time 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.

There are also tons of examples, but somehow I managed to spend too much time struggling with what seemed simple, like collision boxes, animating a sprite, setting up the tile map, figuring out how to use phaser extensions and more.

That being said, after spending some more time on different games in Phaser, I overcome all of those basic obstacles. Since 2020, I've used Phaser in two other game jams, and I've grown since I used it the first time. It does not take so long to develop (simple) Phaser games. The examples are also really useful https://labs.phaser.io/, and I recommend looking at them to figuring out the basics, and which techniques to use. That will be enough for you to customize and use it to your liking.

If you liked this blog post, or want me to elaborate on other topics, consider following me on Twitter, @ReitGames, and mention me in a Tweet. Happy coding!