What JavaScript developers can learn from game developers.

1. @hunterloftis
We Will All Be Game Developers

2. @hunterloftis

3. @hunterloftis

4. @hunterloftisdemo

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

6. @hunterloftis
Time
(3 weeks)

7. @hunterloftis
Budget
($)

8. @hunterloftis
Technical Constraints
(iPhone, iPad, Android & Desktop!)

9. @hunterloftis
“Optimism is an occupational hazard of
programming. ”
– Kent Beck

10. @hunterloftis

11. @hunterloftis
4 Million Rays / Second
demo (FF)

12. @hunterloftis

13. @hunterloftis
1 Month later…
demo (babylon)

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

15. @hunterloftisLeveling Up

16. @hunterloftis
App interfaces are becoming
more like games.

17. @hunterloftis
App interfaces are becoming
more like games.

18. @hunterloftis
App interfaces are becoming
more like games.

19. @hunterloftis
App interfaces are becoming
more like games.

20. @hunterloftis
3 Ideas from gamedev
for better user interfaces
30 mins left?

21. @hunterloftis
1: Minimize and isolate state

22. @hunterloftis

23. @hunterloftis

24. @hunterloftis
Apparent State
(for just a running dude!)
demo (dude in forest)
• position
• velocity
• acceleration
• direction
• frame
• distance
• time
• all must sync!

25. @hunterloftis
Derived State
demo (walking speed)
frame
direction
posedistance
velocityposition
time acceleration

26. @hunterloftis
Pure Functions
demo (walking speed)
frame
direction
posedistance
velocityposition
time acceleration

27. @hunterloftis
Minimal State

28. @hunterloftis
2: Use deterministic, immediate-
mode rendering

29. @hunterloftis
Retained Mode
(the DOM)
graphics source: MSDN

30. @hunterloftis
Retained Mode
(the DOM)
graphics source: MSDN
Hacks go here
To indirectly
optimize here.

31. @hunterloftis
Immediate Mode
(Canvas, WebGL, ReactJS)
graphics source: MSDN

32. @hunterloftis
Deterministic Rendering

33. @hunterloftis

34. @hunterloftis
Immediate + Deterministic = simple

35. @hunterloftis
3: Separate rendering and simulation

36. @hunterloftis
A Browser Timeline

37. @hunterloftis
setInterval(frame, 0);

38. @hunterloftis
setInterval(frame, 17);

39. @hunterloftis
requestAnimationFrame(frame);
demo (variable bodies)

40. @hunterloftis
Decoupled rendering & simulation

41. @hunterloftis
Time accumulator
Accumulator

42. @hunterloftis
Time accumulator
Accumulator
- 16ms (1 “tick”)
- 32ms

43. @hunterloftis
Time accumulator
Frame (16ms) Accumulator

44. @hunterloftis
Time accumulator
Frame (16ms) Accumulator
accumulator + 16 = 16

45. @hunterloftis
Time accumulator
Accumulator Simulation step
1
accumulator - 16 = 0
steps = floor(16 / 16) = 1

46. @hunterloftis
Time accumulator
Frame (24ms) Accumulator

47. @hunterloftis
Time accumulator
Frame (24ms) Accumulator
accumulator + 24 = 24

48. @hunterloftis
Time accumulator
Accumulator Simulation step
1
accumulator - 16 = 8
steps = floor(24 / 16) = 1

49. @hunterloftis
Time accumulator
Frame (24ms) Accumulator

50. @hunterloftis
Time accumulator
Frame (24ms) Accumulator
accumulator + 24 = 32

51. @hunterloftis
Time accumulator
Accumulator Simulation steps
2
accumulator - 32 = 0
steps = floor(32 / 16) = 2

52. @hunterloftis
Time accumulator
demo (10 fps vs 60 fps)

53. @hunterloftis
My favorite bug
demo (box bug)

54. @hunterloftis
Thank 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/