EaselJS - Having two canvases with different FPS

Question

I am experimenting with EaselJS and 2 animation instances using sprite sheets and 2 separate canvases at different positions with the same z-index, they aren't layered. What I have now are two EaselJS functions each with a different stage and sprite sheet, instance1 being fired with jQuery after DOM load and instance2 with mouseenter/mouseleave events also with jQuery.

EaselJS:

function instance1() {
    var stage = new Stage(document.getElementById(canvas1));
    var ss = new SpriteSheet({
        "images": ["sprite1.jpg"], 
        "frames": {"regY": 0, "height": 100, "regX": 0, "width": 200, "count": 17}, 
        "animations": {"instance1": [0, 16]}
    });

        var initInstance1 = new BitmapAnimation(ss);
    initInstance1.x = 0;
    initInstance1.y = 0;
    initInstance1.gotoAndPlay("instance1");

    stage.addChild(initInstance1);
    Ticker.setFPS(10);
    Ticker.addListener(stage);
}
function instance2() {
    var stage = new Stage(document.getElementById(canvas2));
    var ss = new SpriteSheet({
        "images": ["sprite2.jpg"], 
        "frames": {"regY": 0, "height": 100, "regX": 0, "width": 200, "count": 17}, 
        "animations": {"instance2": [0, 16]}
    });

        var initInstance2 = new BitmapAnimation(ss);
    initInstance2.x = 0;
    initInstance2.y = 0;
    initInstance2.gotoAndPlay("instance2");

    stage.addChild(initInstance2);
    Ticker.setFPS(24);
    Ticker.addListener(stage);
}

While testing, I found that instead of running at the FPS defined by each function, instance1 will run at 10FPS, then if instance2 is called by mouseenter(); with jQuery, instance1's FPS will automatically change instance2's FPS. Is there a method of applying a different Ticker to each instance as to retain separate FPS? Thanks in advance.

Answer 1

The documentation states that Ticker provides a "centralized tick or heartbeat broadcast at a set interval". It also states that it implements a static API and should not be instantiated. It would seem, therefore, that the library does not support the creation of multiple tickers running at different intervals.

24 fps is a far better frame rate for smooth animation than 10. Is it possible to set that as the global and use another value, such as duration for example, to slow the animation on your first instance? Another option might be to set the frame rate to the higher value and implement some code, such as the jquery throttle plugin, to limit the number of calls to the function which animates instance1.

Answer 2

Do not add your Stage objects as listeners to the ticker, try creating your own tick function and using it instead. This way you can update your stages as often as you want.

window.tick = function (delta) {
 ...
};

Ticker.setFPS(20);
Ticker.addListener(window);

EDIT: alternatively you can leave your code intact and override the tick method on your "slower" stage and update only when you need.

Answer 3

To give a working example:

let fps1 = 30,
    fps2 = 15,
    delay1Start = Math.round(60/fps1),
    delay1 = delay1Start,
    delay2Start = Math.round(60/fps2),
    delay2 = delay2Start;

createjs.Ticker.framerate = 60;
createjs.Ticker.timingMode = createjs.Ticker.RAF;

createjs.Ticker.addEventListener('tick', () => {
    if( delay1 === 0 ) { stage1.update(); delay1 = delay1Start; }
    delay1--;
});
createjs.Ticker.addEventListener('tick', () => {
    if( delay2 === 0 ) { stage2.update(); delay2 = delay2Start; }
    delay2--;
});