The Reality of HTML5 Game Development and making money from it25th Jan 2012116
Note: This was written near the end of January 2012 and as such reflects the state of the technology and markets at the time. Everything is moving so fast a lot of the information below is subject to change, so bear that in mind.
HTML5 game development and indeed the abilities of web browsers are in state of rapid evolution right now. On the HTML5 Game Devs site that I run I’ve been noticing an increasing pace of new content, game releases, tutorials, business news and technology. High profile and high quality game releases such as the Microsoft sponsored Cut the Rope are making headlines across the world, and engaging the public more than ever before. But what is the reality of developing an HTML5 game today? Especially for those coming from a different platform. And more importantly is it possible to actually make any money doing it?
HTML5 is just a mark-up standard!
What is an HTML5 game?
Pixel Blasting 3D Jellyfish GPU Melting 4k Demo22nd Nov 2011
There have been some really inspiring demos and games released recently, here’s a collection of a few (hit the jump for the full list)
Bits ‘n Bites is a pretty awesome blog featuring some cutting-edge WebGL work. The pretty picture above is from a 4k demo called Frank. A proper multi-part with great synth track and seriously sweet effects. All for a sum total of 4096 bytes. Be warned though it’s likely to make your GPU cry – don’t even go in here unless you’re packing some serious graphical firepower. The Frank blog post details how he handled the compression, music generation and shaders. Fascinating reading.
Also from the same site (I apologise, I don’t know the name of the guy creating these works of art) is a WebGL port of the Windows demo Muon Baryon. Another demo well worth watching. But probably the most interesting thing of all is Sonant Live. A browser based music tracker with JS replay using generated synth sounds. Really awesome!
Talking of shaders: check out Shader Toy to build them in real-time online 🙂
First up is the WebStorm IDE from JetBrains. If you’re one of those developers who just can’t code with code-insight then this is about as invaluable an IDE as they come. It’ll inform you of JS coding errors in real-time, offer code optimisation suggestions and of course cross-project code-completion too. Licenses are 50% off until November 27th 2011 and include a free upgrade to version 3.0. That makes is just £27 (around $60) so well worth considering.
As wonderful an IDE as WebStorm is, I personally get on much better with Sublime Text 2. This is not an IDE, just an Editor. But it’s the best editor I’ve ever had the pleasure of using! Extremely fast, super-slick in operation, great colour schemes and fonts – and the best feature I’ve ever seen in an editor: The mini-map overview. There’s no discount on it, sorry 🙂 But as it only costs $59 I’m not sure you even need one. I find myself using it to edit even AS3 files now. Grab the free download and evaluate it for as long as you like.
If you’re old enough that name might be familiar to you as he was an 8-bit game developer of some notoriety. Responsible for creating gaming classics like Exolon, Cybernoid 1 and 2, Stormlord and Deliverance, I picked up his book with keen interest. It’s a bit of a hodge-podge, diving all over the HTML5 spectrum of new tech, but the section on canvas blitting and game design is really nice. I’d like to have seen a whole book just on this from him 🙂
You’ll need Chrome to hear anything at the moment. I tried it with version 15.0.874.121 which is a standard release channel build, not even the beta channel, and it worked fine with lots of different XM files.
Click here to test it out. You need to select a local XM file to play. If you don’t have one handy there are thousands on modarchive.org (just make sure you filter by xm)
Anaemia demo by LiteWerx (WebGL)12th Nov 2011
The Anaemia demo by Litewerx won 1st place in the TRSAC 2011 Demoparty that just finished. It’s a WebGL / JS demo using the Three JS library and consists of some lovely well-synced scenes. Although a little un-eventful in parts, the music helps keep things bubbling along and it’s an enjoyable ride that ran smooth as butter on my PC in full screen (i.e. maximised browser).
Large to download (27MB) which takes its fair while pre-loading. And of course you need a browser capable of running WebGL. Chrome is best and works with the music. Other browsers may vary. But this is demoscene after all and not representative of using WebGL in a “typical web site” as some may mistakenly believe.
Personally I just appreciate great demos no matter what they’re written in.
Run the demo here (27MB, WebGL), vote for it on Pouet, or if you really must you can watch it on YouTube.
All about Photon Storm and our
HTML5 game development services
Filter our Content
- Cool Links
- Flash Game Dev Tips
- Game Development
- Geek Shopping
- In the Media
- Phaser 3