Doubt about making my game responsive on "onResize".

[phantomas]

Hi everyone!!

 

I´ve developed a game based on "Spring Ninja" and I made it responsive:

 

https://spritted.com/es/play/jump-bot

 

 

 

As you can see the game auto-adapts to all screens taking all the available space on the window. It does the same in all platforms.

 

I use the innerWidth and innerHeight to load a different size depending on the screen ratio:

 

var innerWidth = window.innerWidth;

var innerHeight = window.innerHeight;

var gameRatio = innerWidth/innerHeight;

if(innerWidth > innerHeight){ 

game = new Phaser.Game(Math.ceil(320*gameRatio), 320, Phaser.AUTO);

}

 

But I have a problem for mobile: when I load  the game on "Portrait" and then the user changes the orientation I would like to reorder the Canvas to autoadapt to the new screen ratio. But I´m can´t do it.

 

I wrote this code:

 

$(window).resize(function() { resizeGame(); } );

function resizeGame() {

 

var innerWidth = window.innerWidth;

var innerHeight = window.innerHeight;

var gameRatio = innerWidth/innerHeight;

 

game.width = Math.ceil(320*gameRatio);
game.height = 320;
game.stage.bounds.width = Math.ceil(320*gameRatio);
game.stage.bounds.height = 320;

game.scale.refresh();

 

}

 

 

This code is supposed to set the new dimensions to the game, but instead of reescaling everything properly every object gets deformed:

 

 

Is it possible to render again the game with the new size?

 

 

 

[Tom Atom]

Yes, it is possible. In my game I was doing something like this:

        this.time.events.add(200, function() {            MyGame.calculateDimensions();            this.scale.setGameSize(MyGame.canvasWidth, MyGame.canvasHeight);        }, this);

 calculateDimensions() was my method to calculations required for game. Call to setGameSize changes then changes size of game. I looked into source and it should work for both WebGL and Canvas.

 

 I put it into time event to create small delay before recalculation and game size change. I found it useful on some devices to avoid some problems (looked like sometime, when resized without delay, the screen size was incorrect, so I am giving the device enough time)

 

 

 

[phantomas]

Thanks for your help! I´ll try the code and post the results soon.