Sign in to follow this  
Abhishek Singhal

Resizing Issue with setGameSize

Recommended Posts

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. 


 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.