Well, I made an entrance for Ludum Dare using Flash CC HTML5 Canvas document. Which is the new offer from Adobe for HTML5 canvas gaming development (sort of).

I already used Flash to create CreateJS assets for other projects. 2 or 3 weeks ago Flash CC got the HTML5 Canvas document upgrade and I tested it with a game I was already making for a client. But 90% of it was coded in WebStorm since I was very advanced and didn’t have time to refact.

Ludum Dare is a game jam, you have 48 hours to make a game all alone by yourself, no teams are allowed. I spent around 12 hours to pull this game (2 of those were dedicated to debug some annoying glitches).

So, for Ludum Dare I wanted to use only Flash CC, even for coding. The nice part of the last update is that you can put code on frames. That means you can have an animation and then in the last frame put some nice code to follow up.

Or you just can simply put the behavior of each element within, so you don’t have a big wall of code.

Another plus is that the Workflow is SO FUCKING FAST! Since you only have to use Flash IDE and press command+Enter like in the old good days.

So, let’s take a look at the game. Click the image to launch the game.

This is an infinite platform runner kind of. It can be controlled with the mouse pointer, arrow keys or touch on mobile.

It won’t have sound on Firefox because Firefox is pulling a YOLO with OGG because fuck-you-developers! It could be solved easily but I wanted to let this game as closest as Flash exports it.

Here is the source code: https://github.com/alesys/Se-or-Cuadrito-2-Flash-HTML5-Canvas-/tree/master

Understanding Flash HTML5 Canvas document

Don’t be fooled, this is not a cross compiler between AS3 or AS2 to JS. This is Flash IDE, exporting assets to CreateJS and letting you write Javascript code on the frames.

Canvas isn’t very powerful, so you can’t go nuts doing things that you can do with regular flash documents. By example: TextFields are a joke on Canvas, Vector sprites are very very expensive for the CPU, many effects are not available or are very basic like shadows, and stuff like that. Most objects may look blurry and not nicely sharp like in a SWF (this may be my fault, maybe not). And so on.

So, since this is CreateJS you may want to have EaselJS reference open at all times.

Some basic stuff you may want to know

Since you can’t set an object (like a MovieClip or Button) to be exported for AS because we are working on JS and those options are shaded.

You can just go to the Library and look for the Linkage column and set your class name there.

Classes are stored in the object ‘lib’ so you only have to write new lib.YourClass(); to create an instance.

There is no enterframe event, but it’s equivalent is named tick. So you have 2 ways to listen for it:

a) anInstance.addEventListener(‘tick’, yourhandler);

b) anInstance.on(‘tick’, yourhandler);

The second one is very handy, since it will keep a nice scope. So ‘this’ keyword may refer to the instance. Their counterparts are .removeEventListener and .off.

Probably the most important thing to know is that since this modality of Flash is brand new, it may have some (a lot) of glitches.

By example, in this game for some reason some objects, like coins, execute their frame-code when I create new instances, but others like platforms wont.  I still don’t know why but it drove me crazy because it was messing with the collision detection.

Another thing I found inconsistent was the .removeEventListener() or .off() methods. They may work, or  may not while working on nested/nested/nested clips.

I found this very annoying because it got me writing conditionals inside handlers to verify if  said handler should execute or return out. At the end I replaced .removeEventListener for ._listeners.tick = []; that would clear every listener for ‘tick’ event. That’s dirty, I know, but I hope this get fixed in the future.

Quick conclusion

I’ve tested the game on an iPad 2, a Nexus 7 gen1, Chrome, Safari and Firefox and it works pretty decent. On Firefox doesn’t have sound, it doesn’t work on a Blackberry Z10, I have no idea why (it’s sunday and I refuse to debug today) and I will test it in other devices as soon as I can.

If you already follow me on twitter (@alesys.net) you may know that I hate HTML5, I hate Javascript and I love to hate them. But I must say that Adobe has done a great job here.  Yes, it’s buggy, but it’s way faster than any other workflow that I’ve tested until now.

The code editor could use some features from Sublime Text, Webstorm or Eclipse, tho. But it’s fast and it brings tooltips for the CreateJS stuff, in that regard is better than Webstorm.

Definitely I’m going to use this in my next Canvas Game.

* I’m going to edit this post if interesting stuff pops in the comments.