Sinan A
Sinan A

Reputation: 58

React phaser Reinitialize problem because of grid-engine plugin

I use "phaser", 'ion-phaser' and a phaser plugin 'grid-engine' for integrate a phaser game to react. I can initialize the game successfully, then destroy it without an error. But when I try to reinitialize it İt give 2 errors

Scene Plugin key in use: GridEngine 

and

Uncaught TypeError: Cannot read properties of undefined (reading 'create')
at Scene.create (isometric.js:93:1)
at SceneManager.create (phaser.js:84684:1)
at SceneManager.loadComplete (phaser.js:84615:1)
at LoaderPlugin.emit (phaser.js:1671:1)
at LoaderPlugin.loadComplete (phaser.js:165337:1)
at LoaderPlugin.fileProcessComplete (phaser.js:165311:1)
at SpriteSheetFile.onProcessComplete (phaser.js:4290:1)
at data.onload (phaser.js:16548:1)

second error at this line

this.gridEngine.create(cloudCityTilemap, gridEngineConfig);

Additionally when I try a phaser game without plugins like grid engine, there is not an error. I search and I think I must remove grid-engine plugin when destroy game but I could not find how. My question is

How to destroy a phaser game with included plugins and restart it?

this is code sample

          const game = {
        width: 800,
        height: 600,
        type: Phaser.AUTO,
        scene: {
          preload,
          create,
          update,
        },
        plugins: {
          scene: [
            {
              key: 'GridEngine',
              plugin: GridEngine,
              mapping: 'gridEngine'
            },
          ],
        },
      }
  const gameRef = useRef(null)
  const [initialize, setInitialize] = useState(false)
  const destroy = () => {
    if (gameRef.current) {
      gameRef.current.destroy()
    }
    setInitialize(false)
  }
  return (
    <>
      <IonPhaser game={game}  ref={gameRef} initialize={initialize} />
      <button onClick={()=>setInitialize(true)}>Initialize</button>
      <button onClick={destroy}>Destroy</button>
    </>
  )
}

Finally I want to change different games or levels at the same page

Upvotes: 1

Views: 282

Answers (1)

winner_joiner
winner_joiner

Reputation: 14730

Im not 100% sure, if this will solve all your problems, but

<button onClick={setInitialize(true)}>

is not correct, you should not call the function, you should only pass it. Try replacing that line with

<button onClick={ () => setInitialize(true)}>   

For Details, checkout this article / documentation for details.

Update: How to get the game object

to get the Phaser Game object you would have to use getInstance (link to ion-phaser documentation) and to remove the Plugin you would have to do something like this:

this.gameRef.current.getInstance()
    .then(game => game.plugins.removeScenePlugin("GridEngine"))

Upvotes: 1

Related Questions