Biolab Disaster - an HTML5 Game (plus Making-Of Video)(phoboslab.org)
phoboslab.org
Biolab Disaster - an HTML5 Game (plus Making-Of Video)
http://www.phoboslab.org/biolab/
18 comments
Thanks!
Yeah, managing a "large scale" JavaScript application isn't easy. I ended up inventing a module system that loads all the dependencies before it executes a .js file's body. This is all hidden on the page, because all the files were compiled together into just one.
All the objects in the game world are derived from a base "Entity" class and inherit physics and stuff like that. So each particle, like any other object, is an Entity and not handled differently at all. When the Blob enemy dies, it just spawns some new Entities - the particles.
For the sound, the files names are all with an .ogg extension. The engine then decides if the browser can play Ogg Vorbis and substitutes the extension to .mp3 if necessary. So I _do_ have to have all sound files as .ogg _and_ .mp3. I hope that'll change in the future...
Edit: just uploaded the Editor as well. Saving is disabled, but everything else should work. Press Space to open the Entity or Tile menu (depending on which layer is currently active); hold Right Mouse Button to pan around; Z and Y are undo and redo.
http://www.phoboslab.org/biolab/weltmeister.html
Yeah, managing a "large scale" JavaScript application isn't easy. I ended up inventing a module system that loads all the dependencies before it executes a .js file's body. This is all hidden on the page, because all the files were compiled together into just one.
All the objects in the game world are derived from a base "Entity" class and inherit physics and stuff like that. So each particle, like any other object, is an Entity and not handled differently at all. When the Blob enemy dies, it just spawns some new Entities - the particles.
For the sound, the files names are all with an .ogg extension. The engine then decides if the browser can play Ogg Vorbis and substitutes the extension to .mp3 if necessary. So I _do_ have to have all sound files as .ogg _and_ .mp3. I hope that'll change in the future...
Edit: just uploaded the Editor as well. Saving is disabled, but everything else should work. Press Space to open the Entity or Tile menu (depending on which layer is currently active); hold Right Mouse Button to pan around; Z and Y are undo and redo.
http://www.phoboslab.org/biolab/weltmeister.html
Haha, that's virtually identical to what we're doing, except with GWT, so we can hand off some of the tough stuff to the underpinnings and don't have to deal with js's strange object-oriented system (at least to us, C++ programmers ;)).
So you didn't use the audio tag's <source> option? Did you find that too slow?
(also, I don't know if it'll help you at all, but I got audio working nicely on iPhone/iPod/iPad and wrote this tutorial about it http://flax.ie/how-to-get-hidden-autoplaying-audio-in-html5-...)
Edit: By the way, does your map editor output as JSON? We went through a bunch of crap getting serialisation/de-serialisation working across client/server, but you probably wouldn't hit any of those problems because your code isn't "compiled"
So you didn't use the audio tag's <source> option? Did you find that too slow?
(also, I don't know if it'll help you at all, but I got audio working nicely on iPhone/iPod/iPad and wrote this tutorial about it http://flax.ie/how-to-get-hidden-autoplaying-audio-in-html5-...)
Edit: By the way, does your map editor output as JSON? We went through a bunch of crap getting serialisation/de-serialisation working across client/server, but you probably wouldn't hit any of those problems because your code isn't "compiled"
John Resig's Class-Object has some simple inheritance without the (very verbose) prototype stuff. It's the basis of my engine:
http://ejohn.org/blog/simple-javascript-inheritance/
I used the Audio API's canPlayType() to decide whether to use mp3 or ogg. I just found it simpler than constructing the DOM for Audio and Source elements. I'll definitely look into the sound issuse on iPhone. Thanks for your tutorial!
Yes, the levels are saved in JSON format, with a bit of boiler plate code so it can get loaded and "baked" nicely. Here's the source for the first level:
http://www.phoboslab.org/biolab/lib/biolab/levels/biolab1.js
http://ejohn.org/blog/simple-javascript-inheritance/
I used the Audio API's canPlayType() to decide whether to use mp3 or ogg. I just found it simpler than constructing the DOM for Audio and Source elements. I'll definitely look into the sound issuse on iPhone. Thanks for your tutorial!
Yes, the levels are saved in JSON format, with a bit of boiler plate code so it can get loaded and "baked" nicely. Here's the source for the first level:
http://www.phoboslab.org/biolab/lib/biolab/levels/biolab1.js
If you're making HTML5 games you might want to email Martine Spaans at SPIL Games, they're throwing a lot of money around to people building on HTML5.
http://www.spilgames.com/
http://www.spilgames.com/
Here's a thread about it:
http://news.ycombinator.com/item?id=1690118
Brilliant, thank you!
Yeah, I'll echo that sentiment- impressed at how well the audio worked. I'm also interested in getting audio working with GWT. I haven't tried in a while, but back in March this seemed to be the best bet: http://stackoverflow.com/questions/2535211/options-for-produ...
There may be better options now.
There may be better options now.
<spam>
I actually wrote a short-ass tutorial on that a while back, too. Mostly it's just JSNI, though. http://flax.ie/how-to-use-html5-audio-tag-with-gwt/#more-152
My engine code for the audio component is more or less the same as that, actually. I gave a small, quick explanation on that the other day: http://flax.ie/flax-html5-game-engine-development-diary-part...
</spam>
I found it fairly easy to do. We load the html for each sound object into the page, and then statically play/pause/stop/load them via the tag name. There's a JSON file, which contains a bunch of AudioContainer objects. When they're constructed, they construct their own HTML (so, the audio tag), and loads it into the page. Then we have a static-ish Audio service to make play/pause etc pretty easy. The JSON itself is made in our (as yet hypothetical) map editor. Must get to work on that, actually. ;)
I'm not massively happy with our solution, though. It works, but it's more complex than I feel it should be, considering that the actual implementation of it in js is so easy.
edit: I should point out that the entire point of the engine is so that you don't need Flash, which is why we're using <audio> rather than one of the pre-existing frameworks, like gwt-voices, which we would so totally use, if it didn't use Flash underneath somewhere.
I actually wrote a short-ass tutorial on that a while back, too. Mostly it's just JSNI, though. http://flax.ie/how-to-use-html5-audio-tag-with-gwt/#more-152
My engine code for the audio component is more or less the same as that, actually. I gave a small, quick explanation on that the other day: http://flax.ie/flax-html5-game-engine-development-diary-part...
</spam>
I found it fairly easy to do. We load the html for each sound object into the page, and then statically play/pause/stop/load them via the tag name. There's a JSON file, which contains a bunch of AudioContainer objects. When they're constructed, they construct their own HTML (so, the audio tag), and loads it into the page. Then we have a static-ish Audio service to make play/pause etc pretty easy. The JSON itself is made in our (as yet hypothetical) map editor. Must get to work on that, actually. ;)
I'm not massively happy with our solution, though. It works, but it's more complex than I feel it should be, considering that the actual implementation of it in js is so easy.
edit: I should point out that the entire point of the engine is so that you don't need Flash, which is why we're using <audio> rather than one of the pre-existing frameworks, like gwt-voices, which we would so totally use, if it didn't use Flash underneath somewhere.
Wow, that's perfect, thank you! I had no idea it was so simple in HTML5. And JSNI is totally fine.
Are you using http://code.google.com/p/google-web-toolkit-incubator/wiki/G... ? I'm eager for that to become part of standard GWT.
Are you using http://code.google.com/p/google-web-toolkit-incubator/wiki/G... ? I'm eager for that to become part of standard GWT.
No, we built our own little wrapper, basically doing the same thing as we did for audio. A few JSNI methods, more than anything. It does almost the same thing as GWTCanvas, only with far less functionality, and more toned to our needs. We did this for two reasons:
1. We didn't need 80% of the functionality that's in GWTCanvas (and canvas in general), and the 20% that we did need was a little buggy. We thought it'd simply be quicker and more efficient to build our own rather than modify or fix GWTCanvas.
2. <canvas> is, to paraphrase Tim Schafer, slower than molasses going uphill in january, on crutches. Might as well be using Flash, really. It also doesn't work on some browsers (we're unofficially, quietly, don't-tell-anyone-I-said-this, going for mobile device support as well), and doesn't work the same way across all browsers either.
What we've done is use a graphics abstraction layer, so that when the time comes that we implement it with the DOM (which we're slowly working on, but canvas will do for the moment), we need to change virtually nothing in the rest of the code.
Afaik the other half of the Flax project is writing a blog post as we speak about how we implement Canvas. I'll be sure to submit it to HN. ;)
1. We didn't need 80% of the functionality that's in GWTCanvas (and canvas in general), and the 20% that we did need was a little buggy. We thought it'd simply be quicker and more efficient to build our own rather than modify or fix GWTCanvas.
2. <canvas> is, to paraphrase Tim Schafer, slower than molasses going uphill in january, on crutches. Might as well be using Flash, really. It also doesn't work on some browsers (we're unofficially, quietly, don't-tell-anyone-I-said-this, going for mobile device support as well), and doesn't work the same way across all browsers either.
What we've done is use a graphics abstraction layer, so that when the time comes that we implement it with the DOM (which we're slowly working on, but canvas will do for the moment), we need to change virtually nothing in the rest of the code.
Afaik the other half of the Flax project is writing a blog post as we speak about how we implement Canvas. I'll be sure to submit it to HN. ;)
Maybe it wasn't an Easter egg. Does it matter ? :D
I certainly hope the Justin Bieber song on his desktop was an easter egg. ;)
It's easy to get a platformer wrong; this is exactly right. The controls are snappy, the gun actually shoots properly, the jumping physics feel satisfying, and the baddies don't just stupidly trawl a preplanned path.
Also, the performance is impressive. Playable without a hitch with Chrome 6 on my Eee 900.
Excellent work!
Also, the performance is impressive. Playable without a hitch with Chrome 6 on my Eee 900.
Excellent work!
Worked fine in Firefox 3.6 despite the page saying it would be slow...
Also interesting:
Blogpost – http://www.phoboslab.org/log/2010/09/biolab-disaster
Making Of (Video) – http://vimeo.com/14920760
That’s all linked from the game page but easy to overlook because the game is so much fun.
Blogpost – http://www.phoboslab.org/log/2010/09/biolab-disaster
Making Of (Video) – http://vimeo.com/14920760
That’s all linked from the game page but easy to overlook because the game is so much fun.
Anyone know of a Kongregate-like website that accepts HTML5 games?
Kongregate looks like a fun way to try making a buck, but they only seem to support Flash and Shockwave, and I'm allergic to Adobe. :-P
Kongregate looks like a fun way to try making a buck, but they only seem to support Flash and Shockwave, and I'm allergic to Adobe. :-P
There's this: http://html5games.com/
Our game is up there: http://html5games.com/2010/07/onslaught/
Sounds like they're talking about this in the comments above:
http://news.ycombinator.com/item?id=1689129
http://news.ycombinator.com/item?id=1689129
Ha, From the page source for:
<div id="noCanvas">
<div id="noCanvas">
<p>
Hey there, it looks like you're using Microsoft's Internet Explorer. Microsoft hates the Web and doesn't support HTML5 :(
</p>
So we've reached Sega Genesis level gaming in the browser. As soon as someone gets a Sonic port finished, I'm done working forever.
Just wondering, what is the best way to set up the game loop - simply setTimeout?
I have considered if it would be worthwhile to try putting the logic into a web worker and trigger update events to the display. Then again, sending an event from the worker to the UI thread will probably be scheduled the same way as a setTimeout event.
It's just that setTimeout seems rather slow. I have created a game with AI in Javascript, which runs fine with web workers. I tried to make it work without workers by frequently interrupting the AI thread with setTimeout events, and it was a lot slower.
I have considered if it would be worthwhile to try putting the logic into a web worker and trigger update events to the display. Then again, sending an event from the worker to the UI thread will probably be scheduled the same way as a setTimeout event.
It's just that setTimeout seems rather slow. I have created a game with AI in Javascript, which runs fine with web workers. I tried to make it work without workers by frequently interrupting the AI thread with setTimeout events, and it was a lot slower.
Very well made game. Reminds me of games made with flixel for Flash. http://flixel.org/
Very nicely done. I played to the end, which is a big compliment coming from me, as I don't usually play JavaScript or Flash games more than a few minutes.
It gave me a pleasant nostalgic feeling, reminding me of the Commodore 64 games I used to play as a teenager in the 1980s.
Here's hoping more of the same is coming!
It gave me a pleasant nostalgic feeling, reminding me of the Commodore 64 games I used to play as a teenager in the 1980s.
Here's hoping more of the same is coming!
The making of video has 'lesbian porn' in the google search box on the top right.
Hilarious if it was intentional, and even more hilarious if it was unintentional.
Justin Bieber as the sole mp3 on the desktop is also funny for some reason, and LOLCATS/WAREZZZZ as the other folders.
Hilarious if it was intentional, and even more hilarious if it was unintentional.
Justin Bieber as the sole mp3 on the desktop is also funny for some reason, and LOLCATS/WAREZZZZ as the other folders.
Sounds as if the desktop was carefully prepared for the video.
Great game! I wish there was more of it. Shame JS is still too slow for games, my OS dragged while it played (with a somewhat decent frame rate though) in Chrome.
When I closed the tab, the music kept playing for a while.
Great job other than that. Judging by the code it looks like you have a game programming background.
Great job other than that. Judging by the code it looks like you have a game programming background.
Very cool! Jumping is a bit slow, so one needs to plan unexpectedly far into the future to avoid some enemy fire. Apart from that: great achievement, congrats!
This is really cool but can you map the up key as jump? I instinctively push up on platform games like this then i die because the dude didnt jump. :P
The Up Arrow usually scrolls the page up. I could suppress it with preventDefault(), but this wouldn't work in Opera. I'm therefore hesitant to enable it.
You can enter the following in the address bar, while the game is running, though:
javascript:ig.input.bind(ig.input.UP_ARROW, 'jump');
You can enter the following in the address bar, while the game is running, though:
javascript:ig.input.bind(ig.input.UP_ARROW, 'jump');
The Up Arrow usually scrolls the page up. I could suppress it with preventDefault(), but this wouldn't work in Opera. I'm therefore hesitant to enable it.
Maybe it's better to enable it, so that Opera users would complain and it would finally get fixed (by Opera team).
You could use "keypress" event instead of "keydown" (for which for some reason preventDefault in Opera works), but this just brings other problems.
(BTW it was me who left comment about events in your blog post. For my HTML5 games, I chose to use arrows and preventDefault, as in majority of browsers it improves user experience (even in Opera problems come only when page is larger than window). Just don't forget to cancel events only for keycodes that you actually consume).
Maybe it's better to enable it, so that Opera users would complain and it would finally get fixed (by Opera team).
You could use "keypress" event instead of "keydown" (for which for some reason preventDefault in Opera works), but this just brings other problems.
(BTW it was me who left comment about events in your blog post. For my HTML5 games, I chose to use arrows and preventDefault, as in majority of browsers it improves user experience (even in Opera problems come only when page is larger than window). Just don't forget to cancel events only for keycodes that you actually consume).
very cool thanks. Also, awesome making of video, signed up to be notified of the release of the game engine.
Crisp graphic design too.
great great great.
That's all I can say. You could probably make a fortune for a year or so off of the engine that drives this.
Any plans to make it work better on mobile devices?
That's all I can say. You could probably make a fortune for a year or so off of the engine that drives this.
Any plans to make it work better on mobile devices?
So, in summary, holy shit, that's absolutely amazing. Hats off.
I have two questions, though: How do you do your particle effects? Also, I noticed when you went through some code, you seemed to only point to Ogg Vorbis audio files. How does your sound system work?
(also, heh. Lesbian porn easter egg in the making-of video)
Edit: I should mention that our engine is (will be) open source. Not stealing your ideas, just really interested. ;)