Jump to content

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


DennisMMann
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

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