we will all be game developers
TRANSCRIPT
@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/