vsolovev / phaser-react Goto Github PK

This plugin requires you to have react react-dom and phaser installed aswell

npm install -S phaser3-react react react-dom phaser

yarn add phaser3-react react react-dom phaser

First let us import the package and add the config to your game configs global plugins

we require you have the dom.createContainer property set to true, which requires you to have a parent set in your div.

import phaserReact from "phaser3-react";

const config = {
  parent: 'your games parent divs id',
  dom: { createContainer: true },
  plugins: {
    global: [
      {
        key: 'phaser-react',
        plugin: phaserReact,
        start: true
      }
    ]
  }
}

The reactDom method is attached to the add property of our Phaser Scene, and takes 2 arguments (component and the supplied state) and returns a manager for the component (shown later).

The state is given to your component via props. (example later)

Class Game extends Scene {
  // .....
  create() {
    this.scoreText = this.add.reactDom(ScoreComponent, { score: 0 });
  }
  // .....
}

It's as simple as calling setState from phaser.

// .....

increaseScore() {
  let newScore = this.scoreText.state.score + 10;
  this.scoreText.setState({ score: newScore })
}

// .....

state: the state object you've passed (incase you need the values for anything) not set from react.

events: an event emitter system you can shoot events into and listen to in react or phaser if you need to (or other things).

setState(Object); takes and updaates the eternal state which is passed to your component via props.

destroy(); removes this react component from rendering.

import React from 'react';

// the things passed to setState() is passed to your component as props, it also recieves the manager.
function Score({ score }) {
  return (
    <p style={{ position: 'absolute', top: '10px', left: '10px' }}>
      Score: {score}
    </p>
  )
}

export default Score;