Pixel ratio on iPhone

[Smrdis]

I created function that makes fullscreen on mobile device. It works well on iPad, but on iPhone picture looks dirty.

 

Seems like that line has no effect on iPhone:

canvas.style.width = canvas.width * this.game.device.pixelRatio + "px";

 

Full resize function code:

    this.game.scale.scaleMode = Phaser.ScaleManager.RESIZE;    private gameResizedMobile(manager: Phaser.ScaleManager, bounds: Phaser.Rectangle): void    {        var w: number = window.innerWidth;        var h: number = window.innerHeight;        var real_w: number = Math.min(w, h);        var real_h: number = Math.max(w, h);        var canvas: HTMLCanvasElement = this.game.canvas;        if (w < h)        {            canvas.width = real_w;            canvas.height = real_h;        }        else        {            canvas.width = w;            canvas.height = h;        }        //  These 2 lines are not working on iPhone        canvas.style.width = canvas.width * this.game.device.pixelRatio + "px";        canvas.style.height = canvas.height * this.game.device.pixelRatio + "px";        this.game.world.scale.set(real_w / this.game.width);    }

iPad mini 1, no retina

iPad mini 2, retina

iPhone 5, retina

 

I also tested on Highscreen omega prime S (dirty), Nexus 5 (dirty) and Galaxy Tab 2 (looks well). So, it loosk dirty on smartphones and works well on tablets.

 

What wrong with smartphones?

[Smrdis]

If I set scaleMode to SHOW_ALL picture becomes clear, but SHOW_ALL unusable in my case. 

[Smrdis]

Hmm... Seems like canvas.style.width is empty string. So, Phaser internally clear canvas.style.width. How to disable it?

[Daniel Belohlavek]

For Portrait games I'd with the method used in this tutorial: 

http://gamedevelopment.tutsplus.com/tutorials/getting-started-with-phaser-building-monster-wants-candy--cms-21723

 

And make sure to start fullscreen when the user clicks the play button or something.

 

I spent a lot of time in the past trying to achieve a "perfect" resizing for all mobile resolutions. It was a waste of my time. Having some unused space and centering the game canvas is not so bad and it maintains the aspect ratio (very very important).

[Smrdis]

For Portrait games I'd with the method used in this tutorial: 

http://gamedevelopment.tutsplus.com/tutorials/getting-started-with-phaser-building-monster-wants-candy--cms-21723

SHOW_ALL is ok for development, but unusable for real games. Bars on top/bottom sides look bad :/. I definitely needed ScaleManager.RESIZE. 

[Kartou]

I have been struggling with the same issue and I am very interested in a solution to this It seems to me that you should be able to use ScaleManager.RESIZE without getting the "dirty" effect on high res screens. Is this a bug or is there a reason for this limitation?

 

Cheers!

[Smrdis]

I have been struggling with the same issue and I am very interested in a solution to this It seems to me that you should be able to use ScaleManager.RESIZE without getting the "dirty" effect on high res screens. Is this a bug or is there a reason for this limitation?

 

Cheers!

It looks like bug, but I am not sure. 

 

 

I finally found working solution for fullscreen with Phaser. 

    this.game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;    this.game.scale.setResizeCallback(this.gameResized, this);    private gameResized(manager: Phaser.ScaleManager, bounds: Phaser.Rectangle): void    {        var scale_x: number = window.innerWidth / this.game.width;        var scale_y: number = window.innerHeight / this.game.height;        manager.setUserScale(scale_x, scale_y);        this.game.world.scale.set(1, scale_x / scale_y);    }

[AFewBits]

With your solution, isn't gameResized called continually?

 

ScaleManager.setUserScale queues an update, which calls your resize callback, which calls ScaleManager.setUserScale, etc. Is that right?

 

Me? I've had success keeping layouts crisp across different devices using ScaleManager.SHOW_ALL, and this post from an interesting thread on scaling things.

 

A couple of points about this possibility...

 

1. Backgrounds: To date I've only build a few simple games with Phaser, so I don't know how the above solution would handle full-screen backgrounds (I've only ever used either CSS backgrounds behind the game canvas, or gradient backgrounds - so visuals that are quite tolerant to being forcefully pushed around). However, even without having attempted anything difficult I can already think of things to try in terms of proportionally scaling/ loading assets to particular devices, so I reckon there's a route through to a decent end.

 

2. Resizing: I reckon that ScaleManager.RESIZE could be the bees knees in a short while, in fact I don't think that there's much more than the HDPI issue that's holding it back from being the mode for responsive games (there might already be a solution to the HDPI issue, anyone?).

 

For now, I've taken to refreshing the browser on a change of window size. Heavy handed? Well, yes, but I'm reassured by starting from scratch on each final resize (use a Timeout to avoid continual refreshing, wait for a short pause then refresh), rather than having to adjust content to fit new dims. I've also a hunch that the number of users experiencing this refresh isn't significant (total users > desktop users > desktop users fiddling with their browsers > desktop users fiddling with their browsers more than once, then they first visit a site). Again, probably a bit too much of a sledgehammer for some, but it works for me and it's not something that the vast majority of users will see.

 

I'm slightly unsure whether or not that's useful, or just adding to the noise, but I hope that it helps.

[rafaholiveira]

From the docs:

 

"setResizeCallback(callback, context)

 

Sets the callback that will be invoked before sizing calculations.

 

This is the appropriate place to call setUserScale if needing custom dynamic scaling."

 

Maybe there is a bug?