For Flash Games Developers, Working With the HTML 5 Canvas Is A Lot Of “Roll Your Own”

I’ve been working with the HTML 5 Canvas for the past couple weeks (in my spare moments) trying to implement one of the simplest games from CH.1 of our book, The Essential Guide To Flash Games with it. The game is a very simple shooter (Pixel Shooter). It’s maybe, the most basic game I can imagine. For the book it took me about 2 hours to create using a combination of Flash develop and the Flash IDE (to create a single explosion animation). From this, I’ve gained a pretty good perspective of what it means for a Flash developer to try to work with the Canvas to make a game. Here are some things that stand-out as a great concern.  Many of them are things that Flash developers rely on, that must be created from scratch  (or nearly) with the HTML 5 canvas.  These are not only the ones I’ve run into so far, just the big ones that stand-out. Many of these also happen to be things that Flash solved many many years ago.

1. Preloading: Every object must be separately preloaded before you begin to use it. For me, this means tracking every graphic and sound individually, before continuing execution.  Sure, a .js library could do this for you , but it’s still a roll-your-own situation. Flash makes this a no-brainer.

2. Mouse Events: You can track mouse events on the Canvas, but not for individual objects on the canvas since they are not part of the DOM. (Objects is really a a misnoner too, as they are complete “roll your own” as well). This means you need to do some screwy stuff to recognize button clicks on the canvas (i.e. have a 1 pixel bit map follow the mouse and track collision detection with it and any button click when a mousedown event occurs). It’s medieval.  Roll your own button events?  Yep.

3. Collision Detection: 100% roll-your-own. Sure, advanced developers already do this, but sometimes they also use Math libraries for rectangle and circle intersections. Those don’t exist either (that I could find). Furthermore, this makes it mostly inaccessible to designers who want to add interactivity but don’t want to learn complex math. Flash solved this problem in the last century.

4. Audio: This is huge. Audio support is terrible. You can play sounds, but only one instance of the same sound at a time. Fire two shots, the sound of the second shot interrupts the first. Also, audio can be loaded as an object into JavaScript in Safari, but Firefox and Chrome don’t seem to support it. Again, there may be ways around these things, but they are going to be custom solutions and probably not cross-browser compatible. Even with its’ own issues, the audio support in Flash is vastly superior in every way. In my estimation, the best and most universal way to play audio with Canvas is to load a 1×1 SWF and play sounds from it using JavaScript. Of course, this won’t work in places that won’t allow SWFs, so those places can just settle form crummy or no audio.

5. Animation: Again, 100% roll your own. I’m still struggling to make my simple 3 frame explosions look like the simple ones I made in Flash. Very frustrating.

6. Total development time: Running about 40 hours now (compared to the two hours for the Flash version). Most of that is debugging, since there are no real debugging tools, it’s all “comment, trace, comment trace”…except I had to “roll my own”  trace() function to do it. Sure, you can argue that since I’m not a JavaScript expert, it’s not a fair comparison for development time. However, I’m no C# expert either, but when I went through a similar exercise with Silverlight last year, I was pleasantly surprised by the ease at which I could work with it. Not so with the HTML 5 Canvas.

I could go on, but what’s the point? The Canvas will be important, and I’m working very hard to learn how to use it effectively. However, it is nothing compared to Flash. As it stands right now, I’d be much more efficient and creative using Flash 5 than I ever could be with the Canvas.

And remember, the HTML 5 spec is just now being implemented. To improve it in any significant way, it will take a new spec and another 5-10 years cycle. Ouch.

Now, for advanced game developers, “roll your own” can be a good thing.   We “roll our own” because we are not satisfied with the status-quo.  However, not everyone can be or wants to be an “advanced developer” many people need to work in multiple technologies and languages and need to use the built-in features to help get the job done.  There is nothing wrong with that.  The problem is, the HTML 5 Canvas doesn’t have enough built-in (yet)  to help those developers do much of anything.

When I finish the HTML 5 Version of Pixel Shooter, I’ll post it side-by side with the Flash version, then you can see what I’m talking about.

Leave a Reply