Friday, September 17, 2010

Stardust (HTML5)

I always hated the javascript because of the browser incompatibility issues and so never bothered to do anything much with it other than making a silly menu navigation demo for a tutorial class.

Lately iv'e got interested in the whole WebGL movement with things like mozilla labs starting a gaming initiative and a game dev contest. Later i came across this website and realized i could probably make a resonable 2D game using the canvas element and javascript. Then i came across another gem, a whole freaking 2D game engine built around javascript and html5.

This gave me hope that i would actually be able to make a reasonable game using javascript. And guess what i wanted to port? .. My Pyweek11 entry stardust. I started reading about implementing classes in javascript and a little details here and there and finally go to writing the code. It was quite frustrating at first as some of the things like callbacks didn't quite work as i expected with member fucntions so i ended up using a lot of global variables. Any way i hacked and slashed my way through the random errors i was getting (mostly because i didn't bother to read into the details of javascript docs) and got the game up and running. It was an Interesting experience.
Here are the few Lessons I learnt:
  • Drawing filled shapes using ctx.* functions was more time consuming than just drawing images.
  • The callback functions apparently can't handle scoping well. So no member functions as call backs.
  • For some weird reason assigning a float value to variable and deducting it from another float made it into a NaN. (may be i messed bad but this is what i concluded).
  • Chrome has excellent debugging tools for javascript (breakpoints, profiling, stepin, etc) just amazing.
  • Use firefox to ensure that your code is right. Chrome was somehow ok with some errors in code.FireFox was the only way I could find them.
  • For max browser coverage use ".ogg" files instead of ".wav" for audio in your game/application (chrome doesn't support them).
  • There are extensive set of javascript libraries and tutorials available for just about any problem you might encounter at this stage.
So as you might expect i did run into some performance issues. I reduced/restricted the amount of particles that i created so that it would be good too look at yet have that flair. The blending functionality kinda requires you draw a rect and then the image for effect so i skipped different powerups and made just one powerup to blow all the enemies (this might change though).

Any way you can now.. "LAUNCH GAME" in your browser. enjoy.
Post a Comment