sombriks

Canvas resize, how to always make entire game visible

Recommended Posts

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. 

Share this post


Link to post
Share on other sites

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();

Share this post


Link to post
Share on other sites

 

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.