text: [{"Owner":"brianzinn","Date":"2017-01-23T02:59:42Z","Content":"_lt_div class_eq__qt_mages_qt__gt_\n\t\t\t\n_lt_p_gt_\n\tI_t_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_co_ so remove all direct DOM manipulation and moved logic around for that (some using _t_redux-saga_t_).\n_lt_/p_gt_\n\n_lt_p_gt_\n\tThere is an npm which contains the React &lt_sm_Scene .../&gt_sm_ component and a redux middleware for intercepting actions.  In the demo_co_ you can see when you mouse off the canvas that the lighting is dimmed - this is not part of the component_co_ but a prop called from the event added in Quarto.  There is built-in support for showing the debug-layer via a React component &lt_sm_Button onClick_eq_{this.toggleDebug}&gt_sm_...&lt_sm_/Button&gt_sm_.\n_lt_/p_gt_\n\n_lt_p_gt_\n\tThe 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.\n_lt_/p_gt_\n\n_lt_p_gt_\n\t_lt_a href_eq__qt_https_dd_//brianzinn.github.io/react-redux-babylonjs-starter-kit/_qt_ rel_eq__qt_external nofollow_qt__gt_https_dd_//brianzinn.github.io/react-redux-babylonjs-starter-kit/_lt_/a_gt_\n_lt_/p_gt_\n\n_lt_p_gt_\n\tOriginal demo (includes a tutorial to explain the game)_dd_\n_lt_/p_gt_\n\n_lt_p_gt_\n\t_lt_a href_eq__qt_http_dd_//www.pixelcodr.com/games/quarto/index.html_qt_ rel_eq__qt_external nofollow_qt__gt_http_dd_//www.pixelcodr.com/games/quarto/index.html_lt_/a_gt_\n_lt_/p_gt_\n\n_lt_p_gt_\n\tThe source code for the NPM component is_dd_\n_lt_/p_gt_\n\n_lt_p_gt_\n\t_lt_a href_eq__qt_https_dd_//www.npmjs.com/package/react-babylonjs_qt_ rel_eq__qt_external nofollow_qt__gt_https_dd_//www.npmjs.com/package/react-babylonjs_lt_/a_gt_\n_lt_/p_gt_\n\n_lt_p_gt_\n\t_lt_a href_eq__qt_https_dd_//github.com/brianzinn/react-babylonJS/_qt_ rel_eq__qt_external nofollow_qt__gt_https_dd_//github.com/brianzinn/react-babylonJS/_lt_/a_gt_\n_lt_/p_gt_\n\n_lt_p_gt_\n\tFull 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_co_ this is a quick way to get started.  There are issues for sure_co_ but my workflow is going well and that is my main goal - speed of development.  Make a change see it right away.\n_lt_/p_gt_\n\n_lt_p_gt_\n\t_lt_a href_eq__qt_https_dd_//github.com/brianzinn/react-redux-babylonjs-starter-kit_qt_ rel_eq__qt_external nofollow_qt__gt_https_dd_//github.com/brianzinn/react-redux-babylonjs-starter-kit_lt_/a_gt_\n_lt_/p_gt_\n\n_lt_p_gt_\n\tThings I would like to add are support for more events_co_ add tutorial in Quarto_co_ figure out why multiple events fire sometimes_co_ WebGL crash issues_co_ etc - so not a v1 component_co_ but worthwhile to share I think.\n_lt_/p_gt_\n\n_lt_p_gt_\n\tIf you are looking for deploying across mobile platforms then you may want to look at other GUI options_co_ but especially for rapid prototyping or targeting desktop browsers this was really fast for me_co_ especially with HMR.\n_lt_/p_gt_\n\n_lt_p_gt_\n\t \n_lt_/p_gt_\n\n\n\t\t\t\n\t\t_lt_/div_gt_\n\n\t\t_lt_div class_eq__qt_ipsI_qt__gt__lt_/div_gt__lt_/div_gt_"}]