Shex Posted April 2, 2018 Share Posted April 2, 2018 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? Link to comment Share on other sites More sharing options...
PsichiX Posted April 2, 2018 Share Posted April 2, 2018 show your html file which have canvas that you render to. i think i may know what you're missing. Link to comment Share on other sites More sharing options...
Shex Posted April 2, 2018 Author Share Posted April 2, 2018 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 More sharing options...
PsichiX Posted April 2, 2018 Share Posted April 2, 2018 i've not asked about phaser config, i've asked about your html file that holds canvas you render to. again: please, show me your html file, because probably i know what you're missing. Link to comment Share on other sites More sharing options...
Shex Posted April 3, 2018 Author Share Posted April 3, 2018 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 More sharing options...
Shex Posted April 3, 2018 Author Share Posted April 3, 2018 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 dranitski 1 Link to comment Share on other sites More sharing options...
Html5Overview Posted November 17, 2018 Share Posted November 17, 2018 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 More sharing options...
Recommended Posts