Accessing game instance in React

[jowo-io]

Hi and thanks for the great work on ion-phaser! Is there a way to access the Phaser game instance when using React ion-Phaser? It looks possible in Angular, but after digging through the source and looking up all the examples i could find I'm still at a loss. I notice it's possible to access the instance from the game config object, but only after it has updated under the hood, so for example:

setTimeout(function() {
    console.log(this.state.game.instance)
}, 1000)

This is obviously a big work around...

is there a correct way already implemented?

[jowo-io]

P.S. I tried accessing the instance via getInstance on the ref, but ref.current is always set to null

[jowo-io]

so just revisited the React Ion-Phaser demo and noticed that game is defined outside of the state. I'll follow that pattern and then just access the game object directly! - still, it would be nice to know if there's a getInstance method!?

[jdnichollsc]

Can you share your code to see where do you want to access to the instance?

[jowo-io]

Of course, here's an example of a workaround I was tinkering with.

import React from "react";
import Phaser from "phaser";
import { IonPhaser } from "@ion-phaser/react";

const game = {
  /* ... game config */
};

function getInstance() {
  if (game.instance) {
    console.log("ready");
    return Promise.resolve(game.instance);
  } else {
    console.log("waiting");
    return new Promise((resolve) => {
      const interval = setInterval(() => {
        if (game.instance) {
          clearInterval(interval);
          resolve(game.instance);
        }
      });
    }, 30);
  }
}

export default class GameEngine extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isReady: false,
    };
  }

  componentDidMount() {
    getInstance().then((instance) => {
      console.log(instance);
      this.setState({ isReady: true });
    });
  }

  render() {
    const { initialize } = this.props;
    return <IonPhaser game={game} initialize={initialize} />;
  }
}

[jdnichollsc]

Thanks! I reported the issue here https://github.com/ionic-team/stencil-ds-plugins/issues/51 Let me see if I can find a workaround for this 👍

[jowo-io]

thanks very much, I'll follow along in issue!

[jdnichollsc]

@jowo-io sorry for the delay, in the meantime this is the workaround: https://github.com/proyecto26/ion-phaser/blob/master/demo-react/src/App.tsx#L57

[jowo-io]

Thank you for providing the work around, much appreciated.

[jdnichollsc]

You're welcome! 🙂

[jowo-io]

It seems like your issues was closed on the ion-phaser repo! Wonder if we can close this ticket off too? Happy to submit a PR for this if needed.

[jdnichollsc]

Oh yes, let me check this weekend, thanks! 👍

[jowo-io]

hey @jdnichollsc reckon you might have a chance to look into this issue at some point?

[jdnichollsc]

Sorry for the delay mate, let me check this weekend, I'm a little busy with a test 😅

[jowo-io]

ah right, no problem just checking 😁 good luck with your test mate

[jdnichollsc]

Please let me know if the issue persist with the last version, thanks!

[emorling]

@jowo-io sorry for the delay, in the meantime this is the workaround: https://github.com/proyecto26/ion-phaser/blob/master/demo-react/src/App.tsx#L57

Just checking: is this the current recommended way to get the game instance?

[jdnichollsc]

@jowo-io sorry for the delay, in the meantime this is the workaround: https://github.com/proyecto26/ion-phaser/blob/master/demo-react/src/App.tsx#L57

Just checking: is this the current recommended way to get the game instance?

Hello @emorling, using useRef is the only way to get the game instance

[emorling]

Hello @emorling, using useRef is the only way to get the game instance

useRef returns an instance to ion-phaser. E.g. ref.instance:

<ion-phaser game="[object Object]" class="hydrated"><canvas width="1153" height="918" style="image-rendering: pixelated;"></canvas></ion-phaser>

but I need an instance to the game:

Game {config: Config, renderer: WebGLRenderer, domContainer: null, canvas: canvas, context: WebGLRenderingContext, …}

Is the game available as a property on the ref?

[jdnichollsc]

Hello @emorling, using useRef is the only way to get the game instance

useRef returns an instance to ion-phaser. E.g. ref.instance:

<ion-phaser game="[object Object]" class="hydrated"><canvas width="1153" height="918" style="image-rendering: pixelated;"></canvas></ion-phaser>

but I need an instance to the game:

Game {config: Config, renderer: WebGLRenderer, domContainer: null, canvas: canvas, context: WebGLRenderingContext, …}

Is the game available as a property on the ref?

Hello mate, with the instance of the useRef you can use these methods (getInstance, destroy)