Search code examples
javascripteaseljscreatejs

EaselJS tick event delta property not propagating to children


I am just starting out with EaselJS and I am running into my first hurdle. I have extended the Container object to create a new class called Egg:

(function() {

var Egg = function(color, x, y, cY) {
  this.initialize(color, x, y, cY);
}
var e = Egg.prototype = new createjs.Container(); // inherit from Container

e.Container_initialize = e.initialize;
e.initialize = function(color, x, y, cY) {

  this.Container_initialize();

  this.circle = new createjs.Shape();
  this.circle.graphics.beginFill(color).drawCircle(0, 0, 10);
  this.circle.x = x;
  this.circle.y = y;
  this.addChild(this.circle);

  this.changeY = cY;

  this.addEventListener("tick", this.handleTick);

}

e.handleTick = function(event) {
  console.log(event.delta); // undefined!
}

window.Egg = Egg;

}());

And I am initializing like this:

var stage, timeCircle;

function init() {

  stage = new createjs.Stage("gameCanvas");

  timeCircle = new createjs.Shape();

  createjs.Ticker.useRAF = true;
  createjs.Ticker.setFPS(30);
  createjs.Ticker.addEventListener("tick", tick);

  var egg = new Egg("red", 50, 50, 100);
  stage.addChild(egg);

  var egg2 = new Egg("blue", 100, 50, 50);
  stage.addChild(egg2);

}


function tick(event) {
  stage.update(event);
}

In the Egg handleTick function, when I log out the event.delta property, I get "undefined". I thought that if I passed in the event through the stage.update call then it would propagate to the objects on the stage?


Solution

  • The Ticker's tick-event is a little different from a DisplayObject's(or the Stage's) tick-event. See here: http://www.createjs.com/Docs/EaselJS/classes/DisplayObject.html#event_tick

    So in your case this should probably work:

    e.handleTick = function(event) {
        console.log(event.params[0].delta);
        //params is all the parameter that you use in stage.update(p1, p2, ...);
    }