FBoyle.com

The HTML5 Canvas element is a natural area for a Flash developer to explore so I decided a while back to play around with some of the options out there.

I’ve been using haXe for almost a year now and targeting Canvas using the Javascript target with my simple experiments has been fairly straightforward using Jeash (an API that mirrors most of the Flash API) because the workflow is identical to a Flash workflow.  Of course the Javascript target knows nothing about SWF files so it was clear that I was going to have to wean myself away from some of the really useful features of Flash like accessing linked library objects.  Adapting my workflow was what was required and luckily there are a lot of useful libraries that individuals and companies working with haXe have made available as Open Source projects.

Libraries such as Gm2d from Hugh Sanderson and the PushButton port called Hydrax have been interesting but I found the TouchMyPixel libraries to be particularly helpful.  Specifically, I like how they manage to use the Flash Authoring environment in their workflow even if they are not targeting the Flash Platform.

The TouchMyPixel code looked like a great way to further my knowledge of how to use haXe so I ended up forking their repository on my GitHub account and set about playing with the code and seeing if I could add support for EaselJs.

EaselJs is a library written by Grant Skinner and his team.  It effectively provides a displaylist for drawing on the Canvas element. The API design is clearly influenced by his Flash background since it provides a Flash-like displaylist but without it being identical to the Flash Displaylist. I was very happy when I discovered that Zjnue had already written the EaselJs externs for haXe.

What is nice about this approach is that I am using Flash CS5 to design layouts for Canvas-based applications and I could even make the same game or simulation also target the Flash Player. As an added bonus, the TouchmyPixel codebase has in-built support for Box2d and it didn’t take too much effort to get it working with EaselHx.

Click on this preview image to launch the Canvas demo. When open, click on the play button to start the simulation:

Click here to see a version published as a SWF file.

A screenshot of the demo being created in Flash CS5:

Note: Bare in mind that my TouchmyPixel fork is just experimental – use the original TouchmyPixel codebase if you want to use something that is more tried and tested.  The CPP target is also not working in my forked project – maybe I’ll play around with that next.  Jeash is maybe a more feasible javascript option for haXe if cross-platform development and access to a more complete Flash API is important.