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.

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
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 });
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
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