Jump to content

Mobile orientation stretch problem


Recommended Posts

Hey guys,

I reference below thread to scale my game to fit window. it works on desktop.

But i run on mobile and  open in wrong orientation, the game will be stretched.

I have set scale mode  showall, the game screen should  keep aspect ,right?

I don't have idea why the game will be stretch even i set in noscale.

I know the post http://www.emanueleferonato.com/2015/04/23/how-to-lock-orientation-in-your-html5-responsive-game-using-phaser/

you can hint user to rotate the mobile phone.

If i don't want to hint user to rotate mobile  and just want to scale game to fit window and no stretch.

Is there any good idea to solve this question? Thank you so much!

Link to comment
Share on other sites

I'm not a Phaser expert so  I'm not sure if this would work but you could try writing a function which constantly detects if the player has rotated his phone and if so, scale the canvas accordingly. Have the program collecting game.width and game.height at the beginning of your run and play with those variables.

/*Create theses two vars in the beginning of your run*/
var initialGameWidth = game.width;
var initialGameHeight = game.height;

function detectRotation(){
	if(if game.width != initialGameWidth && game.height != initialGameHeight){ /* this means the player will have turned his phone */
          game.width = window.availWidth;
          game.height = window.availHeight;
          /*if the above doesn't work, try to invert those so height becomes width and vice-versa*/


Link to comment
Share on other sites

  • 4 weeks later...

Hi DevJ ,

Thank you for your answer, unfortunately it didn't work.

All the way I try to set the scale dimension seem don't work.

Even I try to set the scale dimension in update, but the app will set it back.

I  find a simple way to solve it. Just don't set forceOrientation.

Now I change orientation, the screen will not be stretched.

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.

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.


  • Recently Browsing   0 members

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