Redraw State without Restarting It

[Zendrael]

Hello!

 

As my game gets the entire window proportionally, I draw more or less stuff depending on the width of the window. It's ok but when I start the game on small window then I resize it, part of the game area stay blank 'cause I just drawed in the start size.

So, to get the result I want, by now, when the window resizes I redraw all by restarting the state:

    window.onresize = function() {        gameRatio = window.innerWidth / window.innerHeight;        //my default size is 240x160        GAME.scale.setGameSize(Math.ceil(160 * gameRatio), 160);        GAME.state.start(GAME.state.current);    };

The problem is: if the player resizes the window during a gameplay, the state is restarted and he looses what he/she was doing...

 

Is there any other way to redraw all objects when window resizes?

 

Thanks

 

[ekeimaja]

Try this. true cleans world, and false does not clear cache.

GAME.state.start(GAME.state.current, true, false);

[Zendrael]

Hi ekeimaja!

 

That is producing the same effect: the state restarts...

 

I wornder if there is a way to just force redraw for some elements without specifiyng each one on resize. Or the only way will be manually?

[Skeptron]

You're handling the problem the wrong way. You shouldn't be trying to refresh your state with the correct size : instead you should set a scale mode to your game. This will automatically handle any window change.

 

Try to put this in the preload() method of your state : 

game.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL; // You can try EXACT_FIT as wellgame.stage.scale.setShowAll();game.stage.scale.refresh();

See this post : http://www.html5gamedevs.com/topic/1380-how-to-scale-entire-game-up/

[Zendrael]

Hi Skeptron! That didn't worked either...

 

I will explain a little more aboute my code and the problem:

 

I wanted to have my game to show more or less of the content depending on the screen size, so, as more wider a screen, more is shown horizontally. I have this effect on raw JS programming but I wanted to redo my games with Phaser. So, what I do when creating the game screen is:

//prepara o tamanho do jogogameRatio = window.innerWidth / window.innerHeight;//cria novo jogoGAME = new Phaser.Game(Math.ceil(160 * gameRatio), 160, Phaser.CANVAS);

That is good and starts the game taking all the window. I'm also setting my scale mode to

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

to get all drawn correctly. Good so far.

 

Then, the problem began when the window is resized because the itens, for exemple the tileSprite ground, does not take the whole width again on that resize (attached image 1 is the default, image2 is resized with the part not redrawn):

 

So, how to say (if any there is a way) to the elements (like the tileSprite) to be redrawn automatically on window resize? (it works, for sure, if I do it manually on window resize event...)

 

Thanks