Automatic renderer resizing with Ticker

[chrislondon]

I was looking into various ways to automatically resize a PixiJS application.  My web searching has only found using `window.onresize`.  I was thinking of using a "UTILITY" ticker like this:

const renderer = PIXI.Renderer();

let lastWidth = null;
let lastHeight = null;

const resizeTicker = new PIXI.Ticker();
resizeTicker.add(() => {
  if (
    renderer.view.parentNode &&
    lastWidth !== renderer.view.parentNode.offsetWidth &&
    lastHeight !== renderer.view.parentNode.offsetHeight
  ) {
    lastWidth = renderer.view.parentNode.offsetWidth;
    lastHeight = renderer.view.parentNode.offsetHeight;
    renderer.resize(lastWidth, lastHeight);
  }
}, PIXI.UPDATE_PRIORITY.UTILITY);
resizeTicker.start();

Thoughts? Is this a good idea? Bad idea?

[ivan.popelyshev]

Good old setInterval with that check works fine

We also have in pixi, just pass "resizeTo: element" in application options.

https://github.com/pixijs/pixi.js/blob/dev/packages/app/src/ResizePlugin.ts

Yes, as I dont recommend to use Application , https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop , i fully approve of your method. Make your own application, make your own resize logic.

just an adjustment: usually i set 100 or 500ms for that, not RAF. because when user is actively resizing window, that thing hangs up a bit.

Edited October 26, 2020 by ivan.popelyshev