Sabino Posted February 17, 2017 Share Posted February 17, 2017 Phaser is one of the few JS frameworks which doesn't support automatic screen scaling. Today I tried to create a canvas which should auto-adapt to screen size, by detecting if the current device is desktop or not. Please give a look at http://phasertest.byethost7.com/?i=1 It looks perfect for me on a desktop browser. But, when you access it from an android device, it's distorted. I clearly used the ternary operators as below: applicationWidth = (!this.desktop ? window.innerWidth/3 : window.innerWidth); applicationHeight = (!this.desktop ? window.innerHeight*0.975 : window.innerHeight); var game = new Phaser.Game(applicationWidth,applicationHeight,Phaser.AUTO,'',{preload:preload, create:create, update:update}); I tried to reverse the operator but without success.... Is there a way to fix this? Or another method for screen scaling? Thanks Link to comment Share on other sites More sharing options...
drhayes Posted February 17, 2017 Share Posted February 17, 2017 BOY did that link redirect to a big ol' phishing attack on my phone. Can we kill this post? Link to comment Share on other sites More sharing options...
rich Posted February 17, 2017 Share Posted February 17, 2017 For me the link just bought up a blank page with 'Directory Listing' at the top and nothing actually listed. Link to comment Share on other sites More sharing options...
Sabino Posted February 17, 2017 Author Share Posted February 17, 2017 Quote BOY did that link redirect to a big ol' phishing attack on my phone. Can we kill this post? ByetHost is free hosting provider. Since the android app "Paw Server" is causing me problems and crashed, I use that service to test my apps on android. Quote For me the link just bought up a blank page with 'Directory Listing' at the top and nothing actually listed. It works now. Thanks. http://phasertest.byethost7.com //if you get a 502 error please just reload. If you use Mozilla Firefox, right-click -> view page source -> browse 'game.js' Link to comment Share on other sites More sharing options...
rich Posted February 18, 2017 Share Posted February 18, 2017 Anyway back on track - your assumption (that there is nothing included) is incorrect, as Phaser has a pretty comprehensive Scale Manager built in to handle canvas sizing. Start with the docs and project templates we provide, then post again if you get stuck. Link to comment Share on other sites More sharing options...
m7_b5 Posted February 19, 2017 Share Posted February 19, 2017 On 2/17/2017 at 5:50 AM, Sabino said: Phaser is one of the few JS frameworks which doesn't support automatic screen scaling. Today I tried to create a canvas which should auto-adapt to screen size, by detecting if the current device is desktop or not. Please give a look at http://phasertest.byethost7.com/?i=1 It looks perfect for me on a desktop browser. But, when you access it from an android device, it's distorted. I clearly used the ternary operators as below: applicationWidth = (!this.desktop ? window.innerWidth/3 : window.innerWidth); applicationHeight = (!this.desktop ? window.innerHeight*0.975 : window.innerHeight); var game = new Phaser.Game(applicationWidth,applicationHeight,Phaser.AUTO,'',{preload:preload, create:create, update:update}); I tried to reverse the operator but without success.... Is there a way to fix this? Or another method for screen scaling? Thanks that's weird. I find that this solution seems to work, at least on my galaxy s6 and desktop var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.CANVAS, 'TopDown', { preload: preload, create: create, update: update, render: render }); It may be that I haven't needed something more complex yet haven't run on it any other real devices besides those two. Link to comment Share on other sites More sharing options...
Recommended Posts