16 ms·

Real Time Multiplayer in HTML5

150 points by EtienneK 14y ago

Toshio 14y ago
I just realized I physically can't read this post, the pink background hurts my brain. I'll try to find a browser add-on to mitigate that disaster.
- rpsw 14y ago
  Or paste this into your address bar: javascript:void(document.getElementsByTagName("html")[0].style.background='#FFF');
- Brajeshwar 14y ago
  I always have iReader handy for such combat situations. :-) https://chrome.google.com/webstore/detail/ppelffpjgkifjfgnbaaldcehkpajlmbc https://chrome.google.com/webstore/detail/ppelffpjgkifjfgnba...
chasing 14y ago
Open web standards, but as far as I can tell, no RSS feed! (Also, I know it's a Microsoft-funded thing, but the animation in the background of the main page runs very poorly on Firefox.)
- icebraining 14y ago
  Open web standards, but as far as I can tell, no RSS feed! Looking at the source, reveals: <link href="/atom.xml" rel="alternate" title="Build New Games" type="application/atom+xml"> With any decent RSS reader you should be able to plug in the blog post URL and let it auto-discover: http://www.rssboard.org/rss-autodiscovery/ http://www.rssboard.org/rss-autodiscovery/
- kpozin 14y ago
  Add browser support for RSS discovery (restore it, in the case of Firefox): Chrome: https://chrome.google.com/webstore/detail/nlbjncdgjeocebhnmkbbbdekmmmcbfjd https://chrome.google.com/webstore/detail/nlbjncdgjeocebhnmk... Firefox: https://addons.mozilla.org/en-US/firefox/addon/rss-icon/ https://addons.mozilla.org/en-US/firefox/addon/rss-icon/
webdigi 14y ago
Socket.io works well, we put together this demo where an iPhone is used as a controller for a browser game http://www.webdigi.co.uk/fun/space http://www.webdigi.co.uk/fun/space
- prezjordan 14y ago
  Dead-simple, too. I only have moderate experience with web applications and I found socket.io extremely approachable.
  - SvenBergstrom 14y ago
    Agreed, i really was blown away the first time I wrote something simple and it just worked... On my phones, my pc and my friends browsers.
sreyaNotfilc 14y ago
God technology moves so fast. I'd be stupid not to learn this stuff. It could be life changing! The question remains; When do I have the time to learn this stuff? I was thinking about this for a while. Besides working/planning/coding on my own project, I feel like I don't have much time for this. I think I'm going about this all wrong though. I should divi up my week into departments. That is, have a few hacking days, a planning day, a maintenance day and a R&D day. Having one day a week to study new techniques doesn't sound like much, but at least it gets the juices flowing. Its all about balance.
- veyron 14y ago
  The easiest way is to work on a side project (of your choice) and explore what technologies would be best. For example, why not try to write a HTML5 game? Even if its something relatively simple like a platformer, you will have opportunity to learn a bunch of technologies and actually have an end product (if you have the stamina)
  - sreyaNotfilc 14y ago
    Good idea. With my pet project (artJutsu) I've already experimented a lot with jQuery's ajax call to asp.Net web services. The results actually changed the way I approach problems at my 9-5. I should figure out how to incorporate this html5 game dynamic into the site somehow. Perhaps as a chat-game project. Who knows what cool things I can learn from this. Exposure is the greatest thing a developer can have. It helps spur up innovations. Kinda like a kid with an Erector set.
    - chudi 14y ago
      It seems to be that in your 9-5 you cant play with new stuff and you're learning on your on time and not getting paid for that, start doing it in your job or change job now, you're bringing more value to were you are than they pay to you
  - bazookaBen 14y ago
    i started just making a simple HTML5 game, and kept going at it. Taught me a bunch abt game development, the industry and ultimately founded a startup
wilfra 14y ago
Wish we had read this last November when we started! We're using Pusher for the connections instead of Node.js. Working on switching now. One thing we've done you didn't mention was using Redis for the game state, instead of writing to the HD most things are handled in RAM. We run the risk of losing the last ~five seconds of data on all running games if the server goes down or something but that's a small price to pay for being able to process most game actions faster than the eye can perceive them. Our game: real time multiplayer HTML5 version of Risk http://warsocial.com http://warsocial.com
- SvenBergstrom 14y ago
  The game is looking pretty cool! Hopefully the article/demo helps out in some way.
Maro 14y ago
3D gaming in the browser is coming. Interestingly, while in the past people like John Carmack had to get around the limitations of the hardware, in the browser we'll be working around the limitations of the software layers between the game (presumably written in Javascript, using WebGL) and the hardware. Anyways, I think this is a super interesting line of research and development, I wish I would not be tied up doing other stuff for the next 12 months. I'd love to just take the Quake 1 engine and (try to) implement it in Javascript with WebGL and see what happens. I estimate that's the level of graphics that's ambitiously doable in the browser in 1-2 years, by the time something like this would ship. EDIT: As helpful commenters point out below, Quake 3 seems doable. Also see yesterday's post on this topic: http://news.ycombinator.com/item?id=4258670 http://news.ycombinator.com/item?id=4258670
- acron0 14y ago
  I hope this comes as a pleasant surprise then :) http://media.tojicode.com/q3bsp/ http://media.tojicode.com/q3bsp/
  - Maro 14y ago
    Thanks, that's awesome. And it's from 2009.
    - zanny 14y ago
      Brandon's blog is amazing, and definitely worth reading / subscribing to!
- SvenBergstrom 14y ago
  Maro, try this link : http://centrc.com:4005/ http://centrc.com:4005/ It is a proof of concept I did in one evening for the next part of the discussion. It uses Three.js to render the stuff. :)
  - Maro 14y ago
    It says: "The Facility. Play online. Sandbox." Can't get past that (Enter, ESC, click). FF14 on Win7.
mikeknoop 14y ago
I got 1/3 of the way into the article and said to myself, gosh this sounds just like Valve's Source Multiplayer writeup they did many years ago. Sure enough! The author mentions 1/2 way the work is based off of it.
- SvenBergstrom 14y ago
  Yea, their approach is one of many, I found it simplest to try and explain in a shortish article.
SvenBergstrom 14y ago
Article Author here \o Glad Etienne posted here, for some reason I couldn't find my login for HN.
yesimahuman 14y ago
If anyone is interested in a live example of a MMORPG built in HTML5, this was a project of mine at my last job: http://play.parallelkingdom.com/ http://play.parallelkingdom.com/ It uses the Cometd javascript and java libraries. In my opinion, you can get very "real-time" feeling games on the web with these technologies.
hell0_th3r3 14y ago
i applaud the effort that demonstrates the technical chops of the coders who can wring stuff like this out of browsers, but lets be honest here, html5 games are only viable if we dramatically lower our expectations. valve and others have already created a de-facto network standard for games...the games available there are what is in fact state-of-the-art, and what you need to beat to create a truly compelling product
james33 14y ago
This is the exact formula we are using for the rewrite of our poker game (http://pokerrpg.com http://pokerrpg.com). We are still beta testing the new poker tables, but so far they are running incredibly smoothly using no plugins, just vanilla Javascript, Node.js, and MongoDB. Glad to see these getting pushed more for games!
ashcairo 14y ago
I been using the same technique for the hobby multiplayer game (http://softpoetry.com/projects/burgers/ http://softpoetry.com/projects/burgers/) I've been working on. Got it running using the same stack on iOS/Android and PCs, so it's a good thing to note that it's not just for web browsers.
- SvenBergstrom 14y ago
  Yes good point, the first prototype of an older game ran on mac/windows/linux/android/iOS and browser using impact.js, phonegap, titanium etc. All the usual stuff still obviously works too :)
nopjia 14y ago
Looks like this is already happening: http://www.webgl.com/2012/06/webgl-game-cloud-party/ http://www.webgl.com/2012/06/webgl-game-cloud-party/
caycep 14y ago
someone needs to implement Bolo in html5
- sil3ntmac 14y ago
  https://github.com/stephank/orona/ https://github.com/stephank/orona/

150 points by EtienneK 14y ago

I just realized I physically can't read this post, the pink background hurts my brain. I'll try to find a browser add-on to mitigate that disaster.

rpsw 14y ago
Or paste this into your address bar: javascript:void(document.getElementsByTagName("html")[0].style.background='#FFF');
Brajeshwar 14y ago
I always have iReader handy for such combat situations. :-) https://chrome.google.com/webstore/detail/ppelffpjgkifjfgnbaaldcehkpajlmbc https://chrome.google.com/webstore/detail/ppelffpjgkifjfgnba...

chasing 14y ago

Open web standards, but as far as I can tell, no RSS feed! (Also, I know it's a Microsoft-funded thing, but the animation in the background of the main page runs very poorly on Firefox.)

icebraining 14y ago
Open web standards, but as far as I can tell, no RSS feed! Looking at the source, reveals: <link href="/atom.xml" rel="alternate" title="Build New Games" type="application/atom+xml"> With any decent RSS reader you should be able to plug in the blog post URL and let it auto-discover: http://www.rssboard.org/rss-autodiscovery/ http://www.rssboard.org/rss-autodiscovery/
kpozin 14y ago
Add browser support for RSS discovery (restore it, in the case of Firefox): Chrome: https://chrome.google.com/webstore/detail/nlbjncdgjeocebhnmkbbbdekmmmcbfjd https://chrome.google.com/webstore/detail/nlbjncdgjeocebhnmk... Firefox: https://addons.mozilla.org/en-US/firefox/addon/rss-icon/ https://addons.mozilla.org/en-US/firefox/addon/rss-icon/

webdigi 14y ago

Socket.io works well, we put together this demo where an iPhone is used as a controller for a browser game http://www.webdigi.co.uk/fun/space http://www.webdigi.co.uk/fun/space

prezjordan 14y ago
Dead-simple, too. I only have moderate experience with web applications and I found socket.io extremely approachable.
- SvenBergstrom 14y ago
  Agreed, i really was blown away the first time I wrote something simple and it just worked... On my phones, my pc and my friends browsers.

sreyaNotfilc 14y ago

God technology moves so fast. I'd be stupid not to learn this stuff. It could be life changing! The question remains; When do I have the time to learn this stuff? I was thinking about this for a while. Besides working/planning/coding on my own project, I feel like I don't have much time for this. I think I'm going about this all wrong though. I should divi up my week into departments. That is, have a few hacking days, a planning day, a maintenance day and a R&D day. Having one day a week to study new techniques doesn't sound like much, but at least it gets the juices flowing. Its all about balance.

veyron 14y ago
The easiest way is to work on a side project (of your choice) and explore what technologies would be best. For example, why not try to write a HTML5 game? Even if its something relatively simple like a platformer, you will have opportunity to learn a bunch of technologies and actually have an end product (if you have the stamina)
- sreyaNotfilc 14y ago
  Good idea. With my pet project (artJutsu) I've already experimented a lot with jQuery's ajax call to asp.Net web services. The results actually changed the way I approach problems at my 9-5. I should figure out how to incorporate this html5 game dynamic into the site somehow. Perhaps as a chat-game project. Who knows what cool things I can learn from this. Exposure is the greatest thing a developer can have. It helps spur up innovations. Kinda like a kid with an Erector set.
  - chudi 14y ago
    It seems to be that in your 9-5 you cant play with new stuff and you're learning on your on time and not getting paid for that, start doing it in your job or change job now, you're bringing more value to were you are than they pay to you
- bazookaBen 14y ago
  i started just making a simple HTML5 game, and kept going at it. Taught me a bunch abt game development, the industry and ultimately founded a startup

wilfra 14y ago

Wish we had read this last November when we started! We're using Pusher for the connections instead of Node.js. Working on switching now. One thing we've done you didn't mention was using Redis for the game state, instead of writing to the HD most things are handled in RAM. We run the risk of losing the last ~five seconds of data on all running games if the server goes down or something but that's a small price to pay for being able to process most game actions faster than the eye can perceive them. Our game: real time multiplayer HTML5 version of Risk http://warsocial.com http://warsocial.com

SvenBergstrom 14y ago
The game is looking pretty cool! Hopefully the article/demo helps out in some way.

Maro 14y ago

3D gaming in the browser is coming. Interestingly, while in the past people like John Carmack had to get around the limitations of the hardware, in the browser we'll be working around the limitations of the software layers between the game (presumably written in Javascript, using WebGL) and the hardware. Anyways, I think this is a super interesting line of research and development, I wish I would not be tied up doing other stuff for the next 12 months. I'd love to just take the Quake 1 engine and (try to) implement it in Javascript with WebGL and see what happens. I estimate that's the level of graphics that's ambitiously doable in the browser in 1-2 years, by the time something like this would ship. EDIT: As helpful commenters point out below, Quake 3 seems doable. Also see yesterday's post on this topic: http://news.ycombinator.com/item?id=4258670 http://news.ycombinator.com/item?id=4258670

acron0 14y ago
I hope this comes as a pleasant surprise then :) http://media.tojicode.com/q3bsp/ http://media.tojicode.com/q3bsp/
- Maro 14y ago
  Thanks, that's awesome. And it's from 2009.
  - zanny 14y ago
    Brandon's blog is amazing, and definitely worth reading / subscribing to!
SvenBergstrom 14y ago
Maro, try this link : http://centrc.com:4005/ http://centrc.com:4005/ It is a proof of concept I did in one evening for the next part of the discussion. It uses Three.js to render the stuff. :)
- Maro 14y ago
  It says: "The Facility. Play online. Sandbox." Can't get past that (Enter, ESC, click). FF14 on Win7.

mikeknoop 14y ago

I got 1/3 of the way into the article and said to myself, gosh this sounds just like Valve's Source Multiplayer writeup they did many years ago. Sure enough! The author mentions 1/2 way the work is based off of it.

SvenBergstrom 14y ago
Yea, their approach is one of many, I found it simplest to try and explain in a shortish article.

SvenBergstrom 14y ago

Article Author here \o Glad Etienne posted here, for some reason I couldn't find my login for HN.

yesimahuman 14y ago

If anyone is interested in a live example of a MMORPG built in HTML5, this was a project of mine at my last job: http://play.parallelkingdom.com/ http://play.parallelkingdom.com/ It uses the Cometd javascript and java libraries. In my opinion, you can get very "real-time" feeling games on the web with these technologies.

hell0_th3r3 14y ago

i applaud the effort that demonstrates the technical chops of the coders who can wring stuff like this out of browsers, but lets be honest here, html5 games are only viable if we dramatically lower our expectations. valve and others have already created a de-facto network standard for games...the games available there are what is in fact state-of-the-art, and what you need to beat to create a truly compelling product

james33 14y ago

This is the exact formula we are using for the rewrite of our poker game (http://pokerrpg.com http://pokerrpg.com). We are still beta testing the new poker tables, but so far they are running incredibly smoothly using no plugins, just vanilla Javascript, Node.js, and MongoDB. Glad to see these getting pushed more for games!

ashcairo 14y ago

I been using the same technique for the hobby multiplayer game (http://softpoetry.com/projects/burgers/ http://softpoetry.com/projects/burgers/) I've been working on. Got it running using the same stack on iOS/Android and PCs, so it's a good thing to note that it's not just for web browsers.

SvenBergstrom 14y ago
Yes good point, the first prototype of an older game ran on mac/windows/linux/android/iOS and browser using impact.js, phonegap, titanium etc. All the usual stuff still obviously works too :)

nopjia 14y ago

Looks like this is already happening: http://www.webgl.com/2012/06/webgl-game-cloud-party/ http://www.webgl.com/2012/06/webgl-game-cloud-party/

caycep 14y ago

someone needs to implement Bolo in html5

sil3ntmac 14y ago
https://github.com/stephank/orona/ https://github.com/stephank/orona/