How to adapt to different aspect ratios

[Noid]

I'd like to scale in SHOW_ALL mode and once the game fits the width of the screen then use RESIZE mode to eliminate letter-boxing. 

 

I've been reading "Guide to the Phaser Scale Manager" but I'm still not entirely sure about how to implement it. Maybe something involving USER_SCALE or resize callbacks? Has anyone already implemented something similar?

 

 

[Noid]

I defined a scale.setResizeCallback that does this: 

 

    reflow: function (scale, parentBounds) {        if(scale.isFullScreen) {            this.game.scale.setGameSize(800,800*window.screen.height/window.screen.width);        }        else {            this.game.scale.setGameSize(800,800*parentBounds.height/parentBounds.width);        }    }

Seems to work well on desktop and on cocoonjs

[Tom Atom]

Hi, with different aspects you have generally two options:

 - keep displayed world always the same size and stretch it vertically or horizontally to fill screen,

 - or keep aspect and display more / less from you world vertically or horizontally

 

 ... or you can use combination of above two. This is what I do. I took iPhone and iPad as two extremes and between their aspects I am using the second (displaying more or less) ... it means from aspect 1.775 (1136/640) to 1.333 (1024/768) there is no distortion of image. If the device has more extreme screen dimensions and method 2 (show more or less) is not enough, then I stretch the image to fill remaining space.

 

 To achieve this I am using USER_SCALE. All you need to do is calculate your game dimensions and your x and y scales. I wrote detailed blog post on it here: http://sbcgamesdev.blogspot.cz/2015/04/phaser-tutorial-manage-different-screen.html

[Noid]

Thanks! I'm gonna try that since my solution isn't always working.