[SOLVED] How to scale the Pixi.js view without making the game blurry?

[DennisMMann]

Hello,

How to scale the Pixi.js view without making the game blurry?

I have tried resizing the view with CSS using:

app.view.style.width = nvw + "px";
app.view.style.height = nvh + "px";

-- where nvw is the new with of the viewport and nvh is the height of the viewport.

However, this makes the game blurry.

I have tried:

1. Using app.renderer#resize to set the new width and height for the game, but that does not scale the game's contents - only makes the screen bigger.
2. Initialized the PIXI.Application with the antialias option set to false.

 

In my specific situation, what I need is a way to scale the game window to fit in the browser, while keeping aspect ratio and letterboxing if necessary, without blurring the game contents.

Any help is appreciated, thank you for your time.

[ivan.popelyshev]

1 should work, you can just add "app.stage.scale.set(yourScale)" and change position if you want to add letterbox. Usually I position canvas itself, and scale the stage.

[DennisMMann]

59 minutes ago, ivan.popelyshev said:

1 should work, you can just add "app.stage.scale.set(yourScale)" and change position if you want to add letterbox. Usually I position canvas itself, and scale the stage.

Thanks a lot! "app.stage.scale.set(number)" fixed it for me. I've had a lot of trouble looking for documentation, guides, examples and tutorials on scaling the game to fit the screen. For such a common use case, I was surprised I couldn't find much about it. The only guide that addressed this the closest was  HTML5 Game Scaling { William Malone }, but it did not address the blurriness issue. I may contribute with a tutorial if needed.

[ivan.popelyshev]

Yeah, you guessed the problem right. Many people ask for an advice, implement the stuff for their game, and dont publish article  That's my submission: https://github.com/ivanpopelyshev/pixi-starfighter , but it does downscale stuff, its not 1:1. When I do 1:1 its for games that can take any zoom with any aspect ratio.

Its surprising unless you realize how many issues exists in such a general lib as pixijs that is managed by only a handful of core team members and a hundred or so contributors. One guy was surprised by appearance of z-Index in pixi-v5 in this subforum not so long ago

The other aspect is that while you are doing those basic things, you understand the library much better. Better to train on shallow water than in the ocean of unknown problems of big apps.

[DennisMMann]

I wrote an article on this. Thoughts welcome!

https://medium.com/@michelfariarj/scale-a-pixi-js-game-to-fit-the-screen-1a32f8730e9c

[ivan.popelyshev]

Need CSS and html with it to make it complete. 

[jonforum]

i use this on my side

But my app are intended to be played in full screen, frame and scale mode are luxe feature.

    requestFullScreen() {
        var element = document.body;
        if (element.requestFullScreen) {
            element.requestFullScreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
        this._fullScreen = true;
    };

    cancelFullScreen() {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
        this._fullScreen = false;
    };
    

    scaleToWindow() {
        const canvas = this.view;
        let scaleX, scaleY, scale, center;
        scaleX = window.innerWidth / canvas.offsetWidth;
        scaleY = window.innerHeight / canvas.offsetHeight;
        scale = Math.min(scaleX, scaleY);
        canvas.style.transformOrigin = "0 0";
        canvas.style.transform = "scale(" + scale + ")";
        if (canvas.offsetWidth > canvas.offsetHeight) {
        if (canvas.offsetWidth * scale < window.innerWidth) { center = "horizontally" }
        else { center = "vertically" };
        } else {
        if (canvas.offsetHeight * scale < window.innerHeight) { center = "vertically" }
        else { center = "horizontally"; };
        };
        let margin;
        if (center === "horizontally") {
            margin = (window.innerWidth - canvas.offsetWidth * scale) / 2;
            canvas.style .marginTop = 0 + "px";canvas.style .marginBottom = 0 + "px";
            canvas.style .marginLeft = margin + "px";canvas.style .marginRight = margin + "px";
        };
        if (center === "vertically") {
            margin = (window.innerHeight - canvas.offsetHeight * scale) / 2;
            canvas.style .marginTop  = margin + "px";canvas.style .marginBottom = margin + "px";
            canvas.style .marginLeft = 0      + "px";canvas.style .marginRight  = 0      + "px";
        };
        canvas.style.paddingLeft = 0 + "px";canvas.style.paddingRight  = 0 + "px";
        canvas.style.paddingTop  = 0 + "px";canvas.style.paddingBottom = 0 + "px";
        canvas.style.display = "-webkit-inline-box";
        return scale;
    }; 

 

[DennisMMann]

I updated the article with HTML and CSS. It should be more complete now. I also added a GitHub repo with a working example.