PhaserStudio

2022

Context

I discovered PhaserJS by trying to build fast some small space-invader like game as an easter egg for one of my websites. After reading the examples of Phaser, I felt like I was needing some Unity-like IDE to quickly build my maps and debug physics at runtime.

Learning svelte in-dept, I wanted to give it a shot for some more IDE-looking UI and complex patterns.

Realization

I started from a blank TypeScript + Phaser + Vite template and build some basic platformer game using resources from side projects.

Inside this base project, I added a new Svelte project where I started replicating Unity’s UI while wrapping it arround the PhaserJS canvas. That way, the IDE could be a “plug-in” addon for any of my games, that could run on some UserScript for example for in-prod debugging.

IDE-Like UI

Building the IDE interface, I decided to not use any UI framework. That way, I had to handle a lot of UI patterns (and that was a nice exercice !).

For example, I had to implement a Tab-like UI on the inspector side-menu:

Using the svelte getContext / setContext API with stores I was quickly able to create tabs selection and state tracking in a few lines of code.

Another challenging step was to map Phaser Objects capacities to a visual form editor. Like in most game engine, object can get features, like transform (position, rotation …). I implemented a properties check on Phaser object that would enable feature and map the properties using simple component Composition API :

And so for BodyPhysics :

Thanks to svelte binding and Phaser object being read+write, I could simply bind every form input to the object and get reactive properties out of the box !

Binding Spine2D

Another really cool feature of PhaserJS is its native support of Spine2D, which allows cool 2d animation. Using hooks and CustomEvent, I brodcasted all the Spine2D phaser objects to my IDE UI and could then bind properties from the editor.

Using a custom Spine2D plugin to debug models I was able to quickly add mesh debug as a dropdown menu options :

One of the feature I needed the most was to play on-demand animations to test and debug edge-cases. Getting this feature to work was as easy as adding an on:click on buttons that would simply check and call the player.spine.play() method with the animation name that could be found in the list player.spine.skeletonData.animations.

Thanks to the PhaserJS object that expose a lot of properties, it was also possible to quickly scale up and down Spine models using a simple HTML input binded to the object value :

At the end, I was able to bind most of the Spine2D feature and get them to run events from it.

Other features

Building an Unity-looking IDE, I had to implement a Play/Pause button. Thankfully, it was quite easy with phaser to stop and resume the loop : gameRef.loop.wake() and gameRef.loop.sleep(). I simply added a flag to change the UI according the game state, and got the buttons to work like charm !

Learning

From this seemly simple project, I learned to build some full-screen UI and productive layout like thoses in various IDE. Svelte was once again a really nice tool to work with and provided feature that helped me to move fast.

Sadly for this side-project, I learnt about PhaserEditor2D, that already have all of the feature I needed (and even more !) so that I begun to migrate my older project to it. Still, building a small game engine was definitely nice and I’ll glady build one another time if I need to !