[2013 CodeEngn Conference 08] pwn3r - Pwning multiplayer game - case Starcraft Broodwar
Make your-game-multiplayer
-
Upload
andrew-lee -
Category
Entertainment & Humor
-
view
5.883 -
download
1
description
Transcript of Make your-game-multiplayer
![Page 1: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/1.jpg)
Make Your Game Multiplayer
![Page 2: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/2.jpg)
Twitter: @StartupAndrew
Andrew Lee
Founder:
GitHub: StartupAndrew
![Page 3: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/3.jpg)
Tic Tac Toe
![Page 4: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/4.jpg)
Why Multiplayer?
Real people are more fun
Replayability
Virality
![Page 5: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/5.jpg)
Why Now?
Rich clients
HTML5 + libraries (D3, Raphael, etc.)
Ubiquitous, fast networks
Expectations - Facebook, Twitter
![Page 6: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/6.jpg)
ModelModel
Single Player
ViewView
ControllerController
![Page 7: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/7.jpg)
Client 2Client 2 Client 3Client 3Client 1Client 1
Multi Player
ModelModel
ViewView
ControllerController ModelModel
ViewView
ControllerController ModelModel
ViewView
ControllerController
Synchronization Synchronization ServiceService
![Page 8: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/8.jpg)
Demo
![Page 9: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/9.jpg)
Updating Your Model
var boardRef = new Firebase("http://gamma.firebase.com/firetactoe/board");
$("#canvas0").click(function(a) { var cellRow = Math.floor(a.offsetX / cell_width); var cellCol = Math.floor(a.offsetY / cell_height); boardRef.child(cellRow).child(cellCol).set(myXorO);});
![Page 10: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/10.jpg)
Displaying Your Model
boardRef.on("value", function(d) { for(var x = 0; x < 3; x++) { for(var y = 0; y < 3; y++) { renderSquare(x, y, d.child(x).child(y).val()); } }});
![Page 11: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/11.jpg)
But...
![Page 12: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/12.jpg)
Cheating
Change previous turns
Play out-of-turn
Spoof the other player’s turns
![Page 13: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/13.jpg)
Client 2Client 2Client 1Client 1
Validating Data: Server
ModelModel
ViewView
ControllerController ModelModel
ViewView
ControllerController
Synchronization Synchronization ServiceService ServerServer
![Page 14: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/14.jpg)
Client 1Client 1 Client 2Client 2
Validating Data: Client
ModelModel
ViewView
ControllerController ModelModel
ViewView
ControllerController
Synchronization Synchronization ServiceService
Validation Validation LogicLogic
Validation Validation LogicLogic
![Page 15: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/15.jpg)
Validating Data: Client
var previousBoard = [[null, null, null], [null, null, null], [null, null, null]];boardRef.on("value", function(d) { for(var x = 0; x < 3; x++) { for(var y = 0; y < 3; y++) { if(d.child(x).child(y).val() !== previousBoard[x][y] &&
previousBoard[x][y] !== null) { alert("Cheater!"); } previousBoard[x][y] = d.child(x).child(y).val();; } }});
![Page 16: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/16.jpg)
Demo
![Page 17: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/17.jpg)
Pong
![Page 18: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/18.jpg)
setInterval(function() { gamestateRef.child("paddle" + myPlayerNum).transaction(function(v) { //move my paddle var retVal = v + direction;
//handle collisions with the top and bottom ...
return retVal; });}, 50);
![Page 19: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/19.jpg)
The Problem
Client 1
Client 2
??????
![Page 20: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/20.jpg)
Server-side AI
Client 1 Client 1 (paddle 1)(paddle 1)
Client 2Client 2(paddle 2)(paddle 2)
Synchronization Synchronization ServiceService
ServerServer(ball)(ball)
sdfsdf
![Page 21: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/21.jpg)
var curX = INITIAL_X, curY = INITIAL_Y;
setInterval(function() { //move the ball to its next position curX += velX; curY += velY; //next, check for collisions ... //now, update the ball position in our shared model gamestateRef.child("ball").set({x: curX, y: curY});}, 50);
![Page 22: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/22.jpg)
Demo
![Page 23: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/23.jpg)
Client-side AI
Client 1 Client 1 (paddle 1 & ball)(paddle 1 & ball)
Client 2Client 2(paddle 2)(paddle 2)
Synchronization Synchronization ServiceService
![Page 24: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/24.jpg)
Client 1Client 1 Client 2Client 2
Peer-to-peer Lock-step
Model Model (History of actions)(History of actions)
ViewView(Paddle 1, Paddle 2, and Ball)(Paddle 1, Paddle 2, and Ball)
ControllerController
Synchronization Synchronization ServiceService
Model Model (History of actions)(History of actions)
ViewView(Paddle 1, Paddle 2, and Ball)(Paddle 1, Paddle 2, and Ball)
ControllerController
![Page 25: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/25.jpg)
Peer-to-peer Lock-step
Calculate Next Calculate Next Game StateGame State
Collect Inputs Collect Inputs from All Playersfrom All Players
IncrementIncrement““Step Number”Step Number”
![Page 26: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/26.jpg)
One more...
![Page 27: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/27.jpg)
http://mmoasteroids.com
A more complicated example...
![Page 28: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/28.jpg)
http://firebase.com
5 minute tutorial at:
![Page 29: Make your-game-multiplayer](https://reader033.fdocuments.in/reader033/viewer/2022061212/547a9846b4af9fb3658b480f/html5/thumbnails/29.jpg)
Questions?