5 ms·

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 t

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

ovi256 16y ago
Maybe it wasn't an Easter egg. Does it matter ? :D
- hebejebelus 16y ago
  I certainly hope the Justin Bieber song on his desktop was an easter egg. ;)
phoboslab 16y ago
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 http://www.phoboslab.org/biolab/weltmeister.html
- hebejebelus 16y ago
  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-on-ios/ 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"
  - phoboslab 16y ago
    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/ 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://www.phoboslab.org/biolab/lib/biolab/levels/biolab1.js
kaffeinecoma 16y ago
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-producing-audio-with-gwt http://stackoverflow.com/questions/2535211/options-for-produ... There may be better options now.
- hebejebelus 16y ago
  <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 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-4/ 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.
  - kaffeinecoma 16y ago
    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/GWTCanvas http://code.google.com/p/google-web-toolkit-incubator/wiki/G... ? I'm eager for that to become part of standard GWT.
benologist 16y ago
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/
- benologist 16y ago
  Here's a thread about it: http://news.ycombinator.com/item?id=1690118 http://news.ycombinator.com/item?id=1690118
  - hebejebelus 16y ago
    Brilliant, thank you!

ovi256 16y ago

Maybe it wasn't an Easter egg. Does it matter ? :D

hebejebelus 16y ago
I certainly hope the Justin Bieber song on his desktop was an easter egg. ;)

phoboslab 16y ago

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 http://www.phoboslab.org/biolab/weltmeister.html

hebejebelus 16y ago
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-on-ios/ 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"
- phoboslab 16y ago
  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/ 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://www.phoboslab.org/biolab/lib/biolab/levels/biolab1.js

kaffeinecoma 16y ago

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-producing-audio-with-gwt http://stackoverflow.com/questions/2535211/options-for-produ... There may be better options now.

hebejebelus 16y ago
<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 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-4/ 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.
- kaffeinecoma 16y ago
  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/GWTCanvas http://code.google.com/p/google-web-toolkit-incubator/wiki/G... ? I'm eager for that to become part of standard GWT.

benologist 16y ago

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/

benologist 16y ago
Here's a thread about it: http://news.ycombinator.com/item?id=1690118 http://news.ycombinator.com/item?id=1690118
- hebejebelus 16y ago
  Brilliant, thank you!