John Esposito HTML5 Canvas + WebSockets = Multiplayer Space Shooter In Browser
Email
Recently I ran across Rawkets, a slick site taking two emerging web technologies -- HTML5 Canvas and WebSockets -- and combining them in the most obvious way possible: a multiplayer space shooter.
Why Canvas? No plugins -- graphical Yes; and why WebSockets? Low latency -- multiplayer Yes.
Sadly, every time I join the game, nobody else is there. If I wanted single-player HTML5 gaming, I could check out another project by Rawkets' creator, Rob Hawkes: straight-up Asteroids, using the HTML5 game engine Impact.
But WebSockets won't help Asteroids, because Asteroids runs totally on just one client.
Rawkets, on the other hand, has multiple clients running Canvas, with their own JavaScript, connecting via WebSockets, all taking through Node.js on the server, producing something like this:
I can't tell whether the game is any fun, because I've never seen anyone else in there. (Also, it doesn't seem to work in Chrome). But as a tech demo it's a cool idea, and conceptually straightforward enough to inspire. (If you're impressed, Rob also links from the game site to to his HTML5 Canvas book -- though apparently the book assumes virtually no knowledge of Canvas or JavaScript, and doesn't progress all that far.)
Check it out, and maybe shoot someone else's ship down -- fairly fairly, of course, because WebSockets will keep multiplex channels persistently open...
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)
Comments
Clinton Begin replied on Tue, 2011/12/27 - 1:48am
I had an interest in real-time multiplayer gaming on the web. So as an educational step of my own, I created something similar using Flash. Sure it's not HTML5 and thus not sexy, but my blog explains why I think one would have a hard time achieving something similar with HTML5. It's a cross between Rawkets and Asteroids... although it's quite different from both. It has an endless galaxy (spherical) and it plays sort of like Asteroids until a second player joins (up to 5 players -- a number I chose because I didn't want to draw anymore ships).
http://clintonbegin.blogspot.com/2011/11/multiplayer-pvp-starship-battles-in.html
I'm not flaming HTML5 without purpose. I'm currently learning HTML5 and building a game in it as well. And I have to say - compared to AS3/Flash - it is a complete mess. HTML5 is every bit as incompatible, inconsistent and messy as the HTML of old. Forgive me if I don't think that the number '5' will suddenly make all of those legacy issues disappear. I'm happy to list a bunch, but let me at least say: Audio doesn't work on all platforms (iOS). The frame rates are unusable on Android and Chrome for Mac. There's very little consistency or cooperation between the SVG capabilities and Canvas (unlike Flash where the same stage can work with both). Having to encode media multiple times to support all browsers is insanity... double the disk space. And my favourite... the canPlayType() function that returns either "", "maybe" or "probably". There is no "yes" or "no"... LOL.
Frameworks like EaselJS will be imperative for HTML5 Canvas in particular to be useful (created by Grant Skinner of Flash fame).
I don't want to start a Flash vs. HTML5 battle, but I am shocked that people really think HTML5 is even remotely close to the capabilities and cleanliness of AS3 and Flash (and I'm speaking as a person who doesn't own Flash Pro... I just hand code everything in AS3 and use the Flex compiler).
Anyway... I really, truly hope that HTML5 becomes what we need it to be. But the precedent does not bode well for it.
Regards,
Clinton
John Esposito replied on Tue, 2011/12/27 - 11:45am
in response to: cbegin
Sweet game! I'm a sucker for laser glows. Didn't see anyone else in there when I tried it -- but, does the endless galaxy make it harder for individual users to find one another (esp. without landmarks because you're in space)?
What you're saying about the problems with HTML5 game development sound spot-on -- a lot like what EA and Zynga people were saying at the HTML5 game conference a couple of months ago.
Given HTML5's messiness, what made you want to learn it and build a game in HTML5 (besides awesome curiosity)? is it just the interoperability promise?
Clinton Begin replied on Tue, 2011/12/27 - 12:34pm
in response to: johnesposito
The endless space is handled two ways: First, it's not endless as in true space. It's endless more like a sphere has no end. So you will eventually wrap around (but not like Asteroids which is a torus). Second, the radar around the outer edge shows the other players by color. Load it up and press refresh a couple of times to queue up a few ships. You'll see the other "zombied" ships in the radar.
As for the "why HTML5"... well... mostly it's because of the momentum.
I only learned flash a couple of years ago, and was blown away by how awesome it was. Sure the VM is a bit bare metal and does not handle errors well (i.e. it crashes). But it's a 2MB VM! It's tiny and fast. But more importantly, ActionScript 3 and the Flash APIs are excellent and very powerful. There are also a lot of 3rd party and open source frameworks for sound, graphics and gaming. It's really good stuff.
Then Steve Jobs threw down the gauntlet, and with one simple statement, and pretty much shifted the industry away from Flash. Adobe barely defended themselves. Luckily Flash will likely live on as a cross-platform desktop and mobile solution (what Java always wished it was). But Flash on the web will likely disappear.
So right or wrong, HTML5 is what we're left with. It's a simple case of someone speaking too soon... HTML5 is not ready, and may never be. HTML5 isn't just bad for Canvas and Video etc... the entire spec is brutal. The expert groups responsible are like two (or more) warring factions. One side on XHTML and the other on HTML. The ball has been in the XHTML court for over a decade. Now it's in the HTML court. And what this means is that HTML5 is NO LONGER WELL FORMED XML!
This is a huge problem. From a developer perspective, it has been really nice to be able to parse HTML as XML. Not only that, but it made sure that tags were consistently closed and that rendering engines *could be strict* (even if they weren't). Now tags like the meta charset tag (a required tag) doesn't HAVE to be closed or ended with a /. In addition, it allows naked attributes like autoplay... again, they can be made well formed (like autoplay="autoplay" ... why not true/false?). But they don't HAVE to be. This will return us to the days of HTML rendering hell. I'm shocked that the browser makers have not revolted against this.
My prediction is that HTML5 will continue to be a developer's worst nightmare, and will yield a poor end-user experience for things like games and rich media. With no other option, the result will push people towards building native apps, rather than web apps. Some of those "native" apps could be built with Adobe AIR, or Java. But I think the Android SDK, iOS/Objective-C and Silverlight on Windows Phone will dominate their respective platforms.
It's truly sad. But honestly, I think these companies prefer it that way. They don't truly like HTML5 any more than any other cross-platform solution that doesn't tie the end user to their system.
And for what it's worth... Google's 2011 Christmas doodle (as with all of their other doodles) needed Flash behind the scenes for the audio to work... despite the rest of it being pure HTML. :-)
Cheers,
Clinton