Biolab Disaster
Before I go into some details of my HTML5 game Biolab Disaster, let me use my 15 minutes of fame to say the following:
Safari, please get your shit together! You are a very nice browser; my game runs with an excellent frame rate and everything works fine. But please (please!) support the Ogg Vorbis codec for Audio elements. There is no reason not to. I had to encode all my sound files in Ogg Vorbis and MP3, just because of you, Safari. You make my life unnecessarily difficult.
(I could now go on and say the same thing about Microsoft's upcoming IE9, but I don't care enough about their half-assed attempt to build a browser)
Biolab Disaster was completely build for HTML5 – that is, JavaScript and the new Canvas and Audio elements. It doesn't need any Plugins, just a good browser. The game was initially conceived as a demo for my Impact Game Engine, but it became much more in the process. I made a short making-of video that shows how the game and the engine were built:
Despite this all being a relatively new technology, the browser support is pretty good already. When I began with this project it wouldn't run in Opera at all; now Opera has one of the best Canvas and Audio implementations around. Current versions of Chrome and Firefox still have some sound issues (lag) but otherwise run the game fine. I did some performance tests on different browsers and platforms:
Frames per Second
A frame rate below 30 starts to feel “chunky” and anything below 20 is not really playable – or at least no fun to play. The iPhone 3GS and iPad therefore sadly fall into the “unplayable” category. The performance on an iPhone 4 should be significantly better, but I don’t have access to one at the moment. Mobile Safari also won't load the sound files correctly as it seems – the game is stuck in the preloader. I will look into it a bit closer in the coming days.
It's worth noting that – regardless of the browser – JavaScript performance was never an issue. The real bottleneck is the Canvas API. All browsers spend about 90% of their time drawing into the Canvas. Especially Firefox is a bit on the slow side, but with the upcoming hardware acceleration in Firefox 4, performance shouldn't be a problem anymore.
Biolab Disaster formulates the playable truth that it makes sense to create games for HTML5. Not only is the result on par with current Flash games, but also is the development process incredibly smooth and satisfying. The hurdles that a new technology such as HTML5 sets, were already overcome by the game engine. For the development of the game itself, I didn’t have to deal with any browser or platform issues at all.
With Microsoft delivering some HTML5 support in Internet Explorer 9 and JavaScript and rendering performance steadily increasing, I can’t see any reason why JavaScript and Canvas would not be the gaming platform of the coming years that finally removes Flash from its quasi monopoly.
See for yourself.
Tags: JavaScript, HTML5, Canvas, Games
116 Comments:
I'm using Firefox 3.6.9 under Windows 7. The preloading bar moves along at a good clip, then stops about 5 pixels from the end. It doesn't seem to want to load any more than that. Refreshing does not change this behavior.
The bouncing/falling ball demo at impactjs.org/ seems to work perfectly.
I am currently dabbling in JS and Canvas game dev combo, myself, and everything is going good so far.
I too see HTML5 as the preferred gaming platform in the future. However, my only concern is the security of ones code. It's very easy to just view the source code, copy it and make a clone of it.
Anyways, nice game! Can't wait for your Impact Game engine!
Hi,
What an incredible work (and nice game) !
Can't wait for your engine first release !
Just noticed that your engine only use the canvas tag and no divs. I've heard of possible global slowness because of redraws in the canvas area. What do you think about it ?
About the ogg support, there's a flash alchemy library available here : labs.adobe.com/wiki/index.php/Alchemy:Libraries
Of course, it won't work on iOs mobile devices as Apple banished flash but it might be a good (temporary) alternative for browsers that don't support ogg sound files.
Mr.doob
– Monday, September 13th 2010, 20:02
I feel your pain about Safari/IE9 not supporting OGG Vorbis. Politics...
Maybe we should disable sound on these browsers and suggest to use Opera/Firefox/Chrome... hopefully they will implement it rather than losing user base?
Mr.doob
– Monday, September 13th 2010, 20:07
Do you have a link for testing the FPS? We can help you testing it on other platforms. I can test Ubuntu/Linux and Android/Nexus One if you need.
Peevish
– Monday, September 13th 2010, 20:17
This is really fascinating. The problem I found with Biolab Disaster was that hitting the down and up arrow keys made the whole page scroll up and down. Since you don't use those keys in the game it's not really a problem, but being used to Flash games I was expecting that interacting with the game meant that all keys and clicks would apply only to the game and not the page at large. Is this part & parcel with HTML5? Will any game made this way have arrow keys that affect the game as well as the browser window?
AlteredQualia
– Monday, September 13th 2010, 20:42
A lot of Firefox's performance troubles come from its memory management. If you check Task Manager during the game, freezes coincide with garbage collection.
HW acceleration in FF4/Minefield is bit weird. Some things are faster, but some are surprisingly slower!
This comes from experience both with my own demos and also from recent Asteroids canvas benchmark by Kevin Roast:
www.kevs3d.co.uk/dev/asteroidsbench/
AlteredQualia
– Monday, September 13th 2010, 20:47
Oops, sorry for the double comment. First one didn't appear immediately after submission :(.
@Peevish You can prevent further processing of key events (not to have page scrolling on arrows and space) - "event.preventDefault()" works everywhere except in Opera.
Dominic
– Monday, September 13th 2010, 21:03
@Mr.doob: press F while the game is running. It will show the current FPS (damped) in the upper left corner.
Thomas
– Monday, September 13th 2010, 21:35
Very impressive work. It works quite well even on my Firefox 3.6, except indeed for some sound lag. Your screencast is brilliant too, quite informational, well edited, and some wondefully subtle jokes :D
Under what license will you release the engine?
Paul Irish
– Monday, September 13th 2010, 21:38
Dominic, This is excellent! Can't wait for your impactjs release.
Would be ace to get your making of video embedded in the main biolab page.
Jiri Kupiainen
– Monday, September 13th 2010, 22:08
Very cool game, excellent work! Seeing people do great stuff in the JavaScript gaming space makes me very happy. :)
"Flash Player required" to see video? Are you kidding me?
I'd ... like to say .. something. But the irony is killing me.
Mathieu 'p01' Henri
– Monday, September 13th 2010, 22:34
Really good work! Respect!
BioLabs Disaster reminds me of the excellent Star Guard by Sparky.
@Jonas B.: on Vimeo there is a "Switch to HTML5 player" link below the video, on the right.
While you say JS perf isn't the main cost, it's important to recognise that modern JS engines are more than an order of magnitude faster than they were just 2 years ago. Depending on what you're doing they can be hundreds of times faster. If you made JS take 50x longer it would be interesting to see the impact on overall perf.
That said this is really awesome :D
It seems like powered by Flixel flash engine.
Check flixel.org/
Awesome, awesome, awesome, I've already played three times. Performs great in Chrome6 on OSX.
Ian
– Tuesday, September 14th 2010, 05:04
This is insanely great.
I'm reading your JavaScript. Some of it I recognize from John Resig. Other stuff, like the module system, scaling images and sound management, is eye-opening. I can't wait for ImpactJS.
Game looks great!
How do I play in fullscreen? It's too small on my monitor (1920x1200).
Great work - your HTML5 wank should be accessible to most people by about 2025 - but yes, you're a star!
Dominic
– Tuesday, September 14th 2010, 07:32
@Thomas I haven't yet decided under which license the engine will be released. I think MIT would be a good choice. I have to look into it a bit more.
@Mathieu Henri, yes, Star Guard was a huge inspiration for the game. I also tried to somewhat emulate the graphics from Baldings Quest.
@Ian yeah, I'm using John Resig's Class Object. It's awesome; couldn't have done without it :)
Lorenz
– Tuesday, September 14th 2010, 09:22
This is the smartest thing I have seen in a while! The game works perfect on my firefox 3.6.9.
How long have you been working on this one?
On my Magic running CM6 default browser it loads to about 60% then stops.
I know you don't claim that it'll work on this platform and indeed this Android browser may not even support html5 properly. Just reporting it for completeness' sake.
This is awesomeness at its best.
Though... If you do a making of video, maybe you should remove the Bieber-song from your desktop first - and make sure your last search term isn't lesbian porn :D
Brad Vincent
– Tuesday, September 14th 2010, 11:53
This game is amazing! Welldone! Can I create a WordPress plugin to embed the game into a wordpress blog? It can include a link back to your site or something similar? Pls let me know...
Hi Dominic,
Firstly I'd just like to express how much me and my colleagues enjoyed playing the game and taking a sneak peak at the remarkable editor in the associated video.
We are entering a game building competition in 3 weeks time and would love to utilise the impact engine or parts thereof for the comp. If it's not released in this time would you consider allowing us to access impact.js before release? As a token of our gratitude, we are more than happy to conduct any testing and give feedback on the engine on iOS devices and platforms you may not have access to.
Either way, let us know at phoboslab@feistystudios.com
Regards,
Nicholas
Awesome!
Tip 1: Remove Justin Bieber song
Tip 2: Remove lesbian porn query
:)
Awesome game, can't wait for the engine to become available! Will you be releasing it on github.com/ or some such?
@Dominic
impactjs looks great. is it modeled after some other engine? i imagine each entity also has a draw method, which get called after all update() calls - is there some kind of scene graph which ensures only visible objects get drawn?
Folks, all the NSFW stuff was probably in jest.
Congratulations, you are mediocre! You have accomplished what Flash could do 15 years ago. Now write something in HTML 5 that Flash can do today, and you will have my respect (augmented reality, 3D engines, RIA, usability across disparate OS and device platforms:except iOS of course). Anyone pitching HTML 5 as a Flash alternative just doesn't understand the power of cross-platform, cross-device, single development implementation, or just hates Flash for personal reasons.
That being said, the game was a great throwback to sidescrollers from the 80s & 90s, and was fun to play :)
Dominic
– Tuesday, September 14th 2010, 17:11
@jookyone: Granted, developing a game for HTML5 still has its challenges, but it will get easier and faster over time.
Just look at where HTML5 has been just two years ago. It's coming together incredibly fast. Chrome has now already enabled WebGL in their current beta. It will continue in that pace, because browser vendors are competing like crazy.
Now look at where Flash has been two years ago. It still looks almost exactly the same today. Adobe stopped innovating for a lack of competition - the same thing happened to Microsoft with IE in the 2000s. It didn't turn out well for them.
Ian
– Tuesday, September 14th 2010, 17:44
Excellent stuff, a fun game to play, and showing off HTML5.
Hats off to you Sir.
Looks great, it would be interesting to see if the engine can be built in haXe (haxe.org) ;)
In "Chromium 5.0.366.0 (43090)" (a beta version I downloaded to test WebGL at the time) it sometimes forgets I'm still moving left or right arrow as I jump.
This is bad. It's made me miss a few jumps already.
I'm currently looking at the code. Who knows, I might find a bug.
@Karlo "However, my only concern is the security of ones code. It's very easy to just view the source code, copy it and make a clone of it."
You can use a JavaScript obfuscator to make it as hard to reverse engineer as compiled code.
Can't find any way to contact you so it will have to be here. I encountered a bug while using Chrome browser (Latest) on the second level where there is a wall of moveable boxes in the way. I just pushed my avatar against the boxes and they piled up in front of me to the ceiling. My avatar also went up with the boxes and got locked inside the ceiling and the boxes with no further movement possible.
Screenshot:
yfrog.com/jclevel2boxesimmobileplayj
Is it just me or has the Flash community attracted a disproportionate number of adolescents?
Dominic: This is excellent work.
Dominic
– Tuesday, September 14th 2010, 23:22
@RuzzT, oh wow. I knew my "physics" were far from perfefct, but this actually looks pretty bad. Will try to fix it, thanks!
pretty cool! I love this game~
Re: Android browser support.
The game starts loading and stalls about halfway through. But I've played it on FF 3.6 on Linux and it's quite nice. Good work!
A bit weird the IE9 results, isn't it?. Taking in account that it has hardware accelerated graphics out of the box. It should have much higher framerates.
Great work, congrats. I only skimmed through the comments, so sorry if anybody asked/suggested this, but if drawing is the issue, maybe you can optimize to redraw just the tiles that changed during the last frame.
I'll keep an eye on your work, and maybe I'll help optimizing the engine once you release the sources, if I can find the time.
looks great, did alot gaming code in javascript myself years back,
this really excites me for creating new games and engines.
You say that it runs very slow / poorly on iphone within mobile safari; what about when you package it up in Titanium AppCelerator or Phonegap; is the poor speed still apparent?
Thanks
en3r0
– Wednesday, September 15th 2010, 20:17
This rocks. Cannot wait to get my hands on the engine.
Could you please tell why exactly you cannot play the game in IE9 beta? Which features IE9 doesn`t support required by your game?
Dominic
– Thursday, September 16th 2010, 10:04
@Andrew: you can play it in IE9. It runs with only ~20 frames per second on my machine and the sound is laggy, but it certainly works. IE9 only supports MP3 for Audio elements (no Ogg Vorbis), this is annoying, but no show stopper.
IE9 a huge improvement from IE8, but Microsoft still has a long way to go.
Safari uses Quicktime to play audio elements. As long as you have the client has XiphQT playing Ogg Vorbis is not a problem.
In contrast Firefox can't use any existing coded but its own. That's why using MP3 or AAC in Firefox is impossible – "unnecessarily difficult"
This is beautiful! Please keep it simple and elegant, dont let the features-mafia trick you into blowing this out of proportion.
I have Opera 10.62 on Linux, and there's a really annoying glitch where he'll quite often just stop moving when you're holding down an arrow key. Chrome doesn't suffer the same problem and works flawlessly at 60fps on a Pentium 4, save for occasionally failing to start the background music (just refresh)
Opera/9.80 (X11; Linux i686; U; en) Presto/2.6.30 Version/10.62
In the beginning, after about 40 seconds Chrome will crash. Every time. Chrome 6.0.472.62 Beta on Windows Vista.
D:
If you know why email me tman1405 {at} yahoo *dot* com
veradin
– Saturday, September 18th 2010, 03:40
It would be brilliant if you expanded the level editor to support entity/sound/ui editors for those of us who aren't javascript savvy. That way you'd have more or less a complete html5 game maker instead of a level editor for one game, which admittedly is quite awesome.
Great job! Can't wait to play around with Impact!
Hi Dominic,
Congrats for your (wip) engine. I'm also panning to create a javascript game engine and I wondered what would be the best option in your opinion:
* base all on <canvas>: slow because of redraw at each frame but could be actually fast if hardware acceleration can handle it properly
* a mix of <div> elements and <canvas> for special effects: could be a good compromise but what if the number of animated <div> noticeably increase ? In this case, working only with canvas could be more effective ... ?
Regarding your experience, what do you think would be the best option ?
Dominic
– Monday, September 20th 2010, 17:35
It depends. I think Canvas is definitely the future, but if you want something that works fast and on every browser now, use Divs.
Rocket Engine ( rocketpack.fi/engine/ ) and Aves ( www.dextrose.com/en/projects/aves-engine/ ) achieve much better performance with Divs, especially on mobile devices. But there is no reason why Canvas has to be this slow. It will get faster in the coming months, eventually outperforming Divs.
I guess working with Divs instead of with Canvas is also much more complicated.
I enjoyed it, it played well. I struggled with X <b>and</b> C as jump and shoot. I was constantly jumping when I meant to shoot and shooting when I meant to jump. Up Arrow seems like a more natural jump key to me.
I'm amazed that game designers do not do some basic things as standard.
1. Where possible, have re-programmable keys. Let the player choose their keys.
2. Volume control. Let the player set the volume of both music and effects separately, with a sliding control. So often, you get one choice - Mute Everything, when all you really want is to turn the music down.
Dominic
– Friday, September 24th 2010, 00:49
The Up and Down Arrow keys scroll the page by default. This default action is - in some browsers - not preventable. Therefore I was hesitant to bind those keys.
As for the music/sound volume controls - yeah, sorry. I simply was too lazy to implement those. They will be there in next version :)
Hi. Just played biolab disaster. Amazing. Can't believe that's little old javascript doing the work. This is the first serious proof I've seen that Flash really is heading for the scrap heap. I feel sentimental about Flash as it's been so central to providing rich internet content over the last decade or so, but it's gotta go!
Played it again several times. Just wanted to report* an odd bit. In one game, at the screen where I first meet the moving platforms, the Purple Prince at the very first platform/lift somehow got onto the platform. I'd been killed and re-appeared. When I went back to the lift, Prince was on it. But I thought they didn't move. Seemed strange.
*I have no idea if this matters in the slightest. Just thought it might be of interest.
Jonas Höglund
– Tuesday, September 28th 2010, 01:20
I love you. No, seriously, I really look forward to playing around with this engine when it's released; it looks just like what I never got around to do myself. Don't have much time to try out the game at the moment, but I'll do when I have time. From what I've seen it looks nothing less than awesome, though.
Give us some news! :)
It looks really nice. Are you planning on releasing the engine as free software under the GPL or something GPL-compatible?
Amazing game --- amazing.. i actually enjoyed playing it and fully finishing it. The game worked really well - both video and audio -- on my chrome 6.0.472 browser on windows 7 laptop running the fast intel core i7 processor at 1.6GHz.
How do you go about measuring the frame rate, or profiling which functions are using the most processing power? I'd like to do some of that with my new laptop. It has a Core i3-350M processor, and when the hardware acceleration in Firefox 4.0 beta 6 is active, Biolab Disaster appears to peg one of the processor's cores and achieves a frame rate between 5 and 10 frames per second. With hardware acceleration disabled, it appears to do a nice 30fps or more.
There doesn't seem to be such a problem with the bouncing ball demo on impactjs.org, and the semi-well known photos.svg doesn't seem to have any major slowdown with the acceleration turned on, even if it isn't very complex.
Maybe it's something with the canvas acceleration, if there is any, and maybe I should also contact the Firefox developers as well?
Opera/9.80 (X11; Linux i686; U; Linux Mint; en) Presto/2.6.30 Version/10.62
Same issue with moving and jumping as posted by #51. Also, if you keep the fire button pressed it fires in auto mode, instead of only one shot as it does in chrome ( img20.imageshack.us/img20/6189/screenshotxk.png ).
Dominic
– Sunday, October 3rd 2010, 10:53
@Chris Moeller: Yes, there was an issue with HW accel in some betas of Firefox 4 - it appears to be fixed now. I'm not sure what caused it, but my guess is that drawing lots (hundreds) of small images didn't work very well with the HW accel. See the Bug Report: bugzilla.mozilla.org/show_bug.cgi?id=595655
As for the profiling - the Firebug Extension for Firefox has a JavaScript profiler. Chrome and Safari have one built in directly in their Developer Tools, too.
@Noid.EXE: I'm sorry, I'm not much of (Desktop) Linux guy. I don't think that I can fix this bug in my code. It appears to be an issue with Opera and/or the OS.
wirehack7
– Sunday, October 3rd 2010, 23:36
It crashes in Google Chrome 6.
You can play for a while but then the whole browser crashes. So you need a V7 beta release to play this?
Otherwise, it's some great work you made. You are now a HTML5 hero! Thanks a lot and I am looking forward for the editor.
Great demo and game. I'm surprissed of the power you can take from html5 and js, i'm excited about what future html5 & js game devs can bring to the net.
Btw, game detects ps3 browser as it was MSIE. I Loled.
Chris
– Monday, October 4th 2010, 17:52
That is incredible. Nice work, Dominic.
I was a fan of Asaph, too.
Just curious, how far away are you from releasing th engine?
Dude, that is an amazing HTML5 game I can't stop playing. The graphics are so simple but its very addictive. Bravo. I can't wait to see where the future of HTML5 gaming takes us.... adios Flash ! When will the HTML5 game engine be released ?
Chris
– Tuesday, October 5th 2010, 20:36
Something else - I've played this about five times now and I'm wishing there were more levels. (I keep forgetting this is really just a proof of concept - it feels so much like a finished game.) Once you release the level editor, you might think about having a community section or something for levels other people designed.
Again, awesome job. I'm looking forward to playing with this.
jf
– Wednesday, October 6th 2010, 11:58
Really brilliant, wish I had your skills.
panzi
– Thursday, October 7th 2010, 01:11
This is awesome! Please make the editor publicly accesible so that we can create more levels that we can share.
I actually use my X-Box