Jump to content

Renderer.resize doesn`t affect canvas children


batman
 Share

Recommended Posts

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, 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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/

 

Link to comment
Share on other sites

  • 2 weeks later...

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.

And on mobile devices.png

AndFinalyOK.png

Responsive adjustmenrt.png

wrongPositioning.png

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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