Resizing Issue with setGameSize

[Abhishek Singhal]

Hi All,

I am working on my first game in phaser and running into a lot of issues currently two of them are bugging me the most.

1) Game resizing : The project demands for the game to go full screen on devices and resize on desktops, I am setting the scaleMode to EXACT_FIT and resizing as follows 

       this.game.scale.setGameSize(window.innerWidth, window.innerHeight);

       var groupScaleX = (window.innerWidth) / (this.gameContainer.origWidth);

       var groupScaleY = (window.innerHeight) / (this.gameContainer.origHeight);

       this.scaleFactor = groupScaleX < groupScaleY ? groupScaleX : groupScaleY;
       this.gameContainer.scale.setTo(this.scaleFactor);

this.gameContainer.origWidth/origHeight is set to the background image dimensions 1920X1280.

Above piece of code works fine on chrome but on FF and safari, the game actually flicker when we try to resize the browser.

Also found this issue in another game that was quoted somewhere as a reference : http://www.goodboydigital.com/runpixierun/. Try to resize the browser with game running the screen flickers even for chrome browser.

 

2)  Also the game on some devices is rendering very poorly and looks like every thing is being Pixelated on the screen which includes all the graphics and text content. As suggested by someone on the forum to pixel align the content as a resolution I have tried that as well, it seems as if the trick works well on chrome but the same issue still persists on other browsers. 

recalling resize function once again after say ~50ms delay seems to be working currently for me. But I assume that is no good coding practice and there has to be some better workaround for this. 

[Xesenix]

Ad1) I think you search problems where there is none when exactly do you expect your players to resize game while playing?

[Abhishek Singhal]

We are assuming that the player might try to resize the browser window on his desktop at any point of time.

[samme]

I think you might actually want RESIZE or NO_SCALE. Unlike EXACT_FIT, those don't resize the game canvas.

[Abhishek Singhal]

14 hours ago, samme said:

I think you might actually want RESIZE or NO_SCALE. Unlike EXACT_FIT, those don't resize the game canvas.

Already tried both the scale mode RESIZE and NO_SCALE, hit no luck with that also.
Even with NO_SCALE and RESIZE mode function call to setGameSize actually resizes the canvas and the game object.

The only thing that seems to work is : initializing the game with huge canvas 2200X1280, bigger then my game size and removing the call to setGameSize and fit the game to window dimensions by resizing game elements individually.
Using this approach, I am able to remove the flickering issue, but m not sure if this is a good practice to keep such a huge game size because the world center in this case might land somewhere outside the available browser window. Currently I am placing the loader graphics at the center of the world. with a huge canvas it lands towards the bottom of the screen.

[samme]

On 5/8/2017 at 0:44 AM, Abhishek Singhal said:

The project demands for the game to go full screen on devices and resize on desktops

Can you explain what this means precisely?

[Abhishek Singhal]

17 hours ago, samme said:

Can you explain what this means precisely?

The game will always be fullscreen on mobile devices, but user can resize it on desktop. 
So, the game will resize accordingly if the browser window is resized on desktop.