Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

React Amsterdam

April 21, 2016
Tweet

More Decks by React Amsterdam

Other Decks in Technology

Transcript

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

    participates in game jams Freelance Software Engineer at Toptal A WILD @FROSTNEY APPEARS
  2. 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
  3. Or any of these: EaselJS, pixi.js, Three.js, melonJS, Cocos2D- HTML5,

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

    GAME JAMS* * which also applies to game development
  5. 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.
  6. 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() {
  7. 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
  8. 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() {
  9. 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 />;
  10. 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. };
  11. 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>
  12. Well... you are a vampire. What would you like to

    be called? Derpula Continue http://frostney.github.io/survivalguide-vampires
  13. WE WRITE OUR OWN UI DUE TO THAT, WE DON'T

    CARE AS MUCH ABOUT THE NATIVE LOOK AND FEEL
  14. 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