BabylonJS with React and Redux (ES6 HMR starter kit)

[brianzinn]

I've been working on a BabylonJS game for fun and wanted to try out integrating with React and Redux for maintaining game state and showing a UI outside of the canvas.  I took as a starting point the Quarto game from Temechon (with permission).  I changed the game a bit mostly so that there was enough state from my Redux reducer to do the full UI in React, so remove all direct DOM manipulation and moved logic around for that (some using 'redux-saga').

There is an npm which contains the React <Scene .../> component and a redux middleware for intercepting actions.  In the demo, you can see when you mouse off the canvas that the lighting is dimmed - this is not part of the component, but a prop called from the event added in Quarto.  There is built-in support for showing the debug-layer via a React component <Button onClick={this.toggleDebug}>...</Button>.

The full demo can be viewed here (click on Quarto link).  Note that the game is loaded as a fractal and only downloaded when you click the link - good for Single Page Applications with multiple components.

https://brianzinn.github.io/react-redux-babylonjs-starter-kit/

Original demo (includes a tutorial to explain the game):

http://www.pixelcodr.com/games/quarto/index.html

The source code for the NPM component is:

https://www.npmjs.com/package/react-babylonjs

https://github.com/brianzinn/react-babylonJS/

Full source-code of the demo is in a starter kit I created (forked from davezuko) that uses react-babylonjs with hot reloading and ES6 support (via babel) and to have your babylonJS project running without needing apache or IIS.  So, this is a quick way to get started.  There are issues for sure, but my workflow is going well and that is my main goal - speed of development.  Make a change see it right away.

https://github.com/brianzinn/react-redux-babylonjs-starter-kit

Things I would like to add are support for more events, add tutorial in Quarto, figure out why multiple events fire sometimes, WebGL crash issues, etc - so not a v1 component, but worthwhile to share I think.

If you are looking for deploying across mobile platforms then you may want to look at other GUI options, but especially for rapid prototyping or targeting desktop browsers this was really fast for me, especially with HMR.