Tips&Tricks to Port and Convert Your Games from ActionScript3 to CreateJs and Typescript

CreateJs combined to Typescript it the best option to make html5 games if you have good experience with ActionScript 3 and flash. If you developed flash games before, you might have tried to continue making them in javascript. Javascript is a great language but when the complexity of the code increases, javascript projects become harder and harder to maintain and extend. This is why I prefer typescript to javascript when developing games. In typescript, like in other strongly typed languages, with the right IDE, code completion and IntelliSense is much better compared to js.
CreateJS is recreating the flash class hierarchy in html5. The CreateJS class hierarchy is similar to the one existing in flash, like in flash you can export resources in html5 for createjs and you can use them in html5. Some things are changed but they are done with performance improvements in mind.

Always use this

One of the first differences when using typescript is that this is mandatory when used local members or methods.

How to Handle Added to Stage Event in CreateJS

When we are talking about the functionality, createJs does it very well but a few things are missing and some others are implemented differently. One of the most common things which were used in actionscript3 was to initialize objects after a sprite or movie clip was added on stage. It was done using the addEventListener for the Event.ADDED_TO_STAGE. addEventListener is implemented in createJS, but there is no event that is triggered when an object is added on stage.

Luckily, we can use the added event and filter for the cases when the target is the stage:

Another option is to use ‘.on’ instead of addEvent listener. For this specific scenario it’s not that important but If you scroll down a few points you’ll see why is better to always use ‘on’ instead if addEventListener:

 

LineStyle is missing

LineStyle property no longer exists in CreateJS Graphics class. But you don’t have to despair, they are replaced with setStrokeStyle and beginFill methods; if you get an error that lineStyle is missing when using the following line:


You can use setStrokeStyle and beginFill instead:

mouseX and mouseY

In ActionScript, you could obtain the mouseX and mouseY directly from a DisplayObject (relative to object coordinates). In CreateJS we have to use the stage to get the mouse position and then to convert to the relative coordinates:

addEventListener improved version: ‘.on(event)’ method

addEventListener is the method which allowed us to add handlers/listeners which are executed when the events are triggered. However, addEventListener is also a javascript method and when we are executing it the scope in which the listener method is run is not the one we might look for(it’s its own scope). This is why is better to use the method ‘.on‘ instead. For example, in the following snippet, we are adding an event listener to handle the mouse down events on the stage. We want to catch all the evens on the stage, not only on the current object( for example the current object is the player and the user directs it with the mouse/touch).

If we use addEventListener, in the inner function this will represent another scope than our class ‘Player'(probably the ‘window’ object or maybe the stage object). But we need to handle this as our main class.

When we click the mouse we will see:

dispatchEvent

When dispatching new events make sure you use this.dispatchEvent. There is a dispatchEvent method in javascript so the ts compiler will trigger an error because the cancelBubble property is missing in createjs.Event. The javascript Event has a cancelBubble property.

If you are trying to do this:

You will get the following errors:

Instead, you should call dispatch method on the specific object:

useHandCursor

The displayObject in flash have the useHandCursor property which allows changing the cursor to a hand cursor. In createjs the option uses the browser options and it’s a bit hidden. We have the property cursor in DisplayObject class, but we need to globally enable the MouseOver on the stage. Let’s say we have the following code:


We need to invoke once enableMouseOver on the stage and then we can set the cursor on each object. There is no corresponding function for as3 buttonMode and actually, that function was quite useless in flash.

In createjs we can use many other cursors:

  • ‘arrow’ – the normal arrow
  • ‘pointer’ – hand
  • ‘no-drop’ – with the forbidden symbol

How to make a GlowFilter in createjs? Simple, use Shadow

In flash, you could add filters to displayed objects. There are also a few filters in createjs, but blur is missing.

Luckily, you can port the above piece of code using a shadow of  the required glow color:

Compared to the original glow filter, the glow implemented using color shadow is does not have a parameter to set the intensity, but hopefully, it’s enough. You should keep in mind that shadow, like the blur filter, is resource intensive. If not cached it will be painted at every stage.update call so it’s a good practice to cache the object after applying it:

 

Leave a Reply

Your email address will not be published. Required fields are marked *