PhaserStudio

2022

As always, a logo for it !

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:

Implementing tabs UI

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 :

Transform feature in the inspector tab

Transforming a wall position from the UI

And so for BodyPhysics :

Body Physics edition as a feature

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 :

debugging Spine2D meshes and physics

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.

Launching Spine2D animations on-demand

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 :

Scaling Spine2D objects

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

Skeleton view for Spine2D objects

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 !

Pausing and resuming the game loop

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 !

Want more ?

I've got a lot of other awesome projects

See them all !