将 Phaser Game 与 React 作为组件集成

Question

我是 React 的新手，我想为我的 Phaser 游戏制作一个组件以将其插入到 React 项目中。

我的游戏组件：

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();

从这张图可以看出，图片重复了4次，为什么？我怎样才能解决这个问题？我已经尝试将固定大小设置为 div 但它没有用。

Answer 1

一个解决方案是将 Phaser.Game 对象“游戏”的创建移动到方法 componentDidMount (link to the documentation) 中。 因为如果调用 new Phaser.Game，而 parent 不在 DOM 中，则将添加 canvas，忽略父项。

只需将此方法添加到 Game class:

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

我不确定这是否是最好的方法，但它有效（在我的演示应用程序上）。

Side-Note: 在我的演示中我没有得到 4 张图片/(phaser-)canvas 我只有 2 张. 在使用我的解决方案时，它下降到通常的 canvas.

将 Phaser Game 与 React 作为组件集成

Integrate Phaser Game with React as component

javascript

reactjs

phaser-framework