Johannes Stein, Freelance, Berlin — React For Game Development

Slide 1

Slide 1 text

React Amsterdam 2016 Johannes Stein @frostney_ REACT FOR GAME DEVELOPMENT

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

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() {

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

EVENT-BASED GAMES

Slide 14

Slide 14 text

GAME PROGRESSES WITH EVENTS

Slide 15

Slide 15 text

OTHERWISE THE GAME "STANDS STILL"

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

GAME-LOOP BASED GAMES

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

EVERY FRAME WE ARE COMPLETELY REDRAWING EVERYTHING ON THE SCREEN

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

http://frostney.github.io/berlinminigamejam_jan2016

Slide 23

Slide 23 text

TECHNIQUES IN GAME DEVELOPMENT

Slide 24

Slide 24 text

GAME LOOP

Slide 25

Slide 25 text

ALLOWS THE EXECUTION OF ACTIONS EVERY FRAME

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

IN A REAL-LIFE ENVIRONMENT WE WOULD ACTUALLY USE REQUESTANIMATIONFRAME

Slide 28

Slide 28 text

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() {

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

WE SHOULDN'T REALLY MESS WITH THAT

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

https://github.com/frostney/react-spritesheet

Slide 33

Slide 33 text

DIRTY RECTANGLE CHECKING

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

ENTITY COMPONENT PATTERN

Slide 41

Slide 41 text

COMPOSITION OVER INHERITANCE

Slide 42

Slide 42 text

LET'S THINK OF ENEMIES IN GAMES

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

IN GAME DEVELOPMENT TERMINOLOGY...

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

WE WOULD ATTACH COMPONENTS TO ENTITIES...

Slide 48

Slide 48 text

ENTITIES TO ENTITIES...

Slide 49

Slide 49 text

AND COMPONENTS TO COMPONENTS

Slide 50

Slide 50 text

IN REACT, EVERYTHING IS A COMPONENT

Slide 51

Slide 51 text

Slide 52

Slide 52 text

SCENE GRAPH

Slide 53

Slide 53 text

ENTITIES IN A TREE STRUCTURE

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

SCENE MANAGEMENT

Slide 56

Slide 56 text

WE WANT TO BE ABLE THE TO SWITCH TO A SCENE

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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 ;

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

LET'S SUMMARIZE

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

REACT NATIVE FOR GAME DEVELOPMENT? LEARN ONCE, WRITE EVERYWHERE

Slide 64

Slide 64 text

NATIVE CONTROLS LOOK AND FEEL FOR EACH PLATFORM

Slide 65

Slide 65 text

IN GAME DEVELOPMENT...

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

THANK YOU! QUESTIONS? @frostney_ #reactamsterdam

Slide 69

Slide 69 text

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