Phaser + React JS

[nilocesar]

It would be a good idea to use the vitualDOM the React with the Phaser? It would not improve the perfomace the game? Anyone tried it? Sorry for my English...

[Nick]

Phaser renders to Canvas and/or WebGL so I think React's DOM implementation would not be something that could be used, however React itself is not limited to DOM and there is at least 1 implementation for rendering to Canvas ( https://github.com/Flipboard/react-canvas ). So perhaps it could be possible to make React bindings for Pixi, I'm really not sure

 

Interestingly, React itself was actually inspired by Game Engines. i.e. The Game Loop where checking is performed before making the minimal amount of changes needed in the renderer is similar to how the virtualDOM idea works in React. 

[mattstyles]

Yeah, vDOM wont speed up canvas, it already has that sort of stuff built-in anyway.

 

Using React and a game library is a perfectly reasonable thing to do though. I've got 3 projects with the bulk of the rendering done in the canvas but the UI and app state are React components.

[bruno_]

You can use react for code organization, but for performance it won't make any improvements.

[dr.au]

Yeah, vDOM wont speed up canvas, it already has that sort of stuff built-in anyway.

 

Using React and a game library is a perfectly reasonable thing to do though. I've got 3 projects with the bulk of the rendering done in the canvas but the UI and app state are React components.

 

Would you be interested in sharing any source code for your react/phaser projects? I'd love to see some if this in action, as wiring up state gets complicated quickly!

[mattstyles]

Would you be interested in sharing any source code for your react/phaser projects? I'd love to see some if this in action, as wiring up state gets complicated quickly!

 

This one is in a fairly good state to share, although a long way from complete and on hiatus for a bit (the others I can not share yet unfortunately, although I'm working on that constraint).  

 

It does not use Phaser, I'm not a huge fan of large frameworks (they dont generally suit the games I write), I prefer to use smaller libraries and wire stuff together myself (React is somewhere between a framework and a library for me) but it uses Pixi and P2, both of which are part of Phaser. I have my own module called Quay which turns keypresses into event streams so I can handle keyboard interactions and I have my own loader called Preload.io (not sure if I've stuck that in yet).

 

For this project I'm playing around with centralised state, so the entire state of everything is kept in one immutable object.

 

The canvas provides the 'backdrop' or 'playing field' and React handles the UI (of which there is nearly nothing so far).

 

The data flow is fairly strictly top-down, so each data change forces a re-render. I think for this project all React components are pure so I can speed up traversing the component tree. Stuff like ship position and data, I think, is not currently part of the data-tree so thats the next challenge. Performance permitting, this won't be too much of an issue, although ideally I want thousands of entities in each 'space' so it could get interesting further down the line.

 

I think I've put instructions in for how to get started but feel free to shout me about anything. It's far from complete and there are still a few big things that need to change before it will get anywhere near the working prototype stage.

[evilfer]

Hi all,

I had the same idea when I started with Phaser: why not use React to define a scene? I've started working on this, you can see some examples at: https://github.com/evilfer/react-phaser.

Basically it modifies React so that it does not work with the DOM at all, and instead implements some native components that manipulate Phaser objects. This is all a bit of an experiment. I doubt game performance will be improved; rather, my guess is performance could take a hit. On the other hand, React code is, where suitable, very easy to write and understand, so that would be the main advantage.

I wonder whether any of you would be interested in taking a look at the examples (code at https://github.com/evilfer/react-phaser/tree/master/src/examples, ready-to-run pages at https://github.com/evilfer/react-phaser/tree/master/examples), and perhaps give some advice about whether this makes any sense at all :).

Thanks,

Eloy

[Lypzis]

Hi @evilfer, 

I've been looking for ways to integrate a Phaser app with text inputs,(which Phaser does not support) thus making the code a bit unclean as I had to place them directly into the index.html as a 'modal'. Do you think I could apply your solution to solve it?

Also is your solution in a stable state(with no more updates)?

If you need more details of what I'm trying to solve, just ask.

[TaylorN]

This post is quite old but is still at the top of a Phaser 3 and React Google search. Hopefully the below can help new users trying to combine Phaser and React.

For Phaser 3 and React with Create-React-App I tried following this guide: https://www.zephyrcoding.com/phaser3-with-react/

However, I ended up configuring webpack myself and wrote this guide: https://medium.com/@Tnodes/integrating-react-and-phaser-3-tutorial-eb96717d4a9d

[jdnichollsc]

Check my WebComponent integrating Phaser with any other framework/library:
- Phaser 2 (Community Edition) => https://github.com/proyecto26/ion-phaser-ce

- Phaser 3 => https://github.com/proyecto26/ion-phaser

Check the Flappy Bird example: https://codepen.io/jdnichollsc/pen/jOOWXJQ