nilocesar

Phaser + React JS

Recommended Posts

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. 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.