Background pixel sizes

[gogigoranic8]

Hi guys,

I am little confused here and would appreciate your hint

If I want to make config.lua like this ( Landscape orientation ):

-- calculate the aspect ratio of the device: local aspectRatio = display.pixelHeight / display.pixelWidth application = { &nbsp; &nbsp;content = { &nbsp; &nbsp; &nbsp; width = aspectRatio \> 1.5 and 320 or math.ceil( 480 / aspectRatio ), &nbsp; &nbsp; &nbsp; height = aspectRatio \< 1.5 and 480 or math.ceil( 320 \* aspectRatio ), &nbsp; &nbsp; &nbsp; scale = "letterBox", &nbsp; &nbsp; &nbsp; fps = 30, &nbsp; &nbsp; &nbsp; imageSuffix = { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;["@2x"] = 1.5, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;["@4x"] = 3.0, &nbsp; &nbsp; &nbsp; }, &nbsp; &nbsp;}, }

build.settings

settings = { orientation = { default = "landscapeRight", }, iphone = { plist= { UIStatusBarHidden=true, }, }, --plugins =    -- {        -- ["CoronaProvider.ads.iads"] =        -- {            -- publisherId = "com.coronalabs",            -- supportedPlatforms = { iphone=true, ["iphone-sim"]=true },       --  },    -- },       }

What size of background images (static - not parallax) should I use?

I.e., what background dimension I should have for:  .png, @2x.png and .@4x.png?

I am aiming at iStore at first, and afterwards Android.

Tnx

[rob]

1x:  570x360

@2x: 1140 x 720

@4x: 2280 x 1440

On iPads, the left and right edges of the images will be off screen and not visible.

On Phones the top and bottom will be off screen and not visible.

So don’t put anything critical in those areas. In other words if you want the word “Score:” in the top left corner, don’t make it part of the background, but it’s own display object that can be drawn independantly of the background.

Rob
 

[gogigoranic8]

Thanks Rob for a detailed explanation!

[Aatos_Media]

If you have iPad-resolution:

width = 768
height = 1024

The values are different or has I missed something? 'cause with Rob’s values, the background is too small for iPhone 5 and such. If I use background size 1360x780, it seems pretty good at least in the simulator. At least the whole background is filled. But is this correct and what is the pixel size of the safe area that is not cropped in different devices?

[rob]

You’re going to get cropped if you want just one background image. You can of course do device detection and load in iPad specific backgrounds and phone specific backgrounds, though backgrounds are the largest images in your bundle and this will increase your app bundle’s file size significantly. 

As for the size of the image, Corona will scale up or scale down to make it fit.  If you follow our recommended pattern of a 320x480 content area with a 1x background size of 360x570, then the @2x image will be 720 x 1140.  We only have to scale the image up 48 pixels to fit the non-retina iPads. That’s 6%.  If you feel the iPad is the screen you want to be pixel perfect on (and perhaps with the growing number of iPhone 6’s on the market), you might want to do:

1x: 384 x 609

2x: 768 x 1216

4x: 1536 x 2432

Your content area would be 341 x 512 to keep the proportions correct.  But now on the iPhone 6 and 6 plus you’re still going to be upsizing a bit. I know this may seem weird since the iPhone 6 is 750px, but you’re taking a smaller part of the image because it’s a narrower shape.

Then if you want to deploy to Android it becomes a much larger set of screens. So being pixel perfect because a huge exercise in futility. So pick the screen size that makes sense to you. Make the background’s width 112.5% wider than the phone’s width. Make the other dimension 118.75% bigger and keep your content width to height aspect ratio 1.5:1 and go with it.

Rob

[rob]

1x:  570x360

@2x: 1140 x 720

@4x: 2280 x 1440

On iPads, the left and right edges of the images will be off screen and not visible.

On Phones the top and bottom will be off screen and not visible.

So don’t put anything critical in those areas. In other words if you want the word “Score:” in the top left corner, don’t make it part of the background, but it’s own display object that can be drawn independantly of the background.

Rob
 

[gogigoranic8]

Thanks Rob for a detailed explanation!

[Aatos_Media]

If you have iPad-resolution:

width = 768
height = 1024

The values are different or has I missed something? 'cause with Rob’s values, the background is too small for iPhone 5 and such. If I use background size 1360x780, it seems pretty good at least in the simulator. At least the whole background is filled. But is this correct and what is the pixel size of the safe area that is not cropped in different devices?

[rob]

You’re going to get cropped if you want just one background image. You can of course do device detection and load in iPad specific backgrounds and phone specific backgrounds, though backgrounds are the largest images in your bundle and this will increase your app bundle’s file size significantly. 

As for the size of the image, Corona will scale up or scale down to make it fit.  If you follow our recommended pattern of a 320x480 content area with a 1x background size of 360x570, then the @2x image will be 720 x 1140.  We only have to scale the image up 48 pixels to fit the non-retina iPads. That’s 6%.  If you feel the iPad is the screen you want to be pixel perfect on (and perhaps with the growing number of iPhone 6’s on the market), you might want to do:

1x: 384 x 609

2x: 768 x 1216

4x: 1536 x 2432

Your content area would be 341 x 512 to keep the proportions correct.  But now on the iPhone 6 and 6 plus you’re still going to be upsizing a bit. I know this may seem weird since the iPhone 6 is 750px, but you’re taking a smaller part of the image because it’s a narrower shape.

Then if you want to deploy to Android it becomes a much larger set of screens. So being pixel perfect because a huge exercise in futility. So pick the screen size that makes sense to you. Make the background’s width 112.5% wider than the phone’s width. Make the other dimension 118.75% bigger and keep your content width to height aspect ratio 1.5:1 and go with it.

Rob