How to integrate Phaser into React

Question

I've got a React application created with create-react-app and I'm trying to integrate Phaser 3 as well. I followed this guide to get started. I've got the canvas rendering the text but loading images in the preload does not seem to be working. I get the default failed to load texture image displayed.

import ExampleScene from "./scenes/ExampleScene";

import * as React from "react";

export default class Game extends React.Component {
  componentDidMount() {
    const config = {
      type: Phaser.AUTO,
      parent: "phaser-example",
      width: 800,
      height: 600,
      scene: [ExampleScene]
    };

    new Phaser.Game(config);
  }

  shouldComponentUpdate() {
    return false;
  }

  render() {
    return <div id="phaser-game" />;
  }
}

ExampleScene:

import Phaser from "phaser";

export default class ExampleScene extends Phaser.Scene {
  preload() {
    this.load.image("logo", "assets/logo.png");
  }
  create() {
    const text = this.add.text(250, 250, "Phaser", {
      backgroundColor: "white",
      color: "blue",
      fontSize: 48
    });

    text.setInteractive({ useHandCursor: true });
    this.add.image(400, 300, "logo");

    text.on("pointerup", () => {
      console.log("Hello!");
      //store.dispatch({ type: ACTION_TYPE });
    });
  }
}

The idea is to create a visualization with flowers growing based on a simple gene engine. So Phaser would get instructions from the Store about the current state.

I'm guess this has something to do with the way Phaser loads and there's a conflict with how React updates. I'm preventing the component from updating as I only need the game to receive instructions by listening to the store

I've already looked at this SO answer and the accompanying wrapper, but it is outdated.

How can I get Phaser to load images when in a Create-React-App?

CodeSandbox: https://codesandbox.io/s/github/nodes777/react-punnett/tree/phaser-game Repo: https://github.com/nodes777/react-punnett/tree/phaser-game

Solution 1

I started from scratch and created my own boilerplate from the phaser 3 template. I wrote about the specific steps to add React to the Phaser 3 template here.

It seems like you could eject from Create-React-App and add in Phaser 3 from there, but the warnings not to eject turned me away from that solution.

Solution 2

Other option is using WebComponents to be able to integrate Phaser with any other framework (React, Angular, VueJS, etc), check this npm package: https://www.npmjs.com/package/@ion-phaser/core

Also, you can use the React wrapper of that library to use Phaser with React components easily, so you don't need to manipulate WebComponents directly, example:

import React from 'react'
import Phaser from 'phaser'
import { IonPhaser } from '@ion-phaser/react'

const game = {
  width: "100%",
  height: "100%",
  type: Phaser.AUTO,
  scene: {
    init: function() {
      this.cameras.main.setBackgroundColor('#24252A')
    },
    create: function() {
      this.helloWorld = this.add.text(
        this.cameras.main.centerX, 
        this.cameras.main.centerY, 
        "Hello World", { 
          font: "40px Arial", 
          fill: "#ffffff" 
        }
      );
      this.helloWorld.setOrigin(0.5);
    },
    update: function() {
      this.helloWorld.angle += 1;
    }
  }
}

const App = () => {
  return (
    <IonPhaser game={game} />
  )
}

export default App;

Fore more details check the repo: https://github.com/proyecto26/ion-phaser/tree/master/react

Comments

[jdnichollsc]

Try using a hook with function components instead :) stackblitz.com/edit/react-phaser?file=hooks%2FuseGame.ts

[ShashankAC]

I read your meduim blog post, unfortunately, it didn't work, I got errors saying unable to find 'react', unable to find 'index.html'.

[Taylor N]

Hmm, you should be able to run git clone https://github.com/nodes777/phaser3-react-template then npm install, then npm start. Did you try that or follow the tutorial from scratch? Let me know if you get errors from running those instructions.

[Debo Akeredolu]

Are there ways to pass props into the IonPhaser component that can be used in the game?

[jdnichollsc]

Hello @DeboAkeredolu, you can use a custom hook instead, e.g: stackblitz.com/edit/react-phaser But I recommend you to use Events, or some other means of communication between React and Phaser (event emitters, etc)