Phaser scene duplicated when integrating with React

user_19558471 0
Viewed 53

when embedding this single scene phaser game into React page, the scene was duplicated into two. And every time updating the code, 2 more duplications are added on the page.

Game componenet as below:

        import MainScene from './scenes/MainScene.js';
        import Phaser from 'phaser';
        import React, { Component } from 'react'

        class Game extends Component {

        componentDidMount(){
          const config = {
              width: 640,
              height: 1024,
              backgroundColor: '#333333',
              type: Phaser.AUTO,
              parent: 'phaser-game',
              scene: [MainScene]
            };      
          new Phaser.Game(config);
        }
        shouldComponentUpdate() {
          return false;
        }
        render() {
        return <div id="game" />
        }
    
        }

        export default Game;

here can see two canvas elements are created enter image description here

thanks in advance!

phaser-framework reactjs javascript
1 Answers

I assume the problem lies in the config object, where you are setting the parent to phaser-game. parentis the idof the DOM-element, where the canvas should be injected. If an element with that specific id can't be found, it is injected into the body-tag.

So the solution is, to change the parent property from phaser-game to game, as this seems to be the id of the element, where you want the game to be displayed.

Just to show the connection, between the parent property and the element it refers to.

Here some code:

 // ...
 componentDidMount(){
     const config = {
         // ... 
         // "id" of the parent DOM Element
         parent: 'game',
         // ...
     };      
     new Phaser.Game(config);
 }
 // ...
 render() {
    // parent DOM Element
    return <div id="game" />
 }

Update:
the problem could be that, componentDidMount can run multiple times as mentioned in this article, since I don't know your code and I'm no ReactJs expert, you could try to look into this article, how to prevent multiple call of the componentDidMount function.

user_16792860
Related