Pixi.js: Unable to stop the Ticker

Created on 20 May 2019 · 6Comments · Source: pixijs/pixi.js

Hello!

I don't know what's going on with the bundler, but the file packages/ticker/src/Ticker.js which is originally this:

export default class Ticker
{
    constructor()
    {
//(...)
    this._tick = (time) =>
        {
            this._requestId = null;

            if (this.started)
            {
                // Invoke listeners now
                this.update(time);
                // Listener side effects may have modified ticker state.
                if (this.started && this._requestId === null && this._head.next)
                {
                    this._requestId = requestAnimationFrame(this._tick);
                }
            }
        };
    }

becomes this in file node_modules/@pixi/ticker/lib/ticker.js :

var Ticker = function Ticker()
    {
        var this$1 = this;
//(...)
      this._tick = function (time) {
            this$1._requestId = null;

            if (this$1.started)
            {
                // Invoke listeners now
                this$1.update(time);
                // Listener side effects may have modified ticker state.
                if (this$1.started && this$1._requestId === null && this$1._head.next)
                {
                    this$1._requestId = requestAnimationFrame(this$1._tick);
                }
            }
        };
    };

Note that this has been changed to this$1.

The issue

Calling PIXI.Ticker.shared.stop() does not clear this$1.started (but it clears PIXI.Ticker.shared.started successfully)
The tick continues to run, no matter what.

Steps to Reproduce

Create a new Pixi app
Call:

let ticker = PIXI.Ticker.shared;
ticker.autoStart = false;
ticker.stop();

Inside DevTools, put a breakpoint in requestAnimationFrame of the _tick function of Ticker.js

Expected Behavior

Breakpoint should not trigger

Current Behavior

Breakpoint triggers

Environment

pixi.js version: 5.0.3 , 4.8.7 as well (_this instead of this$1)
Browser & Version: Electron 4.2.2

Potential resolutions

From what I understood, this$1 is a copy of this. As objects & functions are referenced like pointers, this$1._head and this$1._tick are fetched correctly inside the tick function. But as this$1.started is a boolean, it was copied from this to this$1 without a link.
It may be resolved by encapsulating all the parameters (numbers & booleans) inside an object, i.e. :

this._head = new TickerListener(null, null, Infinity);
this._parameters = {
  _requestId = null,
  _maxElapsedMS = 100,
  _minElapsedMS = 0,
  autoStart = false,
  deltaTime = 1,
  deltaMS = 1 / settings.TARGET_FPMS,
  elapsedMS = 1 / settings.TARGET_FPMS,
  lastTime = -1,
  speed = 1,
  started = false,
  _protected = false
};

But it's a big change for the API...
Otherwise maybe using bind() to call the _tick function (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)

Source

motla

All 6 comments

If you're creating a new Application, I assume you are doing this:

const app = new PIXI.Application();

Application creates its own ticker internally. So calling PIXI.Ticker.shared.stop() wouldn't do anything. Instead you need to call:

app.ticker.stop();

Alternatively, there's a sharedTicker opt-in, for instance:

const app = new PIXI.Application({  sharedTicker: true });
PIXI.Ticker.shared.stop(); // will stop Application rendering

bigtimebuddy on 20 May 2019

Hmm interesting... didn't know that.

I don't understand though, I tried this code:

const app = new PIXI.Application();
app.ticker.autoStart = false;
app.ticker.stop();
PIXI.Ticker.shared.autoStart = false;
PIXI.Ticker.shared.stop();

But I still have periodic calls from Ticker.js line 162 (DevTools Performance pane):

I'm designing an embedded app which must be very low power, so I try to reduce energy consumption at maximum when the scene is static.

motla on 21 May 2019

I'm designing an embedded app which must be very low power, so I try to reduce energy consumption at maximum when the scene is static.

Then this page is for you: https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop

Put all the things in your own animation handler and put it in your gameloop. That's kinda a requirement if you want a sure guarantee that your code works ;)

EDIT: OMG we have extra ticker in v5! How did that happen?