Question

假设我们有2个阶段和Ticker.setFPS(30)，我怎样才能覆盖第二阶段的自动收报机，让我们说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']);

使用markE解决方案解决

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);

获得目标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);

Answer 1

由于EaselJS有1个（只有1个）发出“tick”事件的中央Ticker，你将不得不限制你的第二个滴答功能。

要做到这一点，你只需设置一个倒计时延迟并等到实际做动画，直到倒计时达到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--;
}

如何覆盖tick（）以降低多个阶段的FPS

1 个答案: