Using React, dynamic components to listen for Phaser.Game changes

Phaser 3
1

So I’m trying to think of the smallest footprint to use React to build out a game’s UI. My thinking is that in theory, onCreate() of a Scene, I could use ReactDOM.render() to render out a UI, passing an instance of my scene into the React. So then I have access to all that scene’s properties - and, in theory, any changes to those properties.

My problem, is that React doesn’t seem to use any kind of observable binding to watch any changes to properties within that scene, so while React renders at first, no changes are picked up.

So say I create my React component like this at the bottom of my Phaser.Scene create() method:

ReactDOM.render(<App scene={this} />, document.getElementById('react-root'));

Where “this” is a reference back to the Phaser.Scene instance I created. Within the “this”, there are in-game properties I want to observe, but when they change, doesn’t “see” them.

I suspect I’m misunderstanding a fundamental to React’s structure, and that only changes to Component.state values are ever seen (or changes to a state via dispatched actions with Redux)

Any thoughts?

4

Yeah, I don’t think React is going to bind to or watch anything going on inside your game automatically like that.

There are a few tutorials on setting up React with Phaser. I have not gone through any myself, but this one looks pretty nice.

Best of luck!

5

Yeah, I’d seen that tutorial, though that’s more just a basic example of wiring React and Phaser into the same WebPack project. Doesn’t really add anything new to where I am; I’m way ahead of that point :wink:

In the end, my approach is to include a flavour of redux in the UI, as this way I can tell the UI what and when to render via dispatched actions from the Phaser instance. Something like

onSelectGameObject() {
  ...
  store.dispatch(selectGameObject(this));

I briefly played with Vue, which DOES include directing binding of the Component properties, but I’ve never used Vue until now, and didn’t want to spend lots of time trying to get my head around the new framework & render pipeline. Just want a proof of concept for now, to get the demo workable

6

Hey guys, check this example: Integrate Phaser 3 with Angular, React, Vue, etc 🎮

7

Thanks @jdnichollsc for the demo: your example doesn’t solve the problem outlined however. The issue wasn’t about loading Phaser in React, this is fairly straightforward, as that’s an issue of presentation; it’s about whether you could bind internal data within the Phaser Game (like GameObject.Sprite instances) with the Redux store running underneath the React app. The answer there is kinda “no”, at least not without dispatching actions back to the Redux stack.

1 Like