Jump to content

Pixel ratio on iPhone


Smrdis
 Share

Recommended Posts

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

post-6091-0-52570000-1423211761_thumb.jp

iPad mini 2, retina

post-6091-0-44570000-1423211763.jpg

iPhone 5, retina

post-6091-0-97762700-1423211763_thumb.jp

 

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?

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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);    }
Link to comment
Share on other sites

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. ;)

Link to comment
Share on other sites

  • 2 weeks later...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...