Building a multiplayer game server
and keeping (most of) your hair
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3589012/splash_ship1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3589013/splash_ship2.png)
@OpherV
I.T.A.K.E Unconference May 2017
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3589162/LOGO-Rocket-League-HZ-on-Non-White.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3589227/steampage.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3589235/steambuy.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3589238/steam_login.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3589244/steam_update.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3589245/steam_download.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3589252/wizard_hat.jpg)
What if there was
a better way to play games?
realtime multiplayer game running in the browser
@opherv
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3590616/DTC_Services_1h_hero_bg.png)
Hi! I'm Opher
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/2259288/opher.png)
I'm a creative developer at Eko
http://lance.gg
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3785721/pasted-from-clipboard.png)
anatomy of a game
@opherv
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3590616/DTC_Services_1h_hero_bg.png)
while (true)
{
processInput();
updateGameState();
render();
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595865/mario.png)
Input
0
1
2
3
4
5
6
7
render
game step
8
9
10
11
12
13
14
15
@opherv
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3590616/DTC_Services_1h_hero_bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595639/computer.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595639/computer.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595639/computer.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595639/computer.png)
peer-to-peer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595937/mario2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595937/mario2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595937/mario2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595937/mario2.png)
Why do you even need a server?
Because your players suck
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595627/wallpaper-world-of-warcraft-south-park.png)
if cheating can happen,
it will happen
authoritative server
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3590505/authortative_server.jpg)
@opherv
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3590616/DTC_Services_1h_hero_bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595639/computer.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595639/computer.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595639/computer.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595639/computer.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595647/fileserver-server-icon--17.png)
authoritative server
Run game world
Receive input request
Validate input
Broadcast game state
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595707/authortative2.jpg)
Why
@opherv
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3590616/DTC_Services_1h_hero_bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595727/nodejs-new-pantone-black.png)
Non-blocking Event I/O
@opherv
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3590616/DTC_Services_1h_hero_bg.png)
Running the same game code,
both on the server and the client
@opherv
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3590616/DTC_Services_1h_hero_bg.png)
open source
Thriving ecosystem with NPM
@opherv
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3590616/DTC_Services_1h_hero_bg.png)
Web dev == Game dev
@opherv
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3590616/DTC_Services_1h_hero_bg.png)
Browser/Server Communication
websockets
WebRTC*
@opherv
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3590616/DTC_Services_1h_hero_bg.png)
io.emit('myEvent',{ x: 15, y: 20, ammo: 20});
Server
socket.on('myEvent', function (data) {
console.log(data);
});
Client
14,951 km
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3785736/pasted-from-clipboard.png)
299,792,458 m / s
Speed of Light
50 milliseconds
Bucharest -> Melbourne
Round Trip Time (RTT) > 100ms
@opherv
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3590616/DTC_Services_1h_hero_bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595570/computer.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595570/computer.png)
Bucharest
Melbourne
Request - 50ms
Reply - 50ms
LAG
Syncing the game world
Game Loop
Render Loop
@opherv
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3590616/DTC_Services_1h_hero_bg.png)
Broadcast Loop
Option 1
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595647/fileserver-server-icon--17.png)
client step N
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595970/ship1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595970/ship1.png)
X: 200
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595970/ship1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595970/ship1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595970/ship1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595970/ship1.png)
client step M
X: 50
Interpolation
The client is in the past
Real Time Strategy
Role Playing Games
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3596005/Dungeon-Hunter-5-screenshot-840x473.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3596007/screenshot-3_14.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3600143/rocket-league-screenshot-010-ps4-us-7jul15.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3600144/angry-birds-gameplay-hd.png)
client side prediction
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3599992/prediction1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3599995/prediction2.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3599996/prediction_3.jpg)
bending
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3599998/prediction4.jpg)
Option 2: Extrapolation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595647/fileserver-server-icon--17.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3595570/computer.png)
30
31
32
33
34
35
36
37
38
39
30
31
32
33
34
35
36
37
38
39
Input
game state
extrapolated
steps
Building a multiplayer game server
and keeping (most of) your hair
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3589012/splash_ship1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3589013/splash_ship2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3589012/splash_ship1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3589013/splash_ship2.png)
Don't worry, here's a
link to a wig store
Building a multiplayer game server
and keeping (most of) your hair
Building a multiplayer game server
and keeping (most of) your hair
@opherv
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3606358/iceberg.jpg)
@opherv
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3590616/DTC_Services_1h_hero_bg.png)
more info: http://lance.gg
@opherv
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3590616/DTC_Services_1h_hero_bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3785779/pasted-from-clipboard.png)
Free Stickers!
follow me @OpherV
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3788607/stickers.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3788614/laptop.png)
Thanks!
@OpherV
opherv.com
opherv@gmail.com
Building a multiplayer game server and keeping (most of) your hair
By Opher Vishnia
Building a multiplayer game server and keeping (most of) your hair
- 2,658