Integrate Phaser Game with React as component

Question

I'm new to React, I want to make a component for my phaser game to insert it into a react project.

My Game component:

import React, { Component } from 'react'
import Phaser from 'phaser'

class Game extends Component {

  constructor() {
    super();

    this.config = {
        type: Phaser.AUTO,
        width: 700,
        height: 600,
        parent: "game",
        pixelArt: true,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 0 }
            }
        },
        scene: {
            preload: function(){
              this.load.image('tiles', process.env.PUBLIC_URL + '/assets/TILES.png');
              this.load.tilemapTiledJSON("map", process.env.PUBLIC_URL + "/assets/MAP.json");
            },
            create: function(){
              const map = this.make.tilemap({ key: "map" });
              const tileset = map.addTilesetImage("TILES", "tiles");

              const worldLayer = map.createLayer("World", tileset, 0, 0);
            },
            update: function(){

            }
        }
    };

    this.game = new Phaser.Game(this.config);


  }

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

export default Game;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Game from './Game';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <Game />
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

As you can see from this image, the image is reapeated 4 times, why? How can I fix this? I have tried setting fixed size to the div but it didnt work.

I'm also no react expert, so I look at the problem only from the phaser side. could the repeating image maybe come from the `tilemapTiledJSON` and the tiles? does the code work in a plain html page? — winner_joiner, Mar 13 '22 at 15:39
The code works fine with plain html and js file, I just need to add the game to the react project. (The image shown is not the real image I use in the game, this is just to show what happens) — , Mar 13 '22 at 16:08

winner_joiner · Accepted Answer · 2022-04-17T05:13:01.407

One solution would be to move the creation of the Phaser.Game Object, "game" into the method componentDidMount (link to the documentation). Because if new Phaser.Game is called, and the parent is not in the DOM, the canvas will be added, ignoring the parent.

just add this method to the Game class:

componentDidMount() {
    this.game = new Phaser.Game(this.config);
 }

I'm not sure if it is the best way, but it works (on my demo app).

Side-Note: in my demo I didn't get 4 images/(phaser-)canvas I just had 2. On using my solution, it went down to the usual one canvas.

Integrate Phaser Game with React as component

1 Answers1