Integrating React and Phaser 3 Tutorial

While building a fun little punnett square in React, I wanted to expand to include some visualizations in a game engine. Phaser is one of the top JavaScript based game engines, however I found few resources that combined the most popular front end framework with this game engine. A wrapper exists for Phaser CE but it’s a bit outdated and I wanted to use Phaser 3. And this tutorial gets both running, but isn’t able to run the Preload function. I also followed a webpack tutorial for setting up React manually. Using these resources, these are my steps to get React up with Phaser 3.

Phaser and React Logos

The tech: React, Babel, Webpack, Phaser 3, Node, NPM

Here’s the final template repo.

1) First we’ll clone the Phaser 3 Project template. I use this as the base rather than Create-React-App because we can config the webpack set up, rather than having to eject from Create-React-App.

2) Run npm i path babel-preset-react to install dependencies. The Phaser 3 template comes with babel-core but not the preset for React.

3) Now we’ll need to update our webpack config. In webpack/base.js we’ll add entry and output keys and include rules for JSX and CSS. We’ll also include filename and inject keys for our HtmlWebpackPlugin.

5) Update .babelrc to include “@babel/preset-react” as a preset. I changed mine to be a .babelrc.js so my editor would automatically format it.

6) Now we can finally add a React component. Let’s make a folder for those, components/App.jsx.

7) Because src/index.js is our entry point we’ll need to render our component there with ReactDOM.render. From here we can grow our code base both in React and Phaser!

And that’s it! Running npm start will open up a browser with the Phaser Logo and your React component at the top of the page.

Our Page on Localhost:8080

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Taylor Nodell

Developer. Musician. Naturalist. Traveler. In any order. @tayloredtotaylor