0
198
VisualizaçõesPhaser 3: el componente Canvas duplicado se crea al crear una nueva instancia de Phaser 3 GameObject en React
Estoy usando Create React App como marco e intento renderizar GameObject new Phaser.Game(gameConfig) como componente React. Puedo renderizar pero crea un objeto Canvas duplicado como se muestra a continuación: 
Aquí está mi componente de juego:
import Phaser from "phaser"; import React from "react"; export default class Game extends React.Component { componentDidMount() { const gameConfig: Phaser.Types.Core.GameConfig = { type: Phaser.AUTO, parent: 'game-container', backgroundColor: '#EBEBEB', width: 600, height: 800 } new Phaser.Game(gameConfig); } shouldComponentUpdate() { return false; } render() { return <div id='game-container' /> } }Y aquí es donde estoy renderizando:
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import reportWebVitals from './reportWebVitals'; import Game from './game'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( <React.StrictMode> <Game /> </React.StrictMode> ); reportWebVitals();¿Cómo elimino este duplicado?
1 Respostas
Responde à pergunta0
Supongo que el problema podría ser que, debido a la <React.StrictMode> , la función componentDidMount podría ejecutarse dos veces. Si elimina esta etiqueta, la función no se ejecutará dos veces.
Y dado que cada llamada de componentDidMount crea un nuevo objeto de juego de faser , debido a la new Phaser.Game(...) . Lo que a su vez crea un nuevo lienzo.
Dado que la etiqueta <React.StrictMode> no es realmente necesaria para la producción, puede eliminarla sin problemas/cambios en la salida de la interfaz de usuario.
<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script> <script src="https://unpkg.com/react/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <div id="root"></div> <script type="text/babel"> class Game extends React.Component { componentDidMount() { const gameConfig = { type: Phaser.AUTO, parent: 'game-container', backgroundColor: '#EBEBEB', width: 300, height: 120, scene: {create(){ this.add.text(150,60, 'GAME').setFontFamily('Arial').setFontSize(80).setOrigin(.5).setColor('#000000')}} } new Phaser.Game(gameConfig); } shouldComponentUpdate() { return false; } render() { return <div id='game-container' /> } } const root = ReactDOM.createRoot(document.getElementById('root')); // creates two canvas elements root.render( <React.StrictMode><Game /></React.StrictMode> ); // creates one canvas elements root.render( <Game /> ); </script>