Posted on April 22, 2010
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.
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.
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.