Sign in to follow this  
phantomas

Doubt about making my game responsive on "onResize".

Recommended Posts

Hi everyone!!

 

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

 

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

 

post-14148-0-53806700-1429285067_thumb.j

 

post-14148-0-59238300-1429285281.jpg

 

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:
 
post-14148-0-06355500-1429286597.jpg
 
Is it possible to render again the game with the new size?
 
 
 

Share this post


Link to post
Share on other sites

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)

 

 

 

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.