I spend a lot of time at work helping people who are new to game development. There are many excellent options for beginners who are interested in creating games, from Scratch to processing to Unity. These days, one of my favorite ways to make games is with Phaser. Phaser is easy to set up, and it has lots of great examples to work from. Phaser also has plenty of convenient features that make other game engines (looking at you, Unity) seem kind of clunky in comparison. And, because Phaser is part of the JavaScript ecosystem, the possibilities for integrating your Phaser game with other frameworks are endless.
One thing that I don’t love about Phaser is the system for building user interfaces. It’s not that Phaser’s UI system is bad - it’s just not as good as more mature frameworks for UI development, such as React. Unfortunately, Phaser and React don’t play very nicely together by default. In fact, they are described as oil and water on the Phaser site.
To help mitigate the challenge of mixing these two very different frameworks, I’ve published a simple toolkit called phaser-react-tools. The package contains one React component, a context, and some hooks. Using these simple tools, you can embed a Phaser game in your React app, build a React UI overlay for your Phaser game, and send events back and forth between Phaser and React with ease.
I enjoyed the process of packaging and publishing these tools. I bootstrapped the project with create-react-library, and I used jsdoc, Braintree’s jsdoc-template, and GitHub pages to generate and host the documentation. Testing is made possible by jest.
This is the second “module” that I’m releasing as part of my ongoing multiplayer chess project. The first module was a pack of free pixel art chess sprites. The next module will likely be an npx script in the vein of create-react-app for initializing Phaser + React apps.