What is the Best Practice in EaselJS for Ticker

Question

Currently the problem I'm running into is, when I'm running locally (in a ubuntuVM), using WebStorm as a webserver, I run my game and it plays fine and its responsive, but when I uploaded it to my webhosting and play it from there it is laggy and the click events aren't responsive.

I think it is because I'm using Ticker incorrectly (How do you call update for stages?):

canvas = document.getElementById('myCanvas');
canvas = new createjs.Stage(canvas);
createjs.Ticker.addEventListener("tick", canvas);

and all containers, sprites, etc are children of this stage

http://thegamingproject.org/webgames/ludumdare28/ <- lagginess

Answer 1

To address the lag, I would suggest you first look into adjusting your FPS on the Ticker. Check out the documentation here. You may also want to experiment with the enableMouseOver frequency. Be careful with animations, and take advantage of caching before doing alpha fades etc. I have found the easeljs library will lag a bit with a lot of detailed vector content (such as when exported from the Flash IDE). Use Bitmaps when you can to limit the drawing instructions.

As for the Ticker listener, as I see it you have the following 2 options:

1. Add the stage as a listener to the Ticker

This is the easiest to manage, though it gives you the least amount of control over rendering. According to this createjs tutorial, this is only recommended for quick tests.

Example

createjs.Ticker.addEventListener("tick", stage);

Advantages

• The stage.update() is called automatically for each tick
• Low maintenance or logic required

Disadvantages

• Lowest amount of control on when changes are reflected on stage
• May not be the best solution for a "real-time" game

2. Calling stage.update() in custom function(s)

This solution allows manual control for updating the stage. This could be useful if you need to "pause" content from updating (like a game for instance).

Example

createjs.Ticker.addEventListener("tick", tick);

function tick(){
     var isDirty = false;
     //some custom logic

     if(isDirty) {
          stage.update();

     }
}

Advantages

• Complete control over when drawing changes are reflected on the stage.
• May be able to improve performance by not updating every tick

Disadvantages

• Potential to introduce performance issues by adding too much custom logic to each tick
• Requires more overhead to manage