Your SlideShare is downloading. ×
Campus Party Europe 2013 - Creating your own 3D Multiplayer Game
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,204

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

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,204
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Creating your own 3D Multiplayer Games Ashraf Samy Hegab Playir
  • 2. Hello @playinrealtime • 7 years games industry • 3 years mobile r&d • Playir @ashcairo
  • 3. 3D Multiplayer Multi-Platform Games @playinrealtime
  • 4. @playinrealtime
  • 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. WebGL?
  • 7. WebGL? Tizen Safari Android Internet Explorer Blackberry Firefox Ubuntu Chrome
  • 8. Everything is a triangle 0, 1, 0 1, 1, 0-1, -1, 0 • Vertices • UVs • Indices • Normals
  • 9. How to draw a cube learningwebgl.com
  • 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. 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. http://playir.com/x/phonewars Phone Wars WebGL Demo
  • 13. Movement
  • 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. Going Multiplayer
  • 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. SocketIO NodeJS WebGL App Popular Web Multiplayer Stack MongoDB
  • 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. 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. Phone Wars http://playir.com/x/phonewars
  • 21. TODO:// • Server side validation • Load balancing • Latency hacks
  • 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. 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. 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. Going Awesome
  • 26. Going Awesome
  • 27. Framework .js AppDevice Supporting Hybrid Platforms Renderer Android Renderer iOS Renderer Engine App .js Proxy WebView Proxy Renderer WP8 Renderer @playinrealtime
  • 28. Live demo of Playir http://playir.com
  • 29. Workshop 1 at 2-4pm HamiltonKidd.co.uk 3der.co.uk FoyzulHassan.com APM-Designs.com Me
  • 30. ash@playir.com http://playir.com @playinrealtime

×