Jump to content

Automatic renderer resizing with Ticker


Recommended Posts

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

Thoughts? Is this a good idea? Bad idea?

Link to comment
Share on other sites

Good old setInterval with that check works fine :)

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


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 by ivan.popelyshev
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...