We Will All Be Game Developers

@hunterloftis

We Will All Be Game Developers

@hunterloftis

@hunterloftis

@hunterloftisdemo

@hunterloftis

“Would you be interested in a project for one of our

artists based on that FPS? We'd like to provide the

full album stream on Rustie's website while fans have

to navigate through the world.”

– Warp Records

@hunterloftis

Time(3 weeks)

@hunterloftis

Budget($)

@hunterloftis

Technical Constraints(iPhone, iPad, Android & Desktop!)

@hunterloftis

“Optimism is an occupational hazard of

programming. ”

– Kent Beck

@hunterloftis

@hunterloftis

4 Million Rays / Second

demo (FF)

@hunterloftis

@hunterloftis

1 Month later…

demo (babylon)

@hunterloftis

I’m not a game developer.Why should I care?

@hunterloftisLeveling Up

@hunterloftis

App interfaces are becoming

more like games.

@hunterloftis

App interfaces are becoming

more like games.

@hunterloftis

App interfaces are becoming

more like games.

@hunterloftis

App interfaces are becoming

more like games.

@hunterloftis

3 Ideas from gamedevfor better user interfaces

30 mins left?

@hunterloftis

1: Minimize and isolate state

@hunterloftis

@hunterloftis

@hunterloftis

Apparent State (for just a running dude!)

demo (dude in forest)

• position

• velocity

• acceleration

• direction

• frame

• distance

• time

• all must sync!

@hunterloftis

Derived Statedemo (walking speed)

frame

direction

posedistance

velocityposition

time acceleration

@hunterloftis

Pure Functionsdemo (walking speed)

frame

direction

posedistance

velocityposition

time acceleration

@hunterloftis

Minimal State

@hunterloftis

2: Use deterministic, immediate-

mode rendering

@hunterloftis

Retained Mode

(the DOM)graphics source: MSDN

@hunterloftis

Retained Mode

(the DOM)graphics source: MSDN

Hacks go here

To indirectly

optimize here.

@hunterloftis

Immediate Mode

(Canvas, WebGL, ReactJS)graphics source: MSDN

@hunterloftis

Deterministic Rendering

@hunterloftis

@hunterloftis

Immediate + Deterministic = simple

@hunterloftis

3: Separate rendering and simulation

@hunterloftis

A Browser Timeline

@hunterloftis

setInterval(frame, 0);

@hunterloftis

setInterval(frame, 17);

@hunterloftis

requestAnimationFrame(frame);demo (variable bodies)

@hunterloftis

Decoupled rendering & simulation

@hunterloftis

Time accumulator

Accumulator

@hunterloftis

Time accumulator

Accumulator

- 16ms (1 “tick”)

- 32ms

@hunterloftis

Time accumulator

Frame (16ms) Accumulator

@hunterloftis

Time accumulator

Frame (16ms) Accumulator

accumulator + 16 = 16

@hunterloftis

Time accumulator

Accumulator Simulation step

1

accumulator - 16 = 0

steps = floor(16 / 16) = 1

@hunterloftis

Time accumulator

Frame (24ms) Accumulator

@hunterloftis

Time accumulator

Frame (24ms) Accumulator

accumulator + 24 = 24

@hunterloftis

Time accumulator

Accumulator Simulation step

1

accumulator - 16 = 8

steps = floor(24 / 16) = 1

@hunterloftis

Time accumulator

Frame (24ms) Accumulator

@hunterloftis

Time accumulator

Frame (24ms) Accumulator

accumulator + 24 = 32

@hunterloftis

Time accumulator

Accumulator Simulation steps

2

accumulator - 32 = 0

steps = floor(32 / 16) = 2

@hunterloftis

Time accumulatordemo (10 fps vs 60 fps)

@hunterloftis

My favorite bug

demo (box bug)

@hunterloftisThank you!

2D: Pixi.js, Matter.js

3D graphics: ThreeJS, BabylonJS

Game servers: iojs + Heroku (+ ws for multiplayer)

DOM & Native UIs: React.js • http://gamasutra.com/view/news/169296/

Indepth_Functional_programming_in_C.php • http://iamralpht.github.io/physics/