CODEWITHSUNDEEP
javascriptreactjsphaser-framework
lortschi
lortschi

Reputation: 4323

Reinitialization of @ion-phaser/react function component removes canvas from dom

I have a problem to reinitialize the ion-phaser function component in a parent component. It works fine by reinitilization just as a class component. Bellow are the two examples to displays which works and which not. Here is my parent render function:

render() {
   return(
     <>
       {this.state.visible && <IonComponent />}
     </>
   )
}

Here is the Ion-Phaser function component (this doesn't work):

let game = { ..here comes the Phaser game logic }

const IonComponent = () => {
  const [initialize, setInitialize] = useState(false);

  useEffect(() => {
    if (game?.instance === undefined) {
        setInitialize(true);
    }
  }, [initialize]);

  return (
    <>
      { initialize && <IonPhaser game={game} initialize={initialize} />}
    </>
  )
}

export default IonComponent;

Here is the Ion-Phaser class component (this works):

class IonComponent extends React.Component {

  state = {
    initialize: true,
    game: { ..here comes the Phaser game logic }
  }
  render() {
    const { initialize, game } = this.state
    return (
        <IonPhaser game={game} initialize={initialize} />
    )
  }
}

export default IonComponent;

When I switch in the parent component the state.visible at the first render to true, it initiate the child IonPhaser component without any problems. But after the state.visible switch once to false and then again back to true, the function component will not reinitialize and it removes the canvas from the dom. The class component however works fine. Is this a persistent bug in Ion-Phaser by function component or am I doing something wrong?

Upvotes: 1

Views: 907

Answers (2)

artem baltser
artem baltser

Reputation: 63

I would like to suggest a better solution,

Here's phaser3+react+websocket template, use this repository as sample. Key feature is two dimensional functionality, you can call react controls from your scene. To call react hooks outside react components:

CONTROLS.setVersion(`Phaser v${Phaser.VERSION}`)

To call phaser from react component you can use(import global variable from phaser.game.ts):

import game from "./phaser-game"
(game.scene.game as GameScene).<whatever you want>

https://github.com/tfkfan/phaser3-react-template

So check this out

Upvotes: 1

Ben Rosen
Ben Rosen

Reputation: 358

Make sure you're keeping track of the state of your game using React's useState() hook or something similar.

For what it's worth, I also ran into some issues while trying to get the IonPhaser package working. To get around these issues, I've published an alternative way to integrate Phaser and React here that (I think) is more straightforward.

It works mostly the same way, but it doesn't come with as much overhead as the IonPhaser package.

npm i phaser-react-tools

And then you can import the GameComponent into your App.js file like so:

import { GameComponent } from 'phaser-react-tools'

export default function App() {
  return (
    <GameComponent
      config={{
        backgroundColor: '000000',
        height: 300,
        width: 400,
        scene: {
          preload: function () {
            console.log('preload')
          },
          create: function () {
            console.log('create')
          }
        }
      }}
    >
      {/* YOUR GAME UI GOES HERE */}
    </GameComponent>
  )
}

It also comes with hooks that let you emit and subscribe to game events directly from your React components. Hope this helps, and please get in touch if you have feedback.

Upvotes: 3

Related Questions