

Biolab Disaster - an HTML5 Game (plus Making-Of Video) - phoboslab
http://www.phoboslab.org/biolab/

======
hebejebelus
I have the utmost respect for you. Myself and a college friend are currently
working on a html5 game engine, but we're doing it in GWT, so we code Java
rather than Javascript. We decided to do that because, well, it's goddamn
difficult to make a really good game engine in js.

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. ;)

~~~
phoboslab
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>

~~~
hebejebelus
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-...](http://flax.ie/how-to-get-hidden-
autoplaying-audio-in-html5-on-ios/))

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"

~~~
phoboslab
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>

------
i80and
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!

~~~
Qz
Worked fine in Firefox 3.6 despite the page saying it would be slow...

------
ugh
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.

------
wtracy
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

~~~
richtaur
There's this: <http://html5games.com/> Our game is up there:
<http://html5games.com/2010/07/onslaught/>

------
networkjester
Ha, From the page source for:

<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>
    
    

Edit: formatting.

------
jfeldstein
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.

------
Tichy
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.

------
Detrus
Very well made game. Reminds me of games made with flixel for Flash.
<http://flixel.org/>

------
Teckla
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!

------
mrtron
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.

~~~
Tichy
Sounds as if the desktop was carefully prepared for the video.

------
cturner
Feels a lot like Rick Dangerous. Responsive, convincing weapon effects.

------
Keyframe
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.

------
alttab
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.

------
Entlin
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!

------
TamDenholm
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

~~~
phoboslab
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');

~~~
bd
_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).

------
elblanco
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?

------
euccastro
Crisp graphic design too.

------
cinimod
Jump should be up-arrow!

~~~
maushu
That might be a bad idea. It might conflict with the browser.

