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

1,590 views
1,482 views

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,590
On SlideShare
0
From Embeds
0
Number of Embeds
360
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×