This document discusses how principles from game development can be applied to improve user interfaces. It provides three key ideas: 1) Minimize and isolate state by deriving state from minimal state variables and using pure functions; 2) Use immediate-mode rendering that is deterministic; 3) Separate rendering from simulation by using a time accumulator to allow variable frame rates. Examples are provided to demonstrate these concepts, such as using a time accumulator to allow for variable frame rates in the simulation. The document suggests that as app interfaces become more like games, these game development principles can help create simpler and more optimized user interfaces.

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/