Support multiple resolution with Starling Builder

There's are hundreds of devices with different resolutions, we want to have 1 set of layout working for all of them. Here’s our best practice:

In the editor, we set the canvas size to the game's design resolution. Design resolution is the resolution used to determine size of the stage. It's device-independent. Let's say your design resolution is 640*960, then every UI element should be designed to stay within the design resolution, specifically, no more than 640 in width and 960 in height.

In the game, we scale the stage to match one of the design width or height. If the device has a screen wider than the design resolution, the device's height will scale to design height and device's width will scale proportionally to its height. If the device has a screen longer than the design resolution, the device's width will scale to design width and device's height will scale proportionally to its height.

This approach can make sure that the device stage size will always contain design resolution, so we don't need to scale anything, regardless what device it is. All you need to do is to move/anchor the ui elements to the right position.

For more information of how it's implemented, please check out the demo project inside the engine repository.

  builder/multiple_resolution.txt · Last modified: 2016/10/15 00:21 by johannh
 
Powered by DokuWiki