Porting Deadly Dodge Ball

I have been slowly moving away from Flash towards HTML 5 for a while with 12 Months of Doomsday most likely being my last Flash project. It is certainly possible that Flash CS6 will somehow convince me to keep developing for Flash, but Adobe has pissed me off quite a bit the last few months so CS6 would have to have extremely impressive features (or a really cheap upgrade from CS5.5) in order to keep me as a customer. For this reason I decided to port my Friday the 13th project from Flash to HTML 5. If porting from Flash to HTML 5 wasn't enough, I thought it would also be a good opportunity to play around with EaselJS, which is a Flash-like animation library for JavaScript.

The reason I thought about using a third-party (open source) library instead of cleaning up and building on top of my own is simply due to the fact that going forward I am going to have less time to spend on my site as I am going to be focused on developing some mobile games. By using a third-party library, I don't have to worry about the low level graphics code and can focus my limited time creating games. There are a lot of choices available, but I decided to go with EaselJS because it is similar to Flash and is being used by a couple of other projects so it has some chance to stay around.

EaselJS is not vector based, but instead relies on image strips. Flash has a feature that lets you export an animation as a series of image files so I used this feature to create the fireball. This left me with a large number of files that had to be combined into an image strip. Sure, it is possible to load the images by hand into a paint program and assemble the image strip but there must be a tool that does this. A quick search for such a tool lead me to Texture Packer. While this is a paid tool, it does have a free version that simply restricts you to the more essential features. This provides enough capability to create image strips for games. As I happen to write a development blog, the author of the tool was kind enough to give me a key for the full version. With that disclaimer out of the way, I do suggest that if you need to take a number of individual frames of animation and turn them into an image strip that you take a look at this tool.

With the movie clip converted into an image strip it was fairly easy to move the code over to JavaScript.  The big difference was that the stage does not automatically update itself but requires you call an update function. This is not that huge of a deal as there is a built-in timer class that lets you call a tick function which can be used to call the stage update function. Of course, you also have to remember to change getTimer() into Ticker.getTime() and a few other minor differences, but overall the library feels enough like Flash that it was not too difficult to transition to. It is certainly a library that I will be playing around with in the future.

For those of you interested in either of these tools, EaselJS is located at EaselJS.com and Texture Packer is located at www.texturepacker.com.