[CLIENT] teewebs.net - JavaScript Port (Page 1 of 2)

tl;dr: You can play Teeworlds in your web browser now: http://teewebs.net

After more than half a year of work I'm ready to present the JavaScript Port of Teeworlds-based client.
I've used the Emscripten transcompiler on the DDNet client C++ source to generate the JavaScript code, runnable in browser.
DDNet client was chosen as a base for its good support of DDRace and other modifications, and already existing support for Android platform which has restrictions that are somewhat similar to JavaScript (such as no relative mouse input).

Supported browsers: Mozilla Firefox, Google Chrome.

Source code: https://github.com/eeeee/ddnet/tree/js. I tried to keep the patch as small as possible to make it easier to update, and will merge it into the DDNet repository soon.

Notable differences with the C++ version:

• Graphics is rendered using WebGL.

• Communication with the game server is carried over the WebSockets protocol as it's not currently possible to use UDP from a web browser directly.

• Most textures are loaded asynchronously from HTTP, to reduce the loading time. Maps are downloaded from HTTP as well (DDNet client feature).

• Supports dynamic window resizing.

• All of the server browser information is pre-populated on our servers, and then fed to the client in one JSON blob. This was necessary because it's not possible to establish WebSockets sessions with each server fast enough to fetch the server infos and populate the server list at a reasonable rate. We use geolocation to estimate the server latencies.

• Map layers are stored in memory RLE-encoded (except for the game layer, used for collision). Substantially reduces the memory usage on maps with many layers (e.g. from 59MB down to just 10MB on Kobra map).

Known issues and future improvement:

• No sounds. Should be easy to fix but not the top priority right now.

• Mouse input feels weird at times (e.g. spectator free mode). This is because the interaction of game code with the browser's mouse pointer lock feature is very hard to implement correctly without massive modifications to the game code.

• WebSockets is TCP based, so while it has acceptable performance on good connections, it works extremely poorly on connections which have even minimal amount of dropped packets. It might be possible to workaround this situation by creating and multiplexing multiple WebSockets connections to reduce the stall time after a dropped packet.

• Teeworlds uses an old version of OpenGL APIs, which is not directly supported by WebGL, so it has to be emulated with a certain performance hit.

• Everything is synchronous, which increases ping and causes a bit more lags. It might be possible to offload the network handling and ticking to a WebWorker, keeping only the WebGL rendering on the browser's main thread.

• Nothing is stored locally, so there is no way to persist changes to configuration variables (such as player name). Using the Emscripten's IDBFS for adding local storage capability looks easy.

• Because JavaScript client cannot connect to an arbitrary Teeworlds server and special serverside support is required, only WebSockets-enabled whitelisted DDRaceNetwork servers are visible in the server browser at the moment. If there is enough interest, we will develop a process for making your own server compatible with JavaScript client.

Questions? Meet us on IRC, we're hanging out in #ddnet on Quakenet.

This was a huge effort, and it would not have been possible without deen, fstd, Learath2, all other fellow tees who helped with testing and pr0tips, and the original Teeworlds, DDRace, DDNet developers. Thanks everyone!

http://teewebs.net