React and Games

React and Games

This is a report of my ongoing experiment to make game with Facebook's ReactJS. It contains an oriented introduction to ReactJS and the implementations of a few patterns such as Game Loop and Screens.

Transcript

  1. REACT AND GAMES An experiment about making games

  2. @BOBYLITO

  3. + = ?

  4. LITTLE SHOOTER V2

  5. 1. (re)Introduction to React 2. Game dev patterns with React

    3. Demo 4. Next
  6. None
  7. RENDERING 1 React.render( <div>Hello World</div>, document.body );

  8. CUSTOM COMPONENTS 1 var MyComponent = React.createClass({ 2 render: function(){

    3 return <div><MyOtherComponent prop1="value"/></div> 4 } 5 }); 6 React.render( <MyComponent>, document.body );
  9. COMPONENT STATE 1 var MyComponent = React.createClass({ 2 //state: {}

    3 getInitialState: function(){ return {foo:"bar"} }, 4 render: function(){ 5 var valueFromState = this.state.foo; 6 return <div><MyOtherComponent prop1="value"/></div> 7 } 8 //setState: function( newState ){ /*set the new state*/ } 9 });
  10. LIFECYCLE AND HOOKS 1 var MyComponent = React.createClass({ 2 render:

    function(){ 3 return <div><MyOtherComponent prop1="value"/></div> 4 }, 5 componentWillMount: function(){}, 6 componentWillReceiveProps: function( props ){ /* new values handling, modify state ;) */} 7 });
  11. None
  12. T-0 T-1 Diff T-0 T-1

  13. LET’S MAKE A GAME!

  14. GAME LOOP

  15. GAME LOOP

  16. GAME LOOP Repeat

  17. GAME LOOP Repeat Render

  18. GAME LOOP Repeat Render Update game state

  19. GAME LOOP Repeat Render Update game state Get input

  20. 1 var GameApp = React.createClass({ 2 getInitialState: function(){ 3 return

    { 4 input : { 5 time : (Date.now()) } }; 6 }, 7 render : function(){ 8 return <Game input={ this.state.input }/> 9 }, 10 tick : function(){ 11 var t = Date.now(); 12 requestAnimationFrame(this.tick); 13 this.setState({ 14 input:{ 15 time : t 16 } 17 }); 18 }, 19 componentWillMount : function(){ 20 requestAnimationFrame( this.tick ); 21 }, 22 }); 23 24 var output = d.getElementById("main"); 25 React.renderComponent( <GameApp width="500" height="500" />, output);
  21. INPUTS • Time • Keys

  22. TIME • Date.now() at the tick • Store the time

    in the state • Propagate to sub components • Will trigger the rendering even if nothing else happen from the real world
  23. KEYS • Bind event listeners to the main component •

    Properly handle auto fire
  24. 1 ... 2 render : function(){ 3 return <div className="game"

    4 onKeyDown = { this.keyHandler.bind(this, true) } 5 onKeyUp = { this.keyHandler.bind(this, false) } tabIndex="1"></div>; 6 }, 7 keyHandler : function(valueToSet, e){ 8 var newKeys = { 9 left : this.state.input.keys.left, 10 right : this.state.input.keys.right, 11 up : this.state.input.keys.up, 12 down : this.state.input.keys.down, 13 space : this.state.input.keys.space 14 }; 15 16 if(e.keyCode === 37) newKeys.left = valueToSet; 17 if(e.keyCode === 38) newKeys.up = valueToSet; 18 if(e.keyCode === 39) newKeys.right = valueToSet; 19 if(e.keyCode === 40) newKeys.down = valueToSet; 20 if(e.keyCode === 32) newKeys.space = valueToSet; 21 22 this.setState({ 23 input:{ 24 time : this.state.input.time, 25 keys : newKeys } }); 26 } 27 ...
  25. GAME SCREENS

  26. A B C div div div React.render( <A /> )

    <div class=“a”> </div> <div/> <div/> <div class=“b”> </div> <div class=“c”> </div> <div/> A B C div div div
  27. A B C div div div React.render( <A /> )

    <div class=“a”> </div> <div/> <div/> <div class=“b”> </div> <div class=“c”> </div> <div/> <div class=“a”> A B C div div div
  28. A B C div div div React.render( <A /> )

    <div class=“a”> </div> <div/> <div/> <div class=“b”> </div> <div class=“c”> </div> <div/> <div class=“a”> <div class=“b”> A B C div div div
  29. A B C div div div React.render( <A /> )

    <div class=“a”> </div> <div/> <div/> <div class=“b”> </div> <div class=“c”> </div> <div/> <div class=“a”> <div class=“b”> <div/> A B C div div div
  30. A B C div div div React.render( <A /> )

    <div class=“a”> </div> <div/> <div/> <div class=“b”> </div> <div class=“c”> </div> <div/> </div> <div class=“a”> <div class=“b”> <div/> A B C div div div
  31. A B C div div div React.render( <A /> )

    <div class=“a”> </div> <div/> <div/> <div class=“b”> </div> <div class=“c”> </div> <div/> </div> <div class=“a”> <div class=“b”> <div class=“c”> <div/> A B C div div div
  32. A B C div div div React.render( <A /> )

    <div class=“a”> </div> <div/> <div/> <div class=“b”> </div> <div class=“c”> </div> <div/> </div> <div class=“a”> <div class=“b”> <div class=“c”> <div/> <div/> A B C div div div
  33. A B C div div div React.render( <A /> )

    <div class=“a”> </div> <div/> <div/> <div class=“b”> </div> <div class=“c”> </div> <div/> </div> <div class=“a”> <div class=“b”> <div class=“c”> <div/> <div/> <div/> A B C div div div
  34. A B C div div div React.render( <A /> )

    <div class=“a”> </div> <div/> <div/> <div class=“b”> </div> <div class=“c”> </div> <div/> </div> </div> <div class=“a”> <div class=“b”> <div class=“c”> <div/> <div/> <div/> A B C div div div
  35. A B C div div div React.render( <A /> )

    <div class=“a”> </div> <div/> <div/> <div class=“b”> </div> <div class=“c”> </div> <div/> </div> </div> </div> <div class=“a”> <div class=“b”> <div class=“c”> <div/> <div/> <div/> A B C div div div
  36. A B C div div div

  37. A B C div div div

  38. GameApp Game Intro Score Horde Ouno HUD Ship Rocket Launcher

    Rocket Particle System
  39. GameApp Game Intro Score Horde Ouno HUD Ship Rocket Launcher

    Rocket Particle System Router
  40. GameApp Game Intro Score Horde Ouno HUD Ship Rocket Launcher

    Rocket Particle System Screens Router
  41. GameApp Game Intro Score Horde Ouno HUD Ship Rocket Launcher

    Rocket Particle System Screens Other Router
  42. THE WORLD

  43. MODEL • One centralized model for the game • Old

    school prototypal objects • One function to update the world
  44. None
  45. ONE WAY

  46. ONE WAY MailBox

  47. ONE WAY MailBox

  48. ONE WAY MailBox

  49. ONE WAY MailBox

  50. COMMUNICATION • Every frame there is an update • Simple

    message box system • Every component can send events • Each tick, the model is updated with the events • Message box is emptied once read
  51. World App state Special fx

  52. DEMO

  53. FUTURE • Mixins • Game loop • Game screen •

    Sprites • Ludum dare
  54. QUESTIONS? https://github.com/bobylito/littleshooter2/

  55. REFERENCES • React : http://facebook.github.io/react/ • Other related frameworks based

    on React for doing similar stuff : • Pixi / react : https://github.com/Izzimach/react- pixi • React art : https://github.com/reactjs/react-art