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

Like this? Share it with your network

Share

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

on

  • 1,505 views

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

Statistics

Views

Total Views
1,505
Views on SlideShare
1,163
Embed Views
342

Actions

Likes
0
Downloads
8
Comments
0

4 Embeds 342

http://blog.softwareispoetry.com 331
http://9133592462062635926_987871093f4d50f1938e2f899bba4750fb07a797.blogspot.com 9
http://9133592462062635926_987871093f4d50f1938e2f899bba4750fb07a797.blogspot.co.uk 1
http://prlog.ru 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Campus Party Europe 2013 - Creating your own 3D Multiplayer Game Presentation 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