espace Posted November 5, 2016 Share Posted November 5, 2016 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 ? Link to comment Share on other sites More sharing options...
espace Posted November 6, 2016 Author Share Posted November 6, 2016 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> Link to comment Share on other sites More sharing options...
espace Posted November 6, 2016 Author Share Posted November 6, 2016 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 Link to comment Share on other sites More sharing options...
espace Posted November 6, 2016 Author Share Posted November 6, 2016 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> Link to comment Share on other sites More sharing options...
Recommended Posts