In this presentation, we'll explore the unique concerns of a system that supports dozens of concurrent players in real time. We'll use a mobile game written in JavaScript to test different implementation options and you'll leave ready to go home and design your own multiplayer experience.

1. @hunterloftis
Making Sense of Multiplayer
Hunter Loftis
Engineering Manager, Heroku
@ Connect.Tech 2018

3. 1962

4. 1987

5. 1996

6. 1998

7. 2004

8. Pre-2011
"Netcode" experts
C++, TCP, UDP, ICMP, routing
@hunterloftis

9. 2011 Renaissance
WebSocket protocol (+Node.js)
@hunterloftis

10. Shared Spaces

11. Shared Spaces

12. Shared Spaces

13. Shared Spaces

14. Shared Spaces

15. @hunterloftis
But...

16. @hunterloftis
Most people fail the first time.

17. @hunterloftis
Most people fail the first time.
I did!

18. @hunterloftis
Most people fail the first time.
I did!
... and the second, third, and fourth times too.

19. @hunterloftis
Common issues

20. @hunterloftis
Common issues
• Choppy updates

21. @hunterloftis
Common issues
• Choppy updates
• Laggy controls

22. @hunterloftis
Common issues
• Choppy updates
• Laggy controls
• Changes being applied and then un-applied

23. @hunterloftis
Common issues
• Choppy updates
• Laggy controls
• Changes being applied and then un-applied
• Inconsistent client behavior

24. @hunterloftis
Common issues
• Choppy updates
• Laggy controls
• Changes being applied and then un-applied
• Inconsistent client behavior
• Rule breaking

25. @hunterloftis
We're ignoring decades of
experience!

26. @hunterloftis
Netcode 101

27. @hunterloftis
What is real-time multiplayer?

28. @hunterloftis
What is real-time multiplayer?
A Lie.

29. "It turns out it’s all an illusion. A
massive sleight-of-hand."
- Glenn Fiedler,
Networking for Game Programmers
@hunterloftis

30. @hunterloftis
100% Scientific
bandwidth / $
compute / $
speed of light / $
Time

31. @hunterloftis
bandwidth / $
compute / $
speed of light / $
Time

32. @hunterloftis
Sharing an environment over
thousands of miles is impossible.

33. @hunterloftis
Instead, create an illusion:

34. @hunterloftis
Instead, create an illusion:
1. Input gives feedback immediately.

35. @hunterloftis
Instead, create an illusion:
1. Input gives feedback immediately.
2. Players believe they are sharing an environment.

36. @hunterloftis
Instead, create an illusion:
1. Input gives feedback immediately.
2. Players believe they are sharing an environment.
3. Everyone eventually ends up in the same state.

37. @hunterloftis
How? Entities + Stacked State

38. @hunterloftis
How? Entities + Stacked State
View

39. @hunterloftis
How? Entities + Stacked State
View
Predicted

40. @hunterloftis
How? Entities + Stacked State
View
Predicted
Interpolated

41. @hunterloftis
How? Entities + Stacked State
View
Predicted
Interpolated
Authoritative

42. @hunterloftis
How? Entities + Stacked State
View
Predicted
Interpolated
Authoritative

43. @hunterloftis
Entities

44. @hunterloftis
Entities

45. @hunterloftis
Entities
• Have a unique ID.

46. @hunterloftis
Entities
• Have a unique ID.
• Belong to an owner.

47. @hunterloftis
Entities
• Have a unique ID.
• Belong to an owner.
• Belong to a timeline.

48. Entities provide a way to partition state
{
id: 4,
x: 50,
y: 22,
angle: 0,
health: 0.7,
firing: false
}

49. @hunterloftis
Entities from different timelines can coexist.
time = 1.5s
time = 1.75s

50. @hunterloftis
Divergence sacrifices accuracy for smoothness.

51. @hunterloftis
Authoritative State

52. sendToServer({ hit: true })

53. @hunterloftis
Input In - State Out
Server
{ leftKey: true }
[{ id: 1, x: -10, y: 0 }
{ id: 2, x: 10, y: 0 }]
{ rightKey: true }

54. @hunterloftis
Authoritative Server

55. @hunterloftis
Authoritative Server
• Prevents cheating

56. @hunterloftis
Authoritative Server
• Prevents cheating
• Ensures eventual consistency

57. @hunterloftis
Authoritative Server
• Prevents cheating
• Ensures eventual consistency
• Allows secrets

59. @hunterloftis
"Update Rate"
How frequently the server sends updates to clients.
(eg, 10 Hz)

60. @hunterloftis
Interpolated State

61. @hunterloftis
Interpolation

62. @hunterloftis
Interpolation
• Stores the last two authoritative states in history.

63. @hunterloftis
Interpolation
• Stores the last two authoritative states in history.
• Animates from history[0] to history[1].

64. @hunterloftis
Interpolation
• Stores the last two authoritative states in history.
• Animates from history[0] to history[1].
• Extrapolates if new data doesn't arrive on time.

66. history[0] history[1] extrapolated

67. @hunterloftis
Predicted State

68. @hunterloftis
Client-Side Prediction

69. @hunterloftis
Client-Side Prediction
• Records a buffer of local input.

70. @hunterloftis
Client-Side Prediction
• Records a buffer of local input.
• Applies the buffer over the most recent
authoritative state.

71. @hunterloftis
Client-Side Prediction
• Records a buffer of local input.
• Applies the buffer over the most recent
authoritative state.
• Only simulates a subset of the rules.

72. @hunterloftis
Local input stacks on top of authoritative history to
push local entities further in time.
history[0] history[1]
input inputinput

74. @hunterloftis
View State

75. @hunterloftis
View State

76. @hunterloftis
View State
• Isn't propagated across the network.

77. @hunterloftis
View State
• Isn't propagated across the network.
• May be different per-client.

78. @hunterloftis
View State
• Isn't propagated across the network.
• May be different per-client.
• Adds details to authoritative state.

80. @hunterloftis
Putting it all together

81. @hunterloftis
A moment in time
Server
input 45input 46input 47
state (43)state (42)
state (41)
input 44
state (40)

82. @hunterloftis
Player B
Sees himself start moving up
immediately, then sees Player A
start moving up.
Player A
Sees herself start moving up
immediately, then sees Player B
start moving up.
Both players press UP at the same time.

83. @hunterloftis
Player B
Sees himself stop moving
immediately, then sees Player A
stop moving at the same height.
Player A
Sees herself stop moving
immediately, then sees Player B
stop moving at the same height.
Both players release UP at the same time.

84. @hunterloftis
The illusion has limits
Latency
Fighters/Sports
Twitchy shooters
Today's demo
Real-time strategy
Chess

85. @hunterloftis
Questions so far?

86. @hunterloftis
Questions so far?
View

87. @hunterloftis
Questions so far?
View
Predicted

88. @hunterloftis
Questions so far?
View
Predicted
Interpolated

89. @hunterloftis
Questions so far?
View
Predicted
Interpolated
Authoritative

90. @hunterloftis
Questions so far?
View
Predicted
Interpolated
Authoritative

91. @hunterloftis
ctdf.herokuapp.com

92. @hunterloftis
Questions?
https://github.com/hunterloftis/dogfight
http://www.pages.drexel.edu/~ecb44/print.html
https://www.pcgamer.com/netcode-explained/
http://www.gabrielgambetta.com/client-server-game-architecture.html
https://developer.valvesoftware.com/wiki/Source_Multiplayer_Networking
http://www.gamasutra.com/view/news/128323/Seven_Years_Of_World_Of_Warcraft.php
https://gafferongames.com/post/what_every_programmer_needs_to_know_about_game_networking
https://stackoverflow.com/questions/11436311/realtime-multiplayer-game-principles-for-tcp-and-node-js
"250 Handdrawn Textures" art by Daniel Cook
Plane sprites by Sujit Yadav
Particle sprites by Kenney