From Game, to Web, to Web Game Dev!

I had been working for almost four years as a Game Developer, and my main tools were Unity and Unreal Engine 4. I used to love working especially with Unity, for its simplicity. Some years ago, I left my Game Dev job and I ended up working as a Web Developer.

Although my focus switched towards different technologies (like HTML, CSS, Javascript and React), I still love programming video games in my spare time, indeed, I do some experiments sometimes. Since I recently got familiar with Javascript and the Web Dev world, I was curious to try some HTML5 Game Engine, and I discovered there are a lot of them: Three.js, Pixi.js, Babylon.js, Phaser, etc.

They share some features, and most of them are open source and free. But they are also a lot different from each other. Three.js is better for 3d stuff; Pixi.js is just a render engine in the end; and then I found that Phaser was something more similar to my old buddy Unity, so I gave it a try.

Premise: this is not a review, but it is more about my walkthrough with Phaser and some opinions. And this is neither a coding "Getting Started with" type of article, you will find no code here, but I will share some useful references which have a ton of them!

I suggest you to read this post if:

• you are curious about Phaser, and you need an overview;
• you need some good references and starting points.

What Phaser is and what it is not

Phaser is a popular HTML5 Game Engine library, written in Javascript, and it also supports Typescript. The library is open source, and maintained by Photonstorm.

The current version of this Game Engine is 3, but Phaser4 is under development with a lot of new features (you can stay tuned on the official Discord channel, under the sub-channel "-phaser-4").

A Game Engine is a software framework primarily designed for the development of video games, and generally includes relevant libraries and support programs. Usually the developer will have utilities to handle graphic, sound, input, scene graph, physics, etc.

Just to name a few things, with Phaser you can: move and animate your sprite sheets; you can handle collisions among them; you can create a scene which can contain a UI or a tiled map; you can play sounds; etc.

Soon I discovered the first main difference between my previous love (Unity) and my new toy: Phaser is just a Game Engine, and sadly, not also an Authoring System.

On the other hand, Unity is an example of an Authoring System, which means that, on top of the Game Engine libraries, you have also a software with a nice UI that you can use to easily interact with your game content. This is useful especially for a Designer, for example to modify game scenes, tweaking some game parameters, etc.

Here is a screenshot of Unity.

Phaser has no official UI tool software such as that, and you need to achieve this goal using other means (like Tiled, if you need to design your game levels, for example).

This could be a bit of a barrier for newcomers to the game dev world.

That being said, I have recently discovered Ourcade Studio, which is basically something similar to an Authoring System for Phaser, developed by an external team. This tool seems promising and trying it is on my Phaser to-do list!

Here is a screenshot of Ourcade studio.

Starting points

Besides the official Phaser Documentation, which is pretty good, I also immediately noticed that Phaser has a huge and strong community, which is a big bonus for me.

I started to subscribe to some good channels, which I warmly suggest to you:

• Phaser Official Discord Channel,
• Phaser Official Newsletter
• GameDevJS Newsletter
• Ourcade (a friendly Youtube channel about Phaser and Web Game Dev)
• Emanueleferonato blog (an exhaustive blog about HTML Game Dev)

When I needed some guidance, these were my pillars, my saviors.

Thank you random Discord users, who answered my newbie questions!

Video Courses

There are a lot of Phaser tutorials and video tutorials online, I tried some on UDemy for example, but if you would like to try something for free I really suggest you to stick to the RoadMap of Ourcade. I found a lot of useful tutorials and tips on his Youtube channel.

Template and Typescript support

I wanted to work using Typescript, which is almost mandatory nowadays (IMHO). So, I started using a template like this, then I customized it adding the Typescript support.

Phaser has a very good support for Typescript. I have just found a couple of minor issues, but nothing to worry about (I just disabled the checks using //@ts-ignore in those rare cases).

You can find my phaser template here.

Discovering Phaser

Here is a quick overview of some systems:

• The scene system is pretty good: you can also have multiple active scenes at the same time, which could be very handy for a huge variety of situations (for example you want to dedicate a layer/scene only to the UI).
• The event system works fine, and you can use these events to communicate between different phaser scenes or with other libraries if you want (although Redux is more convenient to trigger a rendering with React).
• The camera system is good as well: you can do basic stuff like zooming, adding an offset, tweaking the lerp values, etc.
• The input system does its honest job, although I spent more time than I wanted to set it up, it is ok and it also has the possibility to recognize combos.
• The UI system is very basic, sadly I didn't find many utilities (more info in the next paragraph).
• The physics system has the option to choose which library to use, and the default one (Arcade) is quick and easy to use (more info within the relative paragraph).
• The animation system is easy to use at first, but then... it gave me some challenges dealing with advanced stuff (check out the relative paragraph).
• The particle system gives the developer a variety of options to juggle with, and I had fun creating effects during my first project. A particle effect is when you see, for example, small confetti-like sprites all over the game, which are used especially for: animating celebrations; to dissolve sprites (like when you strike rows with Candy Crush, see gif below); to simulate motions; etc.

Now, let me go more in depth with some of these systems.

UI System

During my first experiments, I tried to use as many Phaser features as possible, since it was the matter of my learning, but I discovered soon there were no ready components to organize the user interface effectively, nothing similar to the CSS flex-box, nothing similar to the anchor system of Unity UI, so after some first tests I fell back to React for the UI, which I was more familiar with at the time.

Soon, I will publish a new article regarding how to use Phaser and React properly together.

That being said, there is an external plugin developed by Rex Rainbow team, that provides a lot of UI utilities, you can find out more here, and here for more info like documentation and examples.

Here is an example of the RexUI textbox/dialog components.

Learning by publishing

After some first tests, I wanted to check how long it would take to fully publish a basic game. I am not a game designer, and I needed an idea. So, I took inspiration from this tutorial, I customized a bit the game mechanics, and I published my first game on itch.io.

In the end I was able to publish a game in less than a month, and I did it just using my free time (which was about a couple of hours per day, on average). And the game works also from a mobile browser. Not bad.

Physics system

With Phaser you can easily override the Physics system. The default one is "Arcade". The only body types it supports are axis-aligned rectangles (i.e. rectangles with no rotation) and circles. This makes its collisions a bit rudimentary, but quite fast.

You can check out some Arcase examples here.

I used Arcade for my first project, it was enough for what it needed. I had to simulate "rotations", showing only the sprite that rotates, but that was ok for the game mechanics.

The other popular option is Matter.js, which is a third-party physics library. Unlike Arcade, it's not intended for games, but for general-purpose use, which is why it's very powerful but not suitable for some types of games.

You can check out some Matter examples here.

Useful external tools

After my first "masterpiece", I decided to create something more complex.

I wanted to create something "explorable" (a top-down dungeon crawler or something like that), and that feels much more "alive" than my first abstract game. So, I watched this nice tutorial which explains how to use Tiled, a fundamental tool to create 2d scenes with a tiled map.

Then, I also discovered another amazing tool: Texture Packer. This comes with a free trial, but then you need to purchase the license. This tool is perfect to properly package many images (like sprite sheets) into a single texture. For example, this software will make very easy the process of turning sprite sheets into animations in Phaser!

The Animation system

I had to load a lot of different characters and relative animations. The animation system has some utility function that helps you to automatize the frames generation process. I enjoyed the process of adding new automation on top of what already existed in order to fulfill my needs, but soon I got some issues.

After many attempts, especially for animation transitions, I was still struggling creating a robust automatic animation system. I remembered how I used to deal with similar stuff on Unity and I tried to imitate that with Phaser.

Sadly, I think the Phaser animation system is still not very powerful, and it has a lot of potential to improve. At the current moment, you can easily start a single animation, chain multiple ones, create repetitions, etc. But it's not clear how to do "advanced stuff", like handling the animation state and the animation transitions. That's something that a developer needs to implement on top of the basic Phaser animation system, apparently.

Maybe it was my fault, maybe I was not good enough to master it. I tried to ask support from the Discord community, but in the end I was already using the suggested functions, and they simply were not enough for my purposes.

I will talk more about the Phaser animation system in a separated post.

Plugins and other features

There are tons of other features that Phaser has, and the amount of external plugins is also huge! I still need to explore most of them!

Here is a mixed bunch of interesting things that I will explore soon:

• Facebook Instant Game Plugin
• Web Monetization
• Ourcade Studio (Non-official Authoring System)
• RexUI (External Phaser plugin with a lot of UI utilities)
• Porting a Phaser game to mobile (using wrapper like Cordova, etc)

Conclusion

This was a quick look at my recent experience.

Let's wrap up what I have found so far about Phaser:

• Great library, easy to use, great community, good online resources, which means the learning curve is soft for newcomers.
• No Authoring System with a pleasant UI, and no fancy UI embedded system (such as Unity and its UI system for example)...
• ... but there is an extensive availability of external plugins, that partially covers the previously listed limitations and a lot of other needs.
• A lot of external software are compatible with Phaser (like Tiled and TexturePacker).
• Phaser animation system is nice, but... it is not very advanced yet, so you need to be careful when creating advanced transitions and effects.

Have you already tried Phaser? Do you share my opinion or do you disagree about some specific points?

I hope you enjoyed the reading, and if you are new to Phaser, I wish I gave you some good starting points to have fun with this wonderful library!