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
   

   View Slide

2. @BOBYLITO
   

   View Slide

3. + = ?
   

   View Slide

4. LITTLE SHOOTER V2
   

   View Slide

5. 1. (re)Introduction to React
   2. Game dev patterns with React
   3. Demo
   4. Next
   

   View Slide

6. View Slide

7. RENDERING
   1 React.render( Hello World, document.body );
   

   View Slide

8. CUSTOM COMPONENTS
   1 var MyComponent = React.createClass({
   2 render: function(){
   3 return
   4 }
   5 });
   6 React.render( , document.body );
   

   View Slide

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
   7 }
   8 //setState: function( newState ){ /*set the new state*/ }
   9 });
   

   View Slide

10. LIFECYCLE AND HOOKS
    1 var MyComponent = React.createClass({
    2 render: function(){
    3 return
    4 },
    5 componentWillMount: function(){},
    6 componentWillReceiveProps: function( props ){ /* new values
    handling, modify state ;) */}
    7 });
    

    View Slide

11. View Slide

12. T-0 T-1 Diff T-0 T-1
    

    View Slide

13. LET’S MAKE A GAME!
    

    View Slide

14. GAME LOOP
    

    View Slide

15. GAME LOOP
    

    View Slide

16. GAME LOOP
    Repeat
    

    View Slide

17. GAME LOOP
    Repeat
    Render
    

    View Slide

18. GAME LOOP
    Repeat
    Render
    Update game state
    

    View Slide

19. GAME LOOP
    Repeat
    Render
    Update game state
    Get input
    

    View Slide

20. 1 var GameApp = React.createClass({
    2 getInitialState: function(){
    3 return {
    4 input : {
    5 time : (Date.now()) } };
    6 },
    7 render : function(){
    8 return
    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( , output);
    

    View Slide

21. INPUTS
    • Time
    • Keys
    

    View Slide

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
    

    View Slide

23. KEYS
    • Bind event listeners to the main component
    • Properly handle auto fire
    

    View Slide

24. 1 ...
    2 render : function(){
    3 return 4 onKeyDown = { this.keyHandler.bind(this, true) }
    5 onKeyUp = { this.keyHandler.bind(this, false) } tabIndex="1">;
    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 ...
    

    View Slide

25. GAME SCREENS
    

    View Slide

26. A
    B C
    div div div
    React.render( )
    
    
    
    
    
    
    
    
    
    A
    B C
    div div div
    

    View Slide

27. A
    B C
    div div div
    React.render( )
    
    
    
    
    
    
    
    
    
    
    A
    B C
    div div div
    

    View Slide

28. A
    B C
    div div div
    React.render( )
    
    
    
    
    
    
    
    
    
    
    
    A
    B C
    div div div
    

    View Slide

29. A
    B C
    div div div
    React.render( )
    
    
    
    
    
    
    
    
    
    
    
    
    A
    B C
    div div div
    

    View Slide

30. A
    B C
    div div div
    React.render( )
    
    
    
    
    
    
    
    
    
    
    
    
    
    A
    B C
    div div div
    

    View Slide

31. A
    B C
    div div div
    React.render( )
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    A
    B C
    div div div
    

    View Slide

32. A
    B C
    div div div
    React.render( )
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    A
    B C
    div div div
    

    View Slide

33. A
    B C
    div div div
    React.render( )
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    A
    B C
    div div div
    

    View Slide

34. A
    B C
    div div div
    React.render( )
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    A
    B C
    div div div
    

    View Slide

35. A
    B C
    div div div
    React.render( )
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    A
    B C
    div div div
    

    View Slide

36. A
    B C
    div div div
    

    View Slide

37. A
    B C
    div div div
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

42. THE WORLD
    

    View Slide

43. MODEL
    • One centralized model for the game
    • Old school prototypal objects
    • One function to update the world
    

    View Slide

44. View Slide

45. ONE WAY
    

    View Slide

46. ONE WAY
    MailBox
    

    View Slide

47. ONE WAY
    MailBox
    

    View Slide

48. ONE WAY
    MailBox
    

    View Slide

49. ONE WAY
    MailBox
    

    View Slide

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
    

    View Slide

51. World
    App state
    Special fx
    

    View Slide

52. DEMO
    

    View Slide

53. FUTURE
    • Mixins
    • Game loop
    • Game screen
    • Sprites
    • Ludum dare
    

    View Slide

54. QUESTIONS?
    https://github.com/bobylito/littleshooter2/
    

    View Slide

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
    

    View Slide