0

假设我们有 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);
4

1 回答 1

4

由于 EaselJS 有 1 个（只有 1 个）中央 Ticker 发出“tick”事件，因此您将不得不限制您的第二个 tick 函数。

为此，您只需设置倒计时延迟并等待实际执行动画，直到倒计时达到 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--;
}
于 2013-03-23T17:54:54.093 回答