Johannes Stein, Freelance, Berlin — React For Game Development

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.

5799a3c0434b91ef7e00e730629390f0?s=128

React Amsterdam

April 21, 2016
Tweet

Transcript

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

  2. Also known as Johannes Stein in the real world Regularly

    participates in game jams Freelance Software Engineer at Toptal A WILD @FROSTNEY APPEARS
  3. Demystifying game development How typical game development patterns would work

    in React MANAGING EXPECTATIONS
  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
  5. Or any of these: EaselJS, pixi.js, Three.js, melonJS, Cocos2D- HTML5,

    Panda.js, LimeJS, Crafty, Lyria, PlayCanvas ... GAME DEVELOPMENT TODAY IN JAVASCRIPT
  6. Use the tools you're most familiar with FIRST RULE OF

    GAME JAMS* * which also applies to game development
  7. None
  8. None
  9. SO... IF REACT IS LIKE DOOM 3, CAN WE DEVELOP

    GAMES WITH REACT?
  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.
  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() {
  12. 12. console.log(`angle: ${this.state.angle}`); HOW DOES A GAME WORK?

  13. EVENT-BASED GAMES

  14. GAME PROGRESSES WITH EVENTS

  15. OTHERWISE THE GAME "STANDS STILL"

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

    games
  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
  18. GAME-LOOP BASED GAMES

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

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

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

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

  23. TECHNIQUES IN GAME DEVELOPMENT

  24. GAME LOOP

  25. ALLOWS THE EXECUTION OF ACTIONS EVERY FRAME

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

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

  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() {
  29. 27. isRunning = false; REACT ALREADY RE- RENDERS EVERYTHING FOR

    US ON EVERY PROP AND STATE CHANGE
  30. WE SHOULDN'T REALLY MESS WITH THAT

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

    MS
  32. https://github.com/frostney/react-spritesheet <AnimatedSpriteSheet filename={templar} bounds={{ x: 0, y: 0, width: 1280,

    height: 320 }} frame={{ width: 80, height: 80 }} speed={100} />
  33. DIRTY RECTANGLE CHECKING

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

  35. None
  36. None
  37. None
  38. None
  39. WE GET THAT FOR FREE IN REACT! THANKS, VIRTUAL DOM!

  40. ENTITY COMPONENT PATTERN

  41. COMPOSITION OVER INHERITANCE

  42. LET'S THINK OF ENEMIES IN GAMES

  43. None
  44. IN GAME DEVELOPMENT TERMINOLOGY...

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

    ENTITY
  46. BEHAVIORS OR ATTRIBUTES (ATTACK, CANNONBALLS, CREW, INVENTORY, ETC) WOULD BE

    REFERRED TO AS A COMPONENT
  47. WE WOULD ATTACH COMPONENTS TO ENTITIES...

  48. ENTITIES TO ENTITIES...

  49. AND COMPONENTS TO COMPONENTS

  50. IN REACT, EVERYTHING IS A COMPONENT

  51. <World> <Ship x={10} y={10} /> <Ship x={200} y={100}> <BlackFlag />

    </Ship> </World>
  52. SCENE GRAPH

  53. ENTITIES IN A TREE STRUCTURE

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

  55. SCENE MANAGEMENT

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

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

    SOMETHING ELSE
  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 <Menu />; 13. 'Level1': return <Level1 />; 14. 'Level2': return <Level2 />;
  59. 15. 'Level3': return <Level3 />; 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. };
  60. 9. } https://github.com/frostney/react-scenedirector Switch to level 1 This is the

    main menu <SceneDirector scenes={{ MainMenu: ({ switchToScene }) => { const switchToLevel1 = () => switchToScene('Level1'); return ( <div>
  61. LET'S SUMMARIZE

  62. Well... you are a vampire. What would you like to

    be called? Derpula Continue http://frostney.github.io/survivalguide-vampires
  63. REACT NATIVE FOR GAME DEVELOPMENT? LEARN ONCE, WRITE EVERYWHERE

  64. NATIVE CONTROLS LOOK AND FEEL FOR EACH PLATFORM

  65. IN GAME DEVELOPMENT...

  66. WE WRITE OUR OWN UI DUE TO THAT, WE DON'T

    CARE AS MUCH ABOUT THE NATIVE LOOK AND FEEL
  67. COME TO THE DARK SIDE, WE HAVE ALMOST 100% CODE

    REUSE ACROSS PLATFORMS
  68. THANK YOU! QUESTIONS? @frostney_ #reactamsterdam

  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