Screen Scaling

[Sabino]

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

 

 

[drhayes]

BOY did that link redirect to a big ol' phishing attack on my phone. Can we kill this post?

[rich]

For me the link just bought up a blank page with 'Directory Listing' at the top and nothing actually listed.

[Sabino]

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'

[rich]

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.

[m7_b5]

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.