Games in the 80s and 90s redefined the relationship between a user and a computer. Realtime, offline-first networking, fluid graphics, and physics-based animations posed incredible development challenges. Overcoming these challenges introduced a whole class of elegant techniques for immersive user experiences - that most JavaScript developers have never heard of! My talk will show that normal JS interfaces will soon rely on game programming techniques - in fact, you're probably already using libraries based on game architecture. We'll also cover the current potential for building JavaScript games. Finally, you'll leave ready to push your own apps forward with a little bit of gamedev magic.

1. @hunterloftis
We Will All Be Game Developers
record your screen! start a timer!

2. @hunterloftis

3. @hunterloftis

4. @hunterloftis

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
I’m not a game developer.
Why should I care?
1 - level up, 2 - …

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

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

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

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

18. @hunterloftis
3 Ideas from gamedev
for better user interfaces
15 mins left?

19. @hunterloftis
1: Minimize and isolate state

20. @hunterloftis

21. @hunterloftis

22. @hunterloftis
Player State
demo (standalone)

23. @hunterloftis
Pure functions
demo (walking speed)

24. @hunterloftis
2: Enforce deterministic rendering
(frames should be independent)

25. @hunterloftis

26. @hunterloftisdemo (multiplayer)
ludumstar.herokuapp.com

27. @hunterloftis

28. @hunterloftis
3: Separate rendering and simulation

29. @hunterloftis
The pursuit of 60 fps
cinema: 24 fps
with blur: 18 fps
fighter pilots: 220 fps

30. @hunterloftis
A Browser Timeline

31. @hunterloftis
setInterval(frame, 0);

32. @hunterloftis
setInterval(frame, 17);

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

34. @hunterloftis
Decoupled rendering & simulation

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

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

37. @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/