Renderer.resize doesn`t affect canvas children

[batman]

Guys,  hello,

Hope you are well. Could you advise why this:

    renderer.view.style.width = newWidth + "px";
    renderer.view.style.height = newHeight + "px";

dynamically resize everyhting inside the app.renderer.view (our canvas), but this one, doesn`t:

renderer.resize(newWidth, newHeight);

I see how canvas expands/contacts but can`t get why background picture in first case follow the canvas but in second case stay the same. 

Thank you in advance, 

[ivan.popelyshev]

You need both.

If you pass "autoResize: true" in renderer parameters, it will change the style automatically: https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/SystemRenderer.js#L225

Its related to how DOM and CSS works: canvas backbuffer width/height is different from CSS parameters. Its a long talk, there were too many threads about it already. There are no articles on it, because everyone is lazy.

[batman]

Ivan, thanks.

But setting only "autoResize: true", unfortunately do nothing (if I understand you right). Does it works standalone? Or I have to set it to true then I can use renderer.resize() (it actually works fine without autoResize: true). So quite unclear.

BTW: found some usefull articles, could help somebody:

1. https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
2. http://www.williammalone.com/articles/html5-game-scaling/

 

[ivan.popelyshev]

Sorry, I dont understand what do you want. There are too many ways to implement scaling for application, I cant figure out which one do you want to use.

Can you make an example?

[batman]

Ivan, please check below:

I try to create  universal scaling/positioning function. So my game displays properly on browsers and mobiles. Decomposition is the following:

• Create canvas so it fit all screens (done). Canvas will have general  UI is kept on all stages (like health, score etc). Simply done like this:

function fitGameToScreen(canvas) {
    let newWidth = window.innerWidth;
    let newHeight = window.innerHeight;

    if (isMobile()) {
        newWidth = screen.availWidth;
        newHeight = screen.availHeight;
    }    
    document.body.style.overflow = "hidden" // to remove scroll in some cases
    document.body.style.width = newWidth + "px";
    document.body.style.height = newHeight + "px";

    GAME.app.renderer.resize(newWidth, newHeight);
    window.scrollTo(0, 0);
}

• Second step is to create stage. It holds all game interaction (but not UI elemetns, which are sticked to canvas separately). This one is to be scaled, done like this:

function scaleObject(myElement) { // background for the stage
    //calculate aspect ratio
    let ratio = GAME.size.width / GAME.size.height;
    let newWidth = window.innerWidth;
    let newHeight = window.innerHeight; 
    let newScale;

    if (isMobile()) {
        newWidth = screen.availWidth;
        newHeight = screen.availHeight;
    }
    if (newWidth > newHeight) {// check for orientation
        newScale = newWidth / GAME.size.width;
    } else {
        // newScale = newHeight / GAME.size.height;
        newScale = newWidth / GAME.size.width;
    }
    myElement.scale.set(newScale);
}

And position it in the middle of the screen (anchor is set to 0.5), like this:

function reposition(myElement) {
    var newWidth = window.innerWidth;
    var newHeight = window.innerHeight;
    if (isMobile()) {
        newWidth = screen.availWidth;
        newHeight = screen.availHeight;
        console.log("mobile");
    }
    // checks if passed element is a sprite and has x,y properties
    if ((myElement instanceof PIXI.Sprite) && "x" in myElement && "y" in myElement) {
        myElement.x = newWidth / 2;
        myElement.y = newHeight / 2;
    } else {
        console.log("passed Element is not PIXI.Spite instance");
    }
}

So in common it works fine. While simulating mobile devices in chrome, also works fine except for (and it does have the same look on mobiles devices) when i do "Responsive" transformation, there are some poisitions where part of the  "stage" is below the screen, and scroll appears. But when I trigger couple times rotate (see pictures) it dispays properly (in the middle of the screen and scaled). I checked http://www.williammalone.com/articles/html5-game-scaling/ , but didn`t work as I expected. 

• next step would be affine transformation of elements on the stage when orientation is changed.

[ivan.popelyshev]

When you will add "resolution" parameter (devicePixelRatio), it'll be even worse than that. Sorry , I cant help you, I dont own mobile devices. Wait for someone else.

[Exca]

One thing that might help in real life is to add small delay after resize event. At least on some ios devices it might take up to 200ms for the window to give correct sizes (depends a bit on how your viewport metatag is set). Though on debugger that should not affect anything.

[batman]

Guys, thanks for suggestions. It seems that it is kind of side effect on calling these three functions on the same event. The order is: 

 window.addEventListener('resize', function resizeEvent() {
    fitGameToScreen(GAME.app.view);
    scaleObject(bg);
    reposition(bg);
  });

will double chek