teewebs.net - JavaScript Port

Discuss and share everything else.., it's the trash-section.
Forum rules
Please follow the common behaviour rules (viewtopic.php?f=113&t=2199) and write english-only.
Post Reply
eeeee
Posts: 1
Joined: Tue Apr 21, 2015 2:43 am

teewebs.net - JavaScript Port

Post by eeeee »

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
User avatar
Broken
Posts: 404
Joined: Sat May 10, 2014 12:25 pm
Player profile: http://ddnet.tw/players/Broken/
Mapper profile: http://ddnet.tw/mappers/Broken/

Re: teewebs.net - JavaScript Port

Post by Broken »

too cool eeeee. one thing a lot of ppl have wanted is a client made specifically to spectate a friend and chat only, but on devices with no keyboard this is really hard (accessing keyboard shortcuts is almost impossible).
User avatar
Aoe
Posts: 739
Joined: Thu May 29, 2014 10:54 pm
Location: Denmark
Player profile: http://ddnet.tw/players/Aoe/
Mapper profile: http://ddnet.tw/mappers/Aoe/
Clan: Infamous
YouTube: user/ElKlammoElTorso

Re: teewebs.net - JavaScript Port

Post by Aoe »

Amazing.
User avatar
Fifi
Posts: 298
Joined: Fri Jan 23, 2015 11:57 pm
Location: Cracow, Poland
Player profile: http://ddnet.tw/players/Fifi/

Re: teewebs.net - JavaScript Port

Post by Fifi »

I'm impressed you got the enthusiasm to code the whole thing. Nice work. ^^
Image
Steve
Posts: 14
Joined: Sun Mar 13, 2016 7:28 am

Re: teewebs.net - JavaScript Port

Post by Steve »

so i think this is pretty cool but when i connect to my servers the maps take a long time to download? also they dont show up in the server browser
User avatar
Ryozuki
Posts: 1748
Joined: Tue Feb 24, 2015 7:28 am
Location: Catalonia
Player profile: http://ddnet.tw/players/Ryozuki/
Mapper profile: http://ddnet.tw/mappers/Ryozuki/
Clan: Unique
Website: https://edgarluque.com
Discord: Ryozuki#2188

Re: teewebs.net - JavaScript Port

Post by Ryozuki »

Steve wrote:so i think this is pretty cool but when i connect to my servers the maps take a long time to download? also they dont show up in the server browser
Too lazy to read?

eeeee wrote:
  • 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.
Steve
Posts: 14
Joined: Sun Mar 13, 2016 7:28 am

Re: teewebs.net - JavaScript Port

Post by Steve »

Ryozuki wrote:
Steve wrote:so i think this is pretty cool but when i connect to my servers the maps take a long time to download? also they dont show up in the server browser
Too lazy to read?

eeeee wrote:
  • 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.
yeah sry i missed the word "whitelisted" but you dont need to be so rude to me as i did read it i only missed 1 word
Pathos
Posts: 176
Joined: Wed Jun 17, 2015 4:30 pm

Re: teewebs.net - JavaScript Port

Post by Pathos »

IE 11 seems to be the smoothest for me over Firefox Nightly and Chrome Canary. Problem is that there is no cursor lock and no true fullscreen. I'd like to see how it does on Edge.
Can anyone test on Edge, Opera, Safari, etc.?
Danik_V
Posts: 4
Joined: Wed Jun 22, 2016 11:41 am

Re: teewebs.net - JavaScript Port

Post by Danik_V »

Can someone share a compiled version of that "WebSockets-enabled whitelisted DDRaceNetwork" server? I'm sorry, I was trying to compile it myself, but I always get error messages. And my friend can't compile it as well. Please!
Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest