Jump to content

Game Resolution and Resize problem


Recommended Posts

I have a problem with the resizig.



When I do the resizing of the page I get this result:





Currently when I open the page I get the result in the figure below instead I would like to have the same results that I have with the resize.




This is the portion  of the interesting code:

var w = window.innerWidth * window.devicePixelRatio,h = window.innerHeight * window.devicePixelRatio;var game = new Phaser.Game(w,h, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render });
  function gameSet(){    game.scale.maxWidth = 1920;    game.scale.maxHeight = 1080;    game.scale.startFullScreen();    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;    game.scale.forceLandscape = true;    game.scale.setScreenSize(true);    game.scale.setShowAll();    game.scale.refresh() }
 function create() {   [...]   gameSet();   [...] }
Link to comment
Share on other sites

I tried the code in the post that you have suggested me, but i have a problem, the game is not correctly resized.




This is my code:
BootState.prototype = {    preload : function(){    ;},    create:  function(){       this.game.canvas.id = 'game';        this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;        this.scale.minWidth = gameWidth/2;        this.scale.minHeight = gameHeight/2;        this.scale.maxWidth = gameWidth;        this.scale.maxHeight = gameHeight;       if (this.game.device.desktop){            this.scale.pageAlignHorizontally = true;            this.scale.pageAlignVertically = true;            this.scale.setScreenSize(true);        }else{            this.scale.maxWidth = 2048; //You can change this to gameWidth*2.5 if needed            this.scale.maxHeight = 1228; //Make sure these values are proportional to the gameWidth and gameHeight            this.scale.pageAlignHorizontally = true;            this.scale.pageAlignVertically = true;            this.scale.forceOrientation(true, false);                        this.scale.hasResized.add(this.gameResized, this);            this.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this);            this.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this);            this.scale.setScreenSize(true);       }       var ow = parseInt(this.game.canvas.style.width,10);  var oh = parseInt(this.game.canvas.style.height,10);  var r = Math.max(window.innerWidth/ow,window.innerHeight/oh);       var nw = ow*r;       var nh = oh*r;       this.game.canvas.style.width = nw+"px";       this.game.canvas.style.height= nh+"px";       this.game.canvas.style.marginLeft = (window.innerWidth/2 - nw/2)+"px";        this.game.canvas.style.marginTop = (window.innerHeight/2 - nh/2)+"px";       document.getElementById('game').style.width = window.innerWidth+"px";       document.getElementById("game").style.height = window.innerHeight-1+"px";//The css for body includes 1px top margin, I believe this is the cause for this -1       document.getElementById("game").style.overflow = "hidden";             game.state.start('GameState');    ;},    update : function(){    ;}}BootState.prototype.gameResized = function(width, height){}BootState.prototype.enterIncorrectOrientation = function(){document.getElementById('game').style.display = 'block';}BootState.prototype.leaveIncorrectOrientation = function(){document.getElementById('game').style.display = 'none';}
Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...