jdnichollsc Posted September 11, 2015 Share Posted September 11, 2015 Hi all! Please give examples of full screen scaling in Phaser for noobs. I am a big noob in it! hahaha :'( Full Screen: the canvas measure the entire screen => Width: 100%, Height: 100% Examples but with Pixi.js: http://www.goodboydigital.com/client/goodboy/nebulon/ (Wowwww)https://runpixierun.tresensa.com/https://youtube10.withgoogle.com/http://flashvhtml.com/ (Where is taught to build websites like that? is beautiful!!) Scales Mode in Phaser: Phaser.ScaleManager.RESIZEPhaser.ScaleManager.USER_SCALEPhaser.ScaleManager.SHOW_ALL Please show code or links to better understand, many people need it. Any contribution is greatly appreciated PD: My English isn't very good, sorry haha In Spanish: La mayoría de juegos que hacemos con Phaser están super bien utilizando el modo de escalamiento SHOW_ALL.Pero en la vida real necesitamos que el canvas mida de toda la pantalla, que si se cambia este se escale manteniendo las proporciones de todos nuestros sprites y objetos en el mundo. Es por eso que hago este llamado a todos los desarrolladores de juegos que trabajen con Phaser y Pixi.js, para que por favor nos den ejemplos a muchos más desarrolladores de como poder crear este tipo de juegos, como por ejemplo un runner como RunPixieRun, el cual sin importar el tamaño de la pantalla todo se escala y se ajusta, lo cual es muy difícil de hacer a mi parecer. drhayes and tips4design 2 Link to comment Share on other sites More sharing options...
DonFrag Posted September 11, 2015 Share Posted September 11, 2015 I'm sorry.i didn't undesrstand the post... Link to comment Share on other sites More sharing options...
Ninjadoodle Posted September 11, 2015 Share Posted September 11, 2015 Hi @Nicholls This is probably the best tutorial on the subject ... http://www.emanueleferonato.com/2015/02/26/the-basics-of-responsive-html5-games/ Hope it helps! jdnichollsc 1 Link to comment Share on other sites More sharing options...
jdnichollsc Posted September 11, 2015 Author Share Posted September 11, 2015 Hi @Nicholls This is probably the best tutorial on the subject ... http://www.emanueleferonato.com/2015/02/26/the-basics-of-responsive-html5-games/ Hope it helps! Ohh thanks my friend!! It is helpful It would be great an example of a runner with TilemapLayers Regards Link to comment Share on other sites More sharing options...
Ninjadoodle Posted September 11, 2015 Share Posted September 11, 2015 Make sure you check out Emanuele's other tuts: Here is an endless runner example ... http://www.emanueleferonato.com/2015/03/16/html5-prototype-of-an-endless-runner-game-like-spring-ninja/ and all the others ... http://www.emanueleferonato.com/category/phaser/ jdnichollsc 1 Link to comment Share on other sites More sharing options...
demisephi Posted September 11, 2015 Share Posted September 11, 2015 add this css in your index.htmlhtml,body { margin:0; padding:0; width: 100%; height: 100%;}canvas { width: 100%; height: 100%;}hope it helps in mono 1 Link to comment Share on other sites More sharing options...
jdnichollsc Posted September 11, 2015 Author Share Posted September 11, 2015 add this css in your index.htmlhtml,body { margin:0; padding:0; width: 100%; height: 100%;}canvas { width: 100%; height: 100%;}hope it helps This solution is same to use Phaser.ScaleManager.EXACT_FIT, the canvas is stretched and everything looks bad Link to comment Share on other sites More sharing options...
drhayes Posted September 11, 2015 Share Posted September 11, 2015 Yeah, don't stretch the canvas with CSS. But setting width/height to 100% on html and body elements is a good idea to make them the size of the viewport. jdnichollsc 1 Link to comment Share on other sites More sharing options...
netcell Posted September 12, 2015 Share Posted September 12, 2015 This is the snippets I uses for Web and Cocoon.js https://gist.github.com/netcell/8ffa78ea755c61930dad This gist support scaling Phaser game to fill the screen on mobile game and web browser without stretching. The approach is fixing one of the measures (width or height) and then set the other measure accordingly to keep the screen aspect ratio. However, this won't be able to resize the canvas on window resize (device rotated). I am still looking into that one Link to comment Share on other sites More sharing options...
lmfname_Marco Posted September 12, 2015 Share Posted September 12, 2015 I always use these code : game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.setMinMax(320, 568, 844, 1500); game.scale.forceLandscape = true; game.scale.forcePortrait = true; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; Link to comment Share on other sites More sharing options...
jdnichollsc Posted September 12, 2015 Author Share Posted September 12, 2015 I always use these code : game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.setMinMax(320, 568, 844, 1500); game.scale.forceLandscape = true; game.scale.forcePortrait = true; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.scale.forceLandscape = true and game.scale.forcePortrait = true ????? Link to comment Share on other sites More sharing options...
Singaraj Posted February 19, 2018 Share Posted February 19, 2018 If know phaser development can you help me.. I am new in phaser development can help me basic Link to comment Share on other sites More sharing options...
Recommended Posts