0
Creating your own 3D
Multiplayer Games
Ashraf Samy Hegab
Playir
Hello
@playinrealtime
• 7 years games industry
• 3 years mobile r&d
• Playir
@ashcairo
3D Multiplayer Multi-Platform Games
@playinrealtime
@playinrealtime
• Going 3D
• WebGL?
• How to draw a cube (source code dive)
• Movement
• Collision Detection
• Going Multiplayer
• WebSock...
WebGL?
WebGL?
Tizen
Safari
Android
Internet
Explorer
Blackberry Firefox
Ubuntu
Chrome
Everything is a triangle
0, 1, 0
1, 1, 0-1, -1, 0
• Vertices
• UVs
• Indices
• Normals
How to draw a cube
learningwebgl.com
function drawScene()
{
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUF...
function drawScene()
{
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUF...
http://playir.com/x/phonewars
Phone Wars WebGL Demo
Movement
TODO://
• Collisions
• Loading obj, fbx, 3ds…
• Helper libraries (three.js)
Var BasicBoxCollisionCheck = function(sourceMi...
Going
Multiplayer
WebSockets?
• TCP
• Persistent
• Bi-directional
• Not UDP
var exampleSocket = new WebSocket("ws://www.example.com/socketse...
SocketIO
NodeJS
WebGL
App
Popular Web Multiplayer Stack
MongoDB
var socket = io.connect( serverURL );
socket.on( 'connected', function (userID)
{
socket.userID = userID;
});
function sho...
var sockets = [];
var io = socketio.listen( port );
io.sockets.on( 'connection', function (socket)
{
sockets.push( socket ...
Phone Wars
http://playir.com/x/phonewars
TODO://
• Server side validation
• Load balancing
• Latency hacks
HTML5 - IndexedDB
• 50mb+
• Is Slow
• Use a priority queue for your requests
• Timestamps lets you know which files to del...
HTML5 - WebWorkers
• Is Awesome!
• json.async (https://github.com/ashcairo/json.async)
• Separate file, use inline webwork...
Supporting HTML5 Platforms
• WebGL
• mediump precision most compatible
• IndexedDB
• Some devices require use of setVersio...
Going Awesome
Going Awesome
Framework .js AppDevice
Supporting Hybrid Platforms
Renderer
Android
Renderer
iOS
Renderer
Engine
App
.js Proxy
WebView
Pr...
Live demo of Playir
http://playir.com
Workshop 1 at 2-4pm
HamiltonKidd.co.uk
3der.co.uk
FoyzulHassan.com
APM-Designs.com
Me
ash@playir.com
http://playir.com
@playinrealtime
Upcoming SlideShare
Loading in...5
×

Campus Party Europe 2013 - Creating your own 3D Multiplayer Game

1,266

Published on

More info and accompanying source code can be found here: http://blog.softwareispoetry.com/2013/09/campus-party-europe-getting-into-3d-and.html

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,266
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Campus Party Europe 2013 - Creating your own 3D Multiplayer Game"

  1. 1. Creating your own 3D Multiplayer Games Ashraf Samy Hegab Playir
  2. 2. Hello @playinrealtime • 7 years games industry • 3 years mobile r&d • Playir @ashcairo
  3. 3. 3D Multiplayer Multi-Platform Games @playinrealtime
  4. 4. @playinrealtime
  5. 5. • Going 3D • WebGL? • How to draw a cube (source code dive) • Movement • Collision Detection • Going Multiplayer • WebSockets? • How to move • Going Forwards Agenda
  6. 6. WebGL?
  7. 7. WebGL? Tizen Safari Android Internet Explorer Blackberry Firefox Ubuntu Chrome
  8. 8. Everything is a triangle 0, 1, 0 1, 1, 0-1, -1, 0 • Vertices • UVs • Indices • Normals
  9. 9. How to draw a cube learningwebgl.com
  10. 10. function drawScene() { gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix); mat4.identity(mvMatrix); mat4.translate(mvMatrix, [x, y, z]); mat4.rotate(mvMatrix, degToRad(xRot), [1, 0, 0]); mat4.rotate(mvMatrix, degToRad(yRot), [0, 1, 0]); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer); gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer); gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, cubeVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer); setMatrixUniforms(); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, crateTexture); gl.uniform1i(shaderProgram.samplerUniform, 0); gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0); }
  11. 11. function drawScene() { gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix); mat4.identity(mvMatrix); mat4.translate(mvMatrix, [x, y, z]); mat4.rotate(mvMatrix, degToRad(xRot), [1, 0, 0]); mat4.rotate(mvMatrix, degToRad(yRot), [0, 1, 0]); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer); gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer); gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, cubeVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer); setMatrixUniforms(); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, crateTexture); gl.uniform1i(shaderProgram.samplerUniform, 0); gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0); } •Setup view •Position and rotate •Set buffers •Set texture •Draw
  12. 12. http://playir.com/x/phonewars Phone Wars WebGL Demo
  13. 13. Movement
  14. 14. TODO:// • Collisions • Loading obj, fbx, 3ds… • Helper libraries (three.js) Var BasicBoxCollisionCheck = function(sourceMin, sourceMax, targetMin, targetMax) { if( sourceMax[2] >= targetMin[2] && sourceMin[2] <= targetMax[2] ) { if( sourceMax[0] >= targetMin[0] && sourceMin[0] <= targetMax[0] ) { if( sourceMax[1] >= targetMin[1] && sourceMin[1] <= targetMax[1] ) { return true; } } } }; return false; };
  15. 15. Going Multiplayer
  16. 16. WebSockets? • TCP • Persistent • Bi-directional • Not UDP var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocol"); // On connect exampleSocket.onopen = function (event) { exampleSocket.send(“Send a message to the server"); }; // Receive message from server exampleSocket.onmessage = function (event) { console.log(event.data); }
  17. 17. SocketIO NodeJS WebGL App Popular Web Multiplayer Stack MongoDB
  18. 18. var socket = io.connect( serverURL ); socket.on( 'connected', function (userID) { socket.userID = userID; }); function shootAt(thatDamnUserID) { socket.emit( 'shoot', thatDamnUserID ); } How do I shoot? - Client
  19. 19. var sockets = []; var io = socketio.listen( port ); io.sockets.on( 'connection', function (socket) { sockets.push( socket ); var userID = nextUserID++; socket.emit( 'connected', userID ); socket.on( 'shoot', function (atUserID) ) { for( var i=0; i<sockets.length; ++i ) { sockets[i].emit( 'shoot', userID, atUserID ); } }; }); How do I shoot? - Server
  20. 20. Phone Wars http://playir.com/x/phonewars
  21. 21. TODO:// • Server side validation • Load balancing • Latency hacks
  22. 22. HTML5 - IndexedDB • 50mb+ • Is Slow • Use a priority queue for your requests • Timestamps lets you know which files to delete var transaction = db.transaction( "cache", 'readwrite' ); var objectStore = transaction.objectStore( "cache" ); // Get an item via it's key var index = objectStore.index( "key" ); var request = index.get( key ); request.onsuccess = function(event) { var item = event.target.result; };
  23. 23. HTML5 - WebWorkers • Is Awesome! • json.async (https://github.com/ashcairo/json.async) • Separate file, use inline webworker var blob = new Blob([ "self.addEventListener( 'message', function (e) { var json = JSON.parse( e.data ); self.postMessage( json ); self.close(); }, false );"]); // Obtain a blob URL reference to our worker 'file'. var blobURL = window.URL.createObjectURL( blob ); var worker = new Worker( blobURL );
  24. 24. Supporting HTML5 Platforms • WebGL • mediump precision most compatible • IndexedDB • Some devices require use of setVersion • Some devices fail on use of setVersion • Be ready to fallback to localStorage (~5mb)
  25. 25. Going Awesome
  26. 26. Going Awesome
  27. 27. Framework .js AppDevice Supporting Hybrid Platforms Renderer Android Renderer iOS Renderer Engine App .js Proxy WebView Proxy Renderer WP8 Renderer @playinrealtime
  28. 28. Live demo of Playir http://playir.com
  29. 29. Workshop 1 at 2-4pm HamiltonKidd.co.uk 3der.co.uk FoyzulHassan.com APM-Designs.com Me
  30. 30. ash@playir.com http://playir.com @playinrealtime
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×