Jump to content

Image is pixelated


Shex
 Share

Recommended Posts

Hi

I'm trying to run my game on a mobile device with the Phaser 3 framework and sprites are rendered as very pixelated images. I'm running the game through the Facebook web player. I'm using a Samsung Galaxy S6 device which the resolution is 1440x2560 with a device pixel ratio of 4. I have setup the same configuration on my PC through the Chrome mobile debug view (1440/2560 with pixel ratio of 4) and the images look way better. I have attached two screenshot of the PC (good) and mobile (bad) devices to show the difference.

The game is rendered as CANVAS and I'm using the window.innerWidth and window.innerHeight to define the sizes.

Does anyone have any insight about what's going on?

 

good.png

bad.png

Link to comment
Share on other sites

var gameConfig= {
            type: Phaser.CANVAS,
            width: this.canvasWidth * window.devicePixelRatio,
            height: this.canvasHeight * window.devicePixelRatio,
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: { y: 0 }
                }
            },
            scene: [ HomeScene, InGameScene, ModeScene, SkinsScene, TricksScene, MiddleScene, TutorialScene ]
        };
        return new Phaser.Game(gameConfig);

That's my boot function and the this.canvasWidth and height are only window.innerWidth and window.innerHeight

When I draw stuff in the canvas that is related to the size of the screen (ex: the current level view) I have to use the plain window.innerWidth/height otherwise the view is way too big and goes out of the screen.

Link to comment
Share on other sites

Sorry I've misread your post. Here's the index.html file. There's also the Facebook code that dynamically loads scripts for the loader progression status (and the Sentry.io script for debugging inside the Facebook Player) :

 

<!DOCTYPE html>
<html>
<head>
	<script src="https://connect.facebook.net/en_US/fbinstant.6.0.js"></script>
</head>
<body style="margin:0px;overflow: hidden;">
	<div id="uiContainer"></div>
	<script> 
        var totalFiles = 37;
        var loadedFileCount = 0;
        function loadScript(url, callback){
            var script = document.createElement("script")
            script.type = "text/javascript";

            if (script.readyState){
                script.onreadystatechange = function(){
                    if (script.readyState == "loaded" ||
                            script.readyState == "complete"){
                        script.onreadystatechange = null;
                        callback();
                    }
                };
            } else {
                script.onload = function(){
                    callback();
                };
            }

            script.src = url;
            document.getElementsByTagName("head")[0].appendChild(script);
        }
        function UpdateFBLoad()
        {
            FBInstant.setLoadingProgress(loadedFileCount/totalFiles*100);
        }
loadScript('raven.min.js', function(params) {
    Raven.config('https://[email protected]/1008732').install();
        FBInstant.initializeAsync()
            .then(function() {
                loadScript('dist/phaser-arcade-physics.min.js', function(params) {
                    loadedFileCount++;
                    UpdateFBLoad();
                    loadScript('dist/scripts.min.js', function(params) {
                        loadedFileCount++;
                        UpdateFBLoad();
                        Raven.context(function () {
                            GameManager.Boot();
                        });
                    });
                });
        });
  });        
    </script>
</body>
</html>

 

Link to comment
Share on other sites

I've managed to fix the issue. The problem is I was misunderstanding the way a high DPI screen work on a mobile device. For people like me who have this problem, here's the solution:

In short terms, a high dpi screen (like the Galaxy S6 I was testing) means that there will be more pixels crammed into 1 inch of the screen than another normal screen. This means that if the canvas is set to be the same size as the window.innerWidth/Height then it will be smaller than is should be because it won't be taking the dpi of the screen into account. Canvas can have two width and two height. One is from the attribute (width="9999px") and the other is from the CSS.

On my side what I had to do is to set the Canvas width and height attributes to the size of the screen multiplied by the devicePixelRatio. Then I had to set the CSS width and height to the size of the screen. This would set the canvas as a giant canvas and scale it down to the size of the window. The last thing I had to do is to take that scaling difference and scale every sprite in my canvas by this number (in the case of my Galaxy S6 it was 4). Now everythings looks very good on the device.

Here are some links with very good intel on this situation that explains a bit better what I'm trying to say:

https://www.html5rocks.com/en/tutorials/canvas/hidpi/

https://stackoverflow.com/questions/14488849/higher-dpi-graphics-with-html5-canvas

Link to comment
Share on other sites

  • 7 months later...
On 4/3/2018 at 2:30 PM, Shex said:

I've managed to fix the issue. The problem is I was misunderstanding the way a high DPI screen work on a mobile device. For people like me who have this problem, here's the solution:

In short terms, a high dpi screen (like the Galaxy S6 I was testing) means that there will be more pixels crammed into 1 inch of the screen than another normal screen. This means that if the canvas is set to be the same size as the window.innerWidth/Height then it will be smaller than is should be because it won't be taking the dpi of the screen into account. Canvas can have two width and two height. One is from the attribute (width="9999px") and the other is from the CSS.

On my side what I had to do is to set the Canvas width and height attributes to the size of the screen multiplied by the devicePixelRatio. Then I had to set the CSS width and height to the size of the screen. This would set the canvas as a giant canvas and scale it down to the size of the window. The last thing I had to do is to take that scaling difference and scale every sprite in my canvas by this number (in the case of my Galaxy S6 it was 4). Now everythings looks very good on the device.

Here are some links with very good intel on this situation that explains a bit better what I'm trying to say:

https://www.html5rocks.com/en/tutorials/canvas/hidpi/

https://stackoverflow.com/questions/14488849/higher-dpi-graphics-with-html5-canvas

My 3rd day I'm trying to find the solution. :(

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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