help with scale manager

[kiwi]

Hi all,

 

I'm asking for you help because I worked on this thing for weeks but I can't make it working properly. I read all the Scaling manager threads in this forum and various other site but I can't really figure out what's wrong with this.

 

http://www.alessandropiana.com/test/

 

As you can see with the link above I'm setting up a game size of 1920x1080 and all my resources are this res. So far I worked with the EXACT_FIT rule and even if it stretches the games, I'm fine with it. But today I tried the game on the iPad and obviously, due to the incredible resolution, the canvas doesn't fit the entire screen. I then decided to fix this "original sin" and tried the RESIZE method which is suggested as to be the perfect choice for a responsive game. Unfortunately as you can see from the link it doesn't resize the image. I was thinking that it would fit the canvas and trim some of the extra canvas but it doesn't.

I tried all the possibilities, I also tried to use 100% as my game size but with no luck.

 

How can I have the game fitting the entire screen, in any resolution but keeping the original aspect ratio?

 

thanks again for your help

[Zendrael]

Hi kiwi!

 

You can do this when creating your Phaser game:

 //gets game ratio based on the screen size    gameRatio = window.innerWidth / window.innerHeight;    //create the game where 160 is the original height    GAME = new Phaser.Game(Math.ceil(160 * gameRatio), 160, Phaser.CANVAS);    //redo the calculations    window.onresize = function() {        gameRatio = window.innerWidth / window.innerHeight;        //all based on the default game height        GAME.scale.setGameSize(Math.ceil(160 * gameRatio), 160);    };

And you also need to set the scale as:

GAME.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

That works for me!

[Get_Bentley]

Hey Kiwi, there have been a couple different threads on this issue with getting it to fit different devices. Try this and let me know if it helps.

 

 

 

//scaling options

 

    this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

 

    //have the game centered horizontally

 

    this.scale.pageAlignHorizontally = true;

 

    this.scale.pageAlignVertically = true;

 

    //screen size will be set automatically

 

    this.scale.setScreenSize(true);

[kiwi]

@

Zendrael 

thanks but it doesn't work for me. I get an enormous image

[kiwi]

 

Hey Kiwi, there have been a couple different threads on this issue with getting it to fit different devices. Try this and let me know if it helps.

 

 

 

//scaling options

 

    this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

 

    //have the game centered horizontally

 

    this.scale.pageAlignHorizontally = true;

 

    this.scale.pageAlignVertically = true;

 

    //screen size will be set automatically

 

    this.scale.setScreenSize(true);

 

 

thx but this also doesn't work. I got an error in console saying: this.scale.setScreenSize is not a function

[Zendrael]

@

Zendrael 

thanks but it doesn't work for me. I get an enormous image

 

Did you replaced the 160 on my code by your original height (1080)?

[Get_Bentley]

Would be easier to help if you posted the code in question you are having issues with.

[kiwi]

Did you replaced the 160 on my code by your original height (1080)?

you are right, I missed that but now I have the black bars on the side instead I'd like to fill the screen and have some world cut out.

[kiwi]

Would be easier to help if you posted the code in question you are having issues with.

there is the link in the first post

[Zendrael]

you are right, I missed that but now I have the black bars on the side instead I'd like to fill the screen and have some world cut out.

 

try to use a color on the background, see if it fills all. Maybe you must use a tileSprite to fill all of your background.