Johannes Stein, Freelance, Berlin — React For Game Development

Johannes Stein, Freelance, Berlin — React For Game Development

Using React for game development may not seem like an obvious choice at first. With React itself being compared to the Doom 3 game engine at F8 2014, we may not find ourselves in such a bad spot. We will take a look at how games are usually structured. Then we will examine different concepts in game development such as the entity-component pattern, object pools, and how we can implement them in React. At the end, we'll put it all together into a React-powered game.

Transcript

1. React Amsterdam 2016
   Johannes Stein @frostney_
   REACT FOR GAME DEVELOPMENT
   

   View Slide

2. Also known as Johannes Stein in the real world
   Regularly participates in game jams
   Freelance Software Engineer at Toptal
   A WILD @FROSTNEY APPEARS
   

   View Slide

3. Demystifying game development
   How typical game development patterns would work in React
   MANAGING EXPECTATIONS
   

   View Slide

4. Or any of these: Torque3D, LÖVE, OpenFL, Allegro, Cocos2D,
   Blender Game Engine, Flixel, Monkey, Horde3D, LibGDX, Moai
   SDK, OGRE3D, Irrlicht3D, Stencyl, Game Maker, UbiArt Framework,
   Sparrow Framework, Starling ...
   GAME DEVELOPMENT TODAY
   

   View Slide

5. Or any of these: EaselJS, pixi.js, Three.js, melonJS, Cocos2D-
   HTML5, Panda.js, LimeJS, Crafty, Lyria, PlayCanvas ...
   GAME DEVELOPMENT TODAY IN JAVASCRIPT
   

   View Slide

6. Use the tools you're
   most familiar with
   FIRST RULE OF GAME JAMS*
   * which also applies to game development
   

   View Slide

7. View Slide

8. View Slide

9. SO... IF REACT IS
   LIKE DOOM 3, CAN
   WE DEVELOP GAMES
   WITH REACT?
   

   View Slide

10. 22. function render() {
    23. game.debug.spriteInfo(sprite, 32, 32);
    24. }
    11. function create() {
    12. game.stage.backgroundColor = '#0072bc';
    13.
    14. sprite = game.add.sprite(400, 300, 'arrow');
    15. sprite.anchor.setTo(0.5, 0.5);
    16. }
    17.
    18. function update() {
    19. sprite.angle += 1;
    20. }
    21.
    25.
    

    View Slide

11. 1. import React, { Component } from 'react';
    2. import arrow from 'assets/sprites/arrow.png';
    3.
    4. class Game extends Component {
    5. constructor() {
    6. this.state = {
    7. angle: 0,
    8. };
    9. }
    10.
    11. render() {
    

    View Slide

12. 12. console.log(`angle: ${this.state.angle}`);
    HOW DOES A GAME
    WORK?
    

    View Slide

13. EVENT-BASED GAMES
    

    View Slide

14. GAME PROGRESSES WITH
    EVENTS
    

    View Slide

15. OTHERWISE THE GAME
    "STANDS STILL"
    

    View Slide

16. Example: Point 'n' Click adventures, Visual novels, "Clickers", turn
    based games
    

    View Slide

17. It's the 27th of November 2009 and you are not happy.
    The 11B of the Marie Curie Gymnasium is the hardest
    struggle you ever had to face in 63 years: Pfeiffer and
    Geiger are always on their phones, Baumann can't sit still
    for a second, Holzmeister and Jung are fighting all the time.
    Nobody cares about history.
    But, it's a Friday! A sweet disaster movie will surely ease everything up.
    1. Go watch "2012" with the sweet love of your life.
    Credits Skip intro
    http://polooo2.github.io/ggj2016
    

    View Slide

18. GAME-LOOP BASED
    GAMES
    

    View Slide

19. GAME PROGRESSES
    EVERY FRAME, IDEALLY
    AT LEAST 60 FRAMES A
    SECOND
    

    View Slide

20. EVERY FRAME WE ARE
    COMPLETELY
    REDRAWING
    EVERYTHING ON THE
    SCREEN
    

    View Slide

21. Example: Jump 'n' Runs, RPGs, Action and rst-person-games
    

    View Slide

22. http://frostney.github.io/berlinminigamejam_jan2016
    

    View Slide

23. TECHNIQUES IN
    GAME
    DEVELOPMENT
    

    View Slide

24. GAME LOOP
    

    View Slide

25. ALLOWS THE EXECUTION
    OF ACTIONS EVERY
    FRAME
    

    View Slide

26. 1. setInterval(function() {
    2. reRenderEverything();
    3. }, 16);
    4.
    

    View Slide

27. IN A REAL-LIFE
    ENVIRONMENT WE
    WOULD ACTUALLY USE
    REQUESTANIMATIONFRAME
    

    View Slide

28. 11. (function loop() {
    12. requestAnimationFrame.call(window,
    loop);
    13.
    14. let now = performance.now();
    15. let dt = now - (time || now);
    16.
    17. time = now;
    18.
    19. if (!isRunning) {
    20. return;
    21. }
    22.
    23. subscribers.forEach(subscriber =>
    subscriber.call(null, dt));
    24. })();
    9. let time;
    10.
    25. },
    26. stop() {
    

    View Slide

29. 27. isRunning = false;
    REACT ALREADY RE-
    RENDERS EVERYTHING
    FOR US ON EVERY PROP
    AND STATE CHANGE
    

    View Slide

30. WE SHOULDN'T REALLY
    MESS WITH THAT
    

    View Slide

31. SO... LET'S JUST FORCE
    STATE OR PROP UPDATES
    EVERY ~16 MS
    

    View Slide

32. https://github.com/frostney/react-spritesheet
    filename={templar}
    bounds={{ x: 0, y: 0, width:
    1280, height: 320 }}
    frame={{ width: 80, height:
    80 }}
    speed={100} />
    

    View Slide

33. DIRTY RECTANGLE
    CHECKING
    

    View Slide

34. YOU KNOW HOW WE ARE
    RE-DRAWING
    EVERYTHING EACH
    FRAME?
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. WE GET THAT FOR FREE
    IN REACT! THANKS,
    VIRTUAL DOM!
    

    View Slide

40. ENTITY COMPONENT
    PATTERN
    

    View Slide

41. COMPOSITION OVER
    INHERITANCE
    

    View Slide

42. LET'S THINK OF ENEMIES
    IN GAMES
    

    View Slide

43. View Slide

44. IN GAME DEVELOPMENT
    TERMINOLOGY...
    

    View Slide

45. THE BASE OBJECT (SHIP)
    WOULD BE REFERRED TO
    AS AN ENTITY
    

    View Slide

46. BEHAVIORS OR
    ATTRIBUTES (ATTACK,
    CANNONBALLS, CREW,
    INVENTORY, ETC) WOULD
    BE REFERRED TO AS A
    COMPONENT
    

    View Slide

47. WE WOULD ATTACH
    COMPONENTS TO
    ENTITIES...
    

    View Slide

48. ENTITIES TO ENTITIES...
    

    View Slide

49. AND COMPONENTS TO
    COMPONENTS
    

    View Slide

50. IN REACT, EVERYTHING IS
    A COMPONENT
    

    View Slide

51. 
    
    
    
    
    
    

    View Slide

52. SCENE GRAPH
    

    View Slide

53. ENTITIES IN A TREE
    STRUCTURE
    

    View Slide

54. WE GET THAT FOR FREE
    IN REACT! THANKS,
    AGAIN REACT!
    

    View Slide

55. SCENE
    MANAGEMENT
    

    View Slide

56. WE WANT TO BE ABLE
    THE TO SWITCH TO A
    SCENE
    

    View Slide

57. A SCENE COULD BE A
    LEVEL, A GAME STATE OR
    SOMETHING ELSE
    

    View Slide

58. 5. this.state = {
    6. currentScene: 'Menu',
    7. };
    1. class SceneDirector extends Component {
    2. constructor(props) {
    3. super(props);
    4.
    8. }
    9.
    10. render() {
    11. switch (this.state.currentScene) {
    12. 'Menu': return ;
    13. 'Level1': return ;
    14. 'Level2': return ;
    

    View Slide

59. 15. 'Level3': return ;
    1. // Passing in scenes in the form of `{
    [String]: ReactComponent }`
    2. class SceneDirector extends Component {
    3. constructor(props) {
    4. super(props);
    5.
    6. this.state = {
    7. currentScene: 'Menu',
    8. };
    

    View Slide

60. 9. }
    https://github.com/frostney/react-scenedirector
    Switch to level 1
    This is the main menu
    scenes={{
    MainMenu: ({
    switchToScene }) => {
    const switchToLevel1 =
    () =>
    switchToScene('Level1');
    return (
    
    

    View Slide

61. LET'S SUMMARIZE
    

    View Slide

62. Well... you are a vampire.
    What would you like to be called?
    Derpula Continue
    http://frostney.github.io/survivalguide-vampires
    

    View Slide

63. REACT NATIVE FOR
    GAME
    DEVELOPMENT?
    LEARN ONCE, WRITE
    EVERYWHERE
    

    View Slide

64. NATIVE CONTROLS
    LOOK AND FEEL FOR
    EACH PLATFORM
    

    View Slide

65. IN GAME
    DEVELOPMENT...
    

    View Slide

66. WE WRITE OUR OWN UI
    DUE TO THAT, WE DON'T
    CARE AS MUCH ABOUT
    THE NATIVE LOOK AND
    FEEL
    

    View Slide

67. COME TO THE DARK SIDE,
    WE HAVE ALMOST 100%
    CODE REUSE ACROSS
    PLATFORMS
    

    View Slide

68. THANK YOU!
    QUESTIONS?
    @frostney_ #reactamsterdam
    

    View Slide

69. CREDITS
    F8 2014 Rethinking Web Development
    LucasArts Entertainment Company LLC - The Secret of Monkey
    Island
    Nintendo - Super Mario Bros.
    Lucas lm Ltd. LLC
    20th Century Fox
    CBS
    Robert Nystrom - Game Programming Patterns
    

    View Slide