espace

scale mode strech with no black border with different devices howto ?

Recommended Posts

hi,

it's a subject that appears also often but i can't find a solution who work for me, especially with the new Phaser.

I have a portrait game and i want that my game is stretched like that :

  • width = width of the device
  • height is stretched to the height of the device 
  • i want no black borders visibles

i have try many things without success,  i have follow these links :

https://phaser.io/examples/v2/input/game-scale

http://www.emanueleferonato.com/2015/03/25/quick-tip-how-to-scale-your-html5-endless-runner-game-to-play-it-on-mobile-devices/

http://www.html5gamedevs.com/topic/8441-stretch-game-to-fit-window/

http://www.html5gamedevs.com/topic/13177-canvas-resize-how-to-always-make-entire-game-visible/

these solution appears to be fine but that don't work at 100% , see my capture screen :

var innerWidth =window.innerWidth
var innerHeight=window.innerHeight
var gameRatio =innerWidth/innerHeight
var game = new Phaser.Game(640,Math.ceil(640*gameRatio), Phaser.CANVAS, '', { preload: preload, create: create, update: update })
function preload() {

	game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL
//doesnt work with the new phaser > it appears  that i must use game.scale.refresh() but that doesnt work 	
//	game.scale.setScreenSize(true)
		game.scale.pageAlignHorizontally = true
		game.scale.pageAlignVertically = true
		game.load.image("test","https://s21.postimg.org/ohfa30zhj/test.jpg")

}
function create(){  
	var ech=game.add.sprite(0,0,'test')
		//resize()
}

function update(){}

 

https://jsfiddle.net/espace3d/s1poyaas/

have you a an advice to do that ?

 

01.png

Share this post


Link to post
Share on other sites

finded by myself 

assume that you agree with a strech effect, with this code my portrait game have never black borders. i define the game with a resolution 640/960 and next i calculate the proportional height to scale with the acutal device

here is the code "index.html" for those interested :

<!doctype html>
<html>
	<head>
		<script src="phaser.min.js"></script>
		<style>
body{margin:0}
		</style>
		<script type="text/javascript">

//for portrait games with resolution :  640/960 pixels

var ratio_device=window.innerWidth/window.innerHeight
var height_applied=640/ratio_device

var game = new Phaser.Game(640,height_applied,Phaser.CANVAS,'',{ preload: preload, create: create, update: update })
function preload() {
	        game.load.image("test","https://s21.postimg.org/ohfa30zhj/test.jpg")
		game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT
		game.scale.pageAlignHorizontally = true
		game.scale.pageAlignVertically = true
		game.scale.refresh()
}

function create(){  
	var image=game.add.sprite(0,0,'test')
}

function update(){}
		</script>
	</head>
	<body>
	</body>
</html>

 

 

Share this post


Link to post
Share on other sites

reply to fast, i have still black or white border and my game is still not fully stretched (see my capture).

i'm disapointed....

is there somenone who could help me to find this solution. 

as i said, it's not important for me if the game is streched 

00.png

Share this post


Link to post
Share on other sites

a pseudo solution but with the nexus 5 p i have always white border on top and bottom 

 

<!doctype html>
<html>
	<head>
		<script src="phaser.min.js"></script>
		<style>
body{margin:0}
		</style>
		<script type="text/javascript">

//for portrait games with resolution :  640/960 pixels

var ratio_device=window.screen.width/window.screen.height
var height_applied=640/ratio_device

var game = new Phaser.Game(640,height_applied,Phaser.CANVAS,'',{ preload: preload, create: create, update: update })
function preload() {
	        game.load.image("test","https://s21.postimg.org/ohfa30zhj/test.jpg")
		game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT
		//game.scale.pageAlignHorizontally = true
		//game.scale.pageAlignVertically = true
		game.scale.refresh()
}

function create(){  
	//my image is 640/960 so i strech it
	var image=game.add.sprite(0,0,'test')
		image.height=height_applied
}

function update(){}
		</script>
	</head>
	<body>
	</body>
</html>

 

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.