Canvas resize, how to always make entire game visible

[sombriks]

Hello all,

 

i've seen some solutions for my problems, yet i still looking for some enhanced solution.

 

I need my game to resize and it should not lose the screen proportions.

 

however, i have every sort of screen to deal with, and some of them cuts off the bottom of my game.

 

i am using it for resize:

		game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;		game.scale.setScreenSize(true);

#game {	width: 100%;}

Would be nice to find a way to make sure that there is enough height on screen so scale manager could respect that. 

[Nikow]

Hi !

 

Try with :

this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;this.game.scale.setShowAll();window.addEventListener('resize', function () {  this.game.scale.refresh();});this.game.scale.refresh();

[sombriks]

 

Hi !

 

Try with :

this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;this.game.scale.setShowAll();window.addEventListener('resize', function () {  this.game.scale.refresh();});this.game.scale.refresh();

 

Hello, thanks for the answer

 

I've tried your suggestion, but no luck yet.

(function() {	// setup namespace	window.Engines = window.Engines || {};	var game = new Phaser.Game(1280, 720, Phaser.AUTO, "game");	Engines.game = game;	game.state.add("Boot", Engines.Boot);	game.state.add("Inicio", Engines.Inicio);	game.state.add("SelectMundo", Engines.SelectMundo);	game.state.add("SelectFase", Engines.SelectFase);	game.state.add("EnginePosicional", Engines.EnginePosicional);	game.state.add("EngineEncadeada", Engines.EngineEncadeada);	game.state.add("EngineQuestionario", Engines.EngineQuestionario);	game.state.add("EnginePadraoMovimento", Engines.EnginePadraoMovimento);	game.state.add("EngineMaterialDourado", Engines.EngineMaterialDourado);	game.state.add("Engine2048", Engines.Engine2048);	setTimeout(function() {		game.state.start("Boot", true, true);// scale setup on Boot		Engines.initManagement();		Engines.game.scale.refresh();	}, 1000);	window.addEventListener('resize', function() {		Engines.game.scale.refresh();	});})();

The game still eating the bottom of the screen if the height does not fits well.

 

Maybe if i do some custom code to manipulate the width taking height in account it could work.

[sombriks]

Hello all, 

 

i've solved my problem.

 

Here a resumed snippet of what i ended up using:

function adjust() {	var divgame = document.getElementById("game");	divgame.style.width = window.innerWidth + "px";	divgame.style.height = window.innerHeight + "px";}window.addEventListener('resize', function() {       adjust();   });var game = new Phaser.Game(640, 480, Phaser.AUTO, "game");game.state.add("foo", function(game) {	this.preload = function() {		// game.load.image("07", "img/07.PNG");	};	this.create = function() {		console.debug("Setup pointer and scale");		game.input.maxPointers = 1;		game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;		game.scale.pageAlignHorizontally = true;		game.scale.pageAlignVertically = true;		game.scale.setScreenSize(true);        game.scale.refresh();        adjust();	};});game.state.start("foo"); 

 Hope it helps someone else.

[dpxcc]

function preload() {
  phaser.scale.scaleMode = Phaser.ScaleManager.RESIZE;
  phaser.scale.setResizeCallback(function() {
    phaser.scale.setMaximum();
  });
}

[0101000001101011]

Hi there!
I've a fast and working solution
(ps: i use jQuery)

This is the javascript:

function resizeGame() {
    game.scale.setGameSize($( window ).width(), $( window ).height());
}

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

and you have to set overflow:hidden to your container div
i used  game.scale.setGameSize(width, height) for this reason: http://phaser.io/docs/2.4.8/Phaser.Game.html#height

This is the result using a Pharser example: http://alessandrol.altervista.org/pharsertests/screenresize/

I hope you enjoy

 

[jdnichollsc]

@0101000001101011 You don't need use jQuery, you can use the RESIZE scale mode included in Phaser!

Check the Phaser documentation => http://phaser.io/docs/2.6.2/Phaser.ScaleManager.html#setResizeCallback

Regards, Nicholls

[samme]

For a simple document, this should be enough:

/* Given: html > body > div#game > canvas */
html, body, #game { height: 100%; }
body{margin: 0; padding: 0;}

Then use Phaser.ScaleManager.SHOW_ALL. No need for resize callbacks.

Parent and Display canvas containment guidelines:

• Style the Parent element (of the game canvas) to control the Parent size and thus the Display canvas’s size and layout.

• The Parent element’s CSS styles should effectively apply maximum (and minimum) bounding behavior.

• The Parent element should not apply a padding as this is not accounted for. If a padding is required apply it to the Parent’s parent or apply a margin to the Parent. If you need to add a border, margin or any other CSS around your game container, then use a parent element and apply the CSS to this instead, otherwise you’ll be constantly resizing the shape of the game container.

• The Display canvas layout CSS styles (i.e. margins, size) should not be altered/specified as they may be updated by the ScaleManager.

[jdnichollsc]

But what happen if you need to scale the game like Run Pixie Run? Maybe you need to use RESIZE or USER_SCALE