Jump to content

remove black border in mobile game


skywalker
 Share

Recommended Posts

function create(){	 game.stage.disableVisibilityChange = true;	if (game.device.desktop) {		 	game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;                       game.scale.maxWidth = 1440;            game.scale.maxHeight = 960;            game.scale.pageAlignHorizontally = true;            game.scale.pageAlignVertically = true;            game.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;			game.canvas.style.width = nw+"px";			game.canvas.style.height= nh+"px";			game.canvas.style.marginLeft = (window.innerWidth/2 - nw/2)+"px"; 			game.canvas.style.marginTop = (window.innerHeight/2 - nh/2)+"px";			document.getElementById("gameContainer").style.width = window.innerWidth+"px";			document.getElementById("gameContainer").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("gameContainer").style.overflow = "hidden";			console.log(nw);				}else{		 	game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;                        game.scale.maxWidth = 1440;            game.scale.maxHeight = 960;            game.scale.pageAlignHorizontally = true;            game.scale.pageAlignVertically = true;            game.scale.forceOrientation(true, false);            //game.scale.hasResized.add(this.gameResized, this);            //game.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this);            //game.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this);            game.scale.setScreenSize(true);            game.scale.setShowAll();            game.scale.refresh();           			// below code is not working 			/*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;			game.canvas.style.width = nw+"px";			game.canvas.style.height= nh+"px";			game.canvas.style.marginLeft = (window.innerWidth/2 - nw/2)+"px"; 			game.canvas.style.marginTop = (window.innerHeight/2 - nh/2)+"px";			document.getElementById("gameContainer").style.width = window.innerWidth+"px";			document.getElementById("gameContainer").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("gameContainer").style.overflow = "hidden";			*/	}; 

hi im a beginner phaser js game developer i made a small games that responsive all screen and i have problem with mobile devices there is black border around the game stage i want my game to fit all the screen without losing the resolution i used the code in this tobic

 

http://www.html5gamedevs.com/topic/5949-solution-scaling-for-multiple-devicesresolution-and-screens/

 

it is only works for desktop browser  see attachment ile 1 it is small test post-9141-0-90610400-1410094738_thumb.jp

 

but in the mobile device it looks like that post-9141-0-90877400-1410094906.jpg

 

i want solve this problem to it my mobile screen without losing resolution  here is the code i use or Boot

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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