2.0 forceOrientation wrong image scaling

[mariogarranz]

I have a game with 320x480 dimensions.

The game is meant to be played only in portrait mode, and therefore I set a 480x320 image with:

game.stage.scale.forceOrientation(false,true,'landscapeImage');

When playing on a mobile device, game is scaled with EXACT_FIT mode.

 

The behaviour I would expect from this configuration is to have the landscape image scaled to full screen the same way the rest of the game is, just like this:

 

 

However, when I turn my phone over, the image is displayed horizontally stretched, and vertycally reduced. This is the screenshot:

 

 

Any ideas on why this is happening?

[Chupup Games]

use the enterIncorrectOrientation method to scale your game when changing the orientation

 

game.scale.forceOrientation(true, false, 'wrongOrientation')

game.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this);

game.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this);

[mariogarranz]

 

use the enterIncorrectOrientation method to scale your game when changing the orientation

 

game.scale.forceOrientation(true, false, 'wrongOrientation')

game.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this);

game.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this);

 

 

First of all, thanks for your help.

 

I made this function to rescale:

 

rescale: function(){this.game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT;this.game.scale.setExactFit();this.game.scale.refresh();}

Then added it to the Signals you mentioned:

 

this.game.scale.enterIncorrectOrientation.add(this.rescale, this);this.game.scale.leaveIncorrectOrientation.add(this.rescale, this);

The function is being called when I turn the phone, (I added some console.log to see the new dimensions, and they are being logged OK), but the image is still looking stretched and partially out of the screen.

I think this used to work well without rescaling in 1.1.x, but I'm not 100% sure.

[mariogarranz]

Well, after taking a look at StageScaleMode source code and making some tests, I solved it by adding this on rescale function:

 

if(this.game.scale.incorrectOrientation){var landscapeSprite = this.game.scale.orientationSprite;landscapeSprite.scale.x = this.game.width/(landscapeSprite.width/landscapeSprite.scale.x);landscapeSprite.scale.y = this.game.height/(landscapeSprite.height/landscapeSprite.scale.y);}

Maybe it can help someone else.

 

Yet I think it's just a workaround, shouldn't it just work "out of the box"?

[richpixel]

I ran into this problem also, and what I found that I needed to do is delay for a bit before scaling the orientationSprite. The Phaser code delays slightly before rescaling the stage, so I wanted to wait until that was finished:

  create: function() {    // Maintain aspect ratio & center    this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;    this.scale.pageAlignHorizontally = true;    this.scale.pageAlignVertically = false;    this.scale.setScreenSize(true);    if (!this.game.device.desktop) {      this.scale.forceOrientation(false, true, 'orientation');      this.scale.enterIncorrectOrientation.add(this.rescale, this);    }  },rescale: function() {    // the game doesn't resize reight away, so we need to delay here     var _this = this;    setTimeout(function() {      _this.scale.orientationSprite.scale.set(_this.game.width / _this.scale.width, _this.game.height / _this.scale.height);        }, 100);              }

So far this looks good on all devices we tested.

 

-rich

[jflowers45]

same issue here.  used richpixels workaround with no problem

[bubbut]

I have the same issue but when tried the workaround above it doesn't scale my image at all. Instead it shows up original size so I get a small image in the middle. I'm using v2.0.5, anybody else has this issue?

[Arcanorum]

Where/how would rich's solution be added? What should this be referring to? Sorry I'm JS noob.