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