Setting Up A Project for Multiple Resolutions

[gamedeveloper]

Another very basic Level Director X utilization question…

I’m planning on working in several different resolutions and aspect ratios for some popular target platforms.

Tablets    : 600x1024; 800x1280; 1536x2048; 1600x2560

PC/MAC : 1280x800; 1366x768; 1920x1080; 1280x1024; 1024x768

And these are 3:4, 5:8, 8:5, 16:9, 4:3 aspect ratios.

I’ll need to modify my levels somewhat so that rewards/threats are optimized for landscape and portrait orientations.  And my HUD/GUI will have desktop and tablet variations with elements spaced out via code.

My questions:

• any caveats when working with multiple resolutions/aspect ratios? 

• ok to set my projects up using the lowest rez versions of assets?  (I’m using TexturePacker at the moment, but will likely switch to Shoebox)

• when I switch device targets should my level content be updating to reflect the 1x and 2x assets?

Thanks!

[retrofitProductions]

Ideally you need to decide on what your 1x target assets are going to be and design the levels in that size, then it is down to how you configure your config file for the different resolutions as Corona will decide on which size assets to use and how to scale everything.

There are various threads on config file setups, so worth checking them out.

[remiduchalard]

For information I work with 3 differents resolution of each image.

And to don’t have very large object on large screen and little object on little screen I use this:

local approximateDpi = system.getInfo("androidDisplayApproximateDpi") local la=nil local lo=nil if approximateDpi~=nil then la=display.pixelWidth / approximateDpi lo=display.pixelHeight / approximateDpi end if la~=nil then screensize=mathfloor(mathsqrt(la^2+lo\*lo)\*10)\*0.1 else screensize=4.5 end if screensize\>=4 and screensize\<4.6 then apparence=1 elseif screensize\<4 then apparence=1.3 elseif screensize\>=4.6 and screensize\<5.6 then apparence=0.9 else apparence=0.8 end

And for the scale of image I do image.xScale=image.xScale*apparence  image.xScale=image.xScale*apparence

To optimize when you display landscape or portrait, you do like in Android SDK (at the left of this object), 

image.x=image2.x+image2.width\*image2.xScale\*0.5+image.width\*image.xScale

And you create for some object to position, one when it’s on landscape and an other one when it’s in portrait

[gamedeveloper]

@retrofitProductions

Ideally you need to decide on what your 1x target assets are going to be and design the levels in that size, then it is down to how you configure your config file for the different resolutions as Corona will decide on which size assets to use and how to scale everything.

There are various threads on config file setups, so worth checking them out.

I realize now that my expectation that the LDX editor would dynamically display 1x, 2x and 3x assets when you change target was wrong.  Changing the target only changes the yellow outline depicting resolutions.  (I know, pretty silly on my part).

So I need to just work with (like you said above) my lowest rez set of assets and only check how my levels look (in LDX) against different aspect ratios in that resolution range.  1280x800, 1024x768, 800x1280, 768x1024.

The reason I need to do this is that using the same scrolling levels in different aspect ratios presents some problems with reward placement and level structure.  However, the target device yellow outline can help me solve this during my first pass through designing the levels.

@remiduchalard: Thanks.

[rob]

To use Corona SDK effectively you need to do the following:

1. Define a content area that works for all devices. We recommend a width of 320 and a height of 480 in your config.lua

2. Build your backgrounds based on 360 x 570 (portrait) or 570 x 360 (landscape). Depending on the actual device part of this will be off screen. Do your @2x and @4x backgrounds based on this (720x1140, and 1440 x 2280).

3. For UI elements that need to be around the edges of the screen, do not build their backgrounds into the background but have them as separate art elements that can float/anchor themselves to actual edges. 

4. Use display.screenOriginX, display.screenOriginY, display.actualContentWidth, display.actualContentHeight to position UI elements around the edges and corners.

5. Use “letterbox” scaling

Doing this will fill the background with your background regardless of the device. It lets you position elements around the edges as needed and the core content area is centered on the screen.

Rob

[gamedeveloper]

Hi Rob!  Thanks for your input.

[remiduchalard]

A little tips, don’t use @2x and @4x suffix because icon also use it and if you want to exclude some file with suffix you will have error

[rob]

If you’re talking about excluding iOS icons for Android builds, You can safely use @2x and @4x suffixes either by putting your images in a folder and/or include something like this in your build.settings:

 excludeFiles = { iphone = { 'Icon-\*dpi.png', 'audio/\*.oog' }, android = { 'Icon.png', 'Icon-6\*.png', 'Icon-7\*.png', 'Icon-Small\*.png', 'Icon@2x.png', 'Default-568h@2x.png', 'audio/\*.m4a' } },

where you can selectively leave out Icon files.

Rob

[remiduchalard]

I am talking about the inverse when you want to remove some image with suffix. You want to build with large and medium image (@1x and @2x) and exclude lite image @4x.

You exclude the lite image @4x (*@4x) and the app won’t install on some device

[retrofitProductions]

Ideally you need to decide on what your 1x target assets are going to be and design the levels in that size, then it is down to how you configure your config file for the different resolutions as Corona will decide on which size assets to use and how to scale everything.

There are various threads on config file setups, so worth checking them out.

[remiduchalard]

For information I work with 3 differents resolution of each image.

And to don’t have very large object on large screen and little object on little screen I use this:

local approximateDpi = system.getInfo("androidDisplayApproximateDpi") local la=nil local lo=nil if approximateDpi~=nil then la=display.pixelWidth / approximateDpi lo=display.pixelHeight / approximateDpi end if la~=nil then screensize=mathfloor(mathsqrt(la^2+lo\*lo)\*10)\*0.1 else screensize=4.5 end if screensize\>=4 and screensize\<4.6 then apparence=1 elseif screensize\<4 then apparence=1.3 elseif screensize\>=4.6 and screensize\<5.6 then apparence=0.9 else apparence=0.8 end

And for the scale of image I do image.xScale=image.xScale*apparence  image.xScale=image.xScale*apparence

To optimize when you display landscape or portrait, you do like in Android SDK (at the left of this object), 

image.x=image2.x+image2.width\*image2.xScale\*0.5+image.width\*image.xScale

And you create for some object to position, one when it’s on landscape and an other one when it’s in portrait

[gamedeveloper]

@retrofitProductions

Ideally you need to decide on what your 1x target assets are going to be and design the levels in that size, then it is down to how you configure your config file for the different resolutions as Corona will decide on which size assets to use and how to scale everything.

There are various threads on config file setups, so worth checking them out.

I realize now that my expectation that the LDX editor would dynamically display 1x, 2x and 3x assets when you change target was wrong.  Changing the target only changes the yellow outline depicting resolutions.  (I know, pretty silly on my part).

So I need to just work with (like you said above) my lowest rez set of assets and only check how my levels look (in LDX) against different aspect ratios in that resolution range.  1280x800, 1024x768, 800x1280, 768x1024.

The reason I need to do this is that using the same scrolling levels in different aspect ratios presents some problems with reward placement and level structure.  However, the target device yellow outline can help me solve this during my first pass through designing the levels.

@remiduchalard: Thanks.

[rob]

To use Corona SDK effectively you need to do the following:

1. Define a content area that works for all devices. We recommend a width of 320 and a height of 480 in your config.lua

2. Build your backgrounds based on 360 x 570 (portrait) or 570 x 360 (landscape). Depending on the actual device part of this will be off screen. Do your @2x and @4x backgrounds based on this (720x1140, and 1440 x 2280).

3. For UI elements that need to be around the edges of the screen, do not build their backgrounds into the background but have them as separate art elements that can float/anchor themselves to actual edges. 

4. Use display.screenOriginX, display.screenOriginY, display.actualContentWidth, display.actualContentHeight to position UI elements around the edges and corners.

5. Use “letterbox” scaling

Doing this will fill the background with your background regardless of the device. It lets you position elements around the edges as needed and the core content area is centered on the screen.

Rob

[gamedeveloper]

Hi Rob!  Thanks for your input.

[remiduchalard]

A little tips, don’t use @2x and @4x suffix because icon also use it and if you want to exclude some file with suffix you will have error

[rob]

If you’re talking about excluding iOS icons for Android builds, You can safely use @2x and @4x suffixes either by putting your images in a folder and/or include something like this in your build.settings:

 excludeFiles = { iphone = { 'Icon-\*dpi.png', 'audio/\*.oog' }, android = { 'Icon.png', 'Icon-6\*.png', 'Icon-7\*.png', 'Icon-Small\*.png', 'Icon@2x.png', 'Default-568h@2x.png', 'audio/\*.m4a' } },

where you can selectively leave out Icon files.

Rob

[remiduchalard]

I am talking about the inverse when you want to remove some image with suffix. You want to build with large and medium image (@1x and @2x) and exclude lite image @4x.

You exclude the lite image @4x (*@4x) and the app won’t install on some device