Jump to content

How to adapt to different aspect ratios


Noid
 Share

Recommended Posts

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?

 

 

Screenshot_2015-05-15-19-38-29%255B1%255

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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