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
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
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?
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
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