Question

Situation

I'm using easeljs within a jquery plugin and have set it up without issue. Here is a snippet of the code I use:

/**
*
* FUNCTION - SETUP_CANVAS
*
**/
setupcanvas: function() {
    /* Prepare the canvas for Easel interaction */
    params.objHTMLEaselObject = new createjs.Stage("LoL-canvas");

    /* Enable mouse/touch events */
    params.objHTMLEaselObject.mouseEventsEnabled = true;

    params.text = new createjs.Text("Test", "20px Arial", "#ff7700");
    params.text.x = 100;
    params.text.textBaseLine = "alphabetic";

    params.objHTMLEaselObject.addChild(params.text);

    /* Set ticker for the stage */
    createjs.Ticker.setFPS(params.intDesiredFPS);
    createjs.Ticker.addListener("tick", methods.tick());
    console.log('canvas is set up');

},
/**
*
* FUNCTION - TICK
*
**/
tick : function(event) {
    params.intTicks++;
    params.text.set({text: params.intTicks});
    console.log('tick: '+params.intTicks);
    params.objHTMLEaselObject.update();
}

### Properties set elsewhere ###
params.intDesiredFPS = 30;
params.intTicks = 0;

As you can see, I am setting most properties to the javascript object; all this functionality works fine and without issue. The ticker is by default set to zero. This does get changed and the canvas reflects the change by rendering "1"

Problem

The only way I can get the ticker to call is as shown, normally I would make the call without the brackets but for some reason, easel doesn't like that. Going beyond just that:

1) The event is undefined when I perform a console.log

2) The ticker only actually ticks once.

Please can you help me to understand what I am doing wrong here, I'm quite stumped and the documentation and internet has turned up very little information when used in this situation.

Was it helpful?

Solution

try

createjs.Ticker.addListener("tick", new function(e) { methods.tick(e); });
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top