CODEWITHSUNDEEP
canvashtml5-canvaseaseljscreatejs
tsiokos
tsiokos

Reputation: 1090

How to override tick() to lower FPS in multiple Stages

Assuming we have 2 Stages and Ticker.setFPS(30), how can i override the ticker for the second stage to have let's say 15fps?

// Targeting 30fps
Stage['GUI'] = new createjs.Stage(gui_canvas);
createjs.Ticker.useRAF = true;
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener('tick', Stage['GUI']);
// Targeting 15fps
Stage['Background'] = new createjs.Stage(bg_canvas);
/* Overriding ticker goes here */
createjs.Ticker.addEventListener('tick', Stage['Background']);

solved using markE's solution

stage['background'] = new createjs.Stage(bg_canvas);

var delay = 3;
var ticker = function(params){
  if(delay===0){
    delay = -1;
    stage['background'].update();
    delay = 3;
  }
  delay--;
};
createjs.Ticker.addEventListener('tick', ticker);

another solution for getting targeted FPS

stage['background'] = new createjs.Stage(bg_canvas);

var timestamp = new Date().getTime();
var ticker = function(){
  var now = new Date().getTime();
  if ((now - timestamp) > (1000/15)){
      stage['background'].update();
      timestamp = new Date().getTime();
  }
};
createjs.Ticker.addEventListener('tick', ticker);

Upvotes: 0

Views: 1657

Answers (1)

markE
markE

Reputation: 105035

Since EaselJS has 1 (only 1) central Ticker that issues "tick" events, you will have to throttle your second tick function.

To do that, you just set a countdown delay and wait to actually do animation until the countdown reaches 0.

// make tickGUI() the tick handler for stage['GUI']
createjs.Ticker.addEventListener('tick', tickGUI);

// make tickBackground() the tick handler for stage['Background']
createjs.Ticker.addEventListener('tick', tickBackground);


// tickGUI animates on every tick
function tickGUI(){
    // do your animating stuff for GUI now
}


// tickBackground has a "2 ticks=1 animation" throttle
var tickBackgroundDelay=1;

function tickBackground(){
    if(tickBackgroundDelay==0){

        // [optionally] turn off this ticker until you process your animation
        tickBackgroundDelay=-1;  

        // do your animating stuff for Background now

        // turn on this ticker with delay=1
        tickBackgroundDelay=1;
    }
    // countdown the delay ticker
    tickBackgroundDelay--;
}

Upvotes: 4

Related Questions