2

I'm developing a canvas game that happens to have several scenes. Each scene might end up being a static final frame after having finished. The circumstances are that the ticker and the listener for the "tick" event are still running and keep on rendering full speed - which is asking for cpu usage.

I have tried to remove the listeners at the end of scene and add them back wenn the user interacts and starts the next scene.

I wonder what would be the "createJS" way of doing this.

I see some other options but am a bit lost how to proceed:

  • Caching the "whole" last frame. Will it make the ticker do "absolutely nothing" performance-wise?
  • Pause the ticker and check for the paused attribute in the handleTick method: Seems to not take the CPU usage completely down.

Can somebody recommend a way?

On a side note: I need my real "this" object inside the tick function that is bound to the ticker. How can I achieve this? Right now I use this code:

 createjs.Ticker.addEventListener("tick", handleTick);
 function handleTick(event) {
     // Actions carried out each tick (aka frame)
     if (!event.paused) {
         // Actions carried out when the Ticker is not paused.
     }
 }

Inside handleTick "this" is not my object that added the listener.

Matthias Max
  • 595
  • 1
  • 7
  • 20

1 Answers1

0

A simple createjs.Ticker.removeEventListener("tick", handleTick); should do just fine as long as handleTick exists in your current scope. See this example.

There are a couple ways to access the scope of the object that assigned the tick listener. For example, you could simply assign this to a local variable like so:

var _this = this;
function handleTick(){
    //"_this" now refers to the scope that defined handleTick.
}

Or you can use a delegate. In this example I'm using jQuery's proxy function to scope handleTick to this.

var handleTick = $.proxy(function(){
    //"this" refers to the scope that defined handleTick.
}, this);
createjs.Ticker.addEventListener("tick", tickHandler);
Andrew
  • 1,030
  • 13
  • 24