Outburst 3D

A multiplayer 3D game a few friends and I made in 48 hours for the Node.js KnockOut 2011 weekend competition using only HTML5 (no plugins at all).

Outburst is a 3D real-time multiplayer game that combines the best of a tower defense and a “twin-stick” shooter.

Full-screen WebGL. Animated 3d models. Seperate walk and aim directions. Multiple weapons. Spread and recoil simulation. Mouse cursor animates with machine gun. Chat. Twitter integration. Ammo in HUD. Dynamic camera with zooming support. Pre-loading of game assets when on front page.

Clients employ client-side prediction for their own state to fake responsiveness. All movement and shooting logic is shared between client and server for this. The game client itself is 100% vanilla HTML+CSS+JS.

More info about the entry can be found at http://nodeknockout.com/teams/aranja

Transcript

1. Outburst 3D Node Knockout 2011
2. The team Ari Þór Arnbjörnsson Flash Developer at Rovio Eiríkur Heiðar Nilsson Web Developer at Gagnavarslan Sveinn Björnsson Student at Margmiðlunarskólinn Ægir Þorsteinsson Web Developer at Landsbankinn
3. Our mission Real time multiplayer game 3D in the browser Share code between server and client Have fun!
4. DEMO
5. WebGL HTML 5 Canvas element OpenGL ES 2.0 Shaders No support in IE
6. THREE.JS https://github.com/mrdoob/three.js/
7. Models Maya OBJ JSON JSON
9. Multiplayer NodeJS Server - Websocket
10. Best Practices …in 48 hours Authorative Server Client shares server code to predict movement Lag compensation on server Compression
11. The packets Client Server Input state – 25 p/sec World state – 25 p/sec Inputs and gameplay are evaluated 50 times per second
12. Input packet
13. World packet
14. Shared code Server (NodeJS) and client (browser) run Javascript … or rather CoffeeScript
15. Player state New player state Shared code Input state
16. Lag compensation
17. Packet sizes For a single player: Input: 137 bytes World: 2093 bytes 25 times per second is ~50 kibi/sec
18. Simple delta compression
19. Compression results World: 2093 => 691 bytes 33% of original size Input: 137 => 35 bytes 26% of original size Bandwidth: ~50 => ~20 kibi/sec
20. Future optimizations Round floating point numbers Delta optimize the derivative of some fields Binary JSON (when browsers add support)
21. Conclusion Web Standards are awesome CoffeeScript on server and client is awesome Sheep are awesome V8 is awesome Real time multiplayer is hard 48 hours go by FAAAST…