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.
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.
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
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 !
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
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.
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.sleep(). I simply added a flag to change the UI according the game state, and got the buttons to work like charm !
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 projectsSee them all !