What image resolutions for backgrounds do you include? (and dynamic scaling & resolution settings?)

I’ve read the Corona documentation re how one can use both:
(a) Dynamic Content Scaling - with width/height/scale settings in config.lua, and
(b) Dynamic Image Resolution - with the imageSuffix setting in config.lua (e.g. ["@2x"] = 2)

However I would appreciate some guidance re what a good set of starting sizes/resolutions would be. Let’s say for developing background images for targeting at:
* iPhone
* iPhone 4
* iPad’s
* Android

So would you recommend here for the following (re background images):

Q1 - Resolution do develop them in photoshop (i.e. originals)

Q2 - Re exporting from the original specific resolution sizes, how many & what resolutions? (e.g. perhaps only two which reflect the resolution of an iPhone & iPhone4, and the let other stuff auto-scale?)

Q3 - What would the config.lua setting be for this (i.e. your recommendation)

thanks [import]uid: 140210 topic_id: 26276 reply_id: 326276[/import]

I’m working on an app at the moment for iOS devices (no Android yet) and we’ve had very good results with the following,

Q1 - 960 x 640
Q2 - output 2 versions via a Photoshop action to 480x320 and 960x640.
Q3
[lua]application = {
content = {
width = 320,
height = 480,
scale = “letterbox”,
fps = 60,
imageSuffix = {
["@2"] = 2
},
},
}[/lua]

Greg
[import]uid: 117657 topic_id: 26276 reply_id: 106528[/import]

@ spritestack - thanks

Anyone - any feedback for the case where you want to develop for Android/iPad/iPhone/iPhone4? [import]uid: 140210 topic_id: 26276 reply_id: 106725[/import]

bump - would still love to hear back re anyone’s suggestion/experience here

@Peach - Any suggestions/ideas? [import]uid: 140210 topic_id: 26276 reply_id: 107221[/import]

Hi,
My personal preference is to use a resolution somewhere between the “wide” iPad orientation and the “very tall” Android orientation. Then I set the scale to “letterbox”, centered on both horizontal and vertical axis.

Running this on all of the most common devices basically means this: you’ll end up with 2 narrow ribbons of extra space on the iPad (top and bottom, in landscape mode), and you’ll end up with 2 wider ribbons of extra space on Android (left and right, in landscape mode). It will be your responsibility to somehow fill these areas with content depending on the device… but at least you won’t have anything “stretched” and you won’t have anything “cropped” off the edge. It’s my belief that the imaginary “screen size” in Corona should fit within the bounds of the device’s screen at all times, so nothing is unintentionally lost.

Here’s my preferred config.lua setup:

application =   
{  
 content =   
 {   
 fps = 60,  
 width = 704,  
 height = 1024,  
 scale = "letterbox",  
 xAlign = "center",  
 yAlign = "center",  
  
 imageSuffix =  
 {  
 --iPhone3G/iPod3/iPod2 | 320(deviceWidth)/704 = 0.4545  
 --Droid | 480(deviceWidth)/704 = 0.6818  
 ["\_1"] = 0.4,   
 --Galaxy/Kindle/Nook | 600(deviceWidth)/704 = 0.8523  
 --iPhone4/iPod4 | 640(deviceWidth)/704 = 0.9091  
 --iPad1/iPad2 | 1024(deviceHeight)/1024 = 1.0000   
 ["\_2"] = 0.8,   
 --iPad3 | 2048(deviceHeight)/1024 = 2.0000  
 ["\_3"] = 2.0   
 }  
 }  
}  

Let me know if you have questions about this setup and I’ll explain better. :slight_smile:
Brent Sorrentino
Ignis Design [import]uid: 9747 topic_id: 26276 reply_id: 107240[/import]

thanks Brent - can I ask to clarify:

a) so your original image development (e.g. in photoshop say) is at the 704x1024 then? Or perhaps your original is the iPad3 largest size? (or perhaps larger?) That is what you develop an image is, as I’m assuming you then use your drawing tool to produce/export the sizes you need then from the original.

b) actually is the 704x1024 specified perhaps not necessarily used as an image resolution anywhere, but just a dimension on which to apply the _1, _2, _3 against? i.e. it’s really just used as a part of the formula’s Corona applies to work out which image extensions to use?

c) and then from the original (question a) can you confirm the exported copies sizes you produce. these would be the following no?
_1 320x480
_2 640x960
_3 1536x2048

d) I’m not actually sure I’ve guessed correctly on the size in © above - there is no direct formula to apply to determine there is there? That is, the config settings just use the number (.4, .8, 2) as a threshold and then just grab the image with the correct name that matches. For example not sure for the _2 row, which you were using for a number of devices, whether I choose the correct resolution to use when you create these images? I guessed 640x960.

e) oh, and do you actually not have a base image file with no “_x” type extension at all in this case? i.e. each device possible currently would trigger one of the extensions to be looked for?

Thanks again Brent, so overall still a bit unclear on the concept/thinking behind the original photoshop size you would use, and then exactly what sizes/resolutions you would export from this to the _1, _2, _3 images.

thanks in advance
[import]uid: 140210 topic_id: 26276 reply_id: 107419[/import]

Hi Greg,
This issue is a bit confusing, but I’ll try to clarify:

A) Unless you’re doing easily-resizable vector/shape graphics (Illustrator, Fireworks, or even Photoshop vector art), you’re wise to design everything HUGE (iPad3 resolution) and then scale down. I think iPad3 (2048x1536) is the maximum practical level to be concerned with, since it’s even bigger than many desktop/laptop resolutions (so, let’s say Corona eventually expanded to run on both mobile devices AND native OSX or in web browsers, you’d be covered).


B/D) the value “704” that I use in my config is confusing at first. I actually chose it because it’s directly between the iPad width (768) and the iPhone4 width (640)… 768-640=128 … 128/2=64 … 768-64=704. So you’re correct, 704 is sort of the value that I use to weigh my scaling “factors” against.

Look at the example config code in my previous response and note the commented lines. This shows exactly how I got those scaling factors. Remember that Corona will look for the next-lowest or equal value when choosing what images to use with newImageRect(). If 3 different devices return scaling factors of 0.8, 0.82, and 0.93, they’ll all use the “0.8” scaling factor that you defined… but if a device returns 0.799999, it will use the next lowest factor, assuming you specify one.

By the way, you can easily get a device’s "scaling factor"in the Simulator, using this:

print(1/display.contentScaleX, 1/display.contentScaleY)

C) This one is tricky. I actually design my graphics with 1024 x 704 in mind. And I design 3 sizes of graphics overall. Again, note how I set up the factors and grouped them as _1, _2, and _3. The commented lines above each factor show which device(s) will use it.

So why 704, and not 640 or 768? I simply consider 1024 x 704 to be my base 1x screen resolution. My images will undergo no in-device scaling on iPad1/2/3. They will be scaled down very slightly on iPhone4 or Kindle/Nook, but that’s fine (better to scale down than up!)

The best way to see what’s happening is to use my config settings in a new project, then display and center a rectangle on the screen:

local screen = display.newRect( 0, 0, 1024, 704 )  
screen.x = 512 --1024/2  
screen.y = 352 --704/2  
screen:setFillColor( 255, 0, 0, 200 )  

Now run this is all of the Simulator device modes and you can see how the rectangle (the “screen size”) fits within the bounds of all of them, with various amounts of “letterboxing” on the edges. This is the empty area you’ll need to deal with (and there are simple ways)… but basically you can see that the entire 1x screen will fit within the device at all times.


E) Correct, I don’t use a “base” image file. I suffix every image with either _1, _2, or _3. Of course you can name these anything you want… @1, @2, @3, even _USE_ME_FOR_IPAD3, but that would look silly in your project directory. :slight_smile:

Hope this helps. Running the actual config with the colored rectangle explains it better. Oh, and if you need certain things like GUI bars or elements to always adhere to an edge of the screen (adjusting per-device), I can show you the simple formula to achieve that.

Brent Sorrentino
Ignis Design
[import]uid: 9747 topic_id: 26276 reply_id: 107504[/import]

thanks for clarifying Brent

So if I’ve got things correct then, the images you actually create for each large “original”, would be:
* 352x512
* 704x1024
* 1408x2048
Have I got it right? I can then see the scaling down effect from here you’d get with your settings. [import]uid: 140210 topic_id: 26276 reply_id: 107641[/import]

Yes, that’s basically it. Here’s what happens in essence (consider each in landscape orientation)…

“_1” images (352x512):
iPhone3, iP-Touch 3rd-gen: 352 scales down into screen height of 320
Android: 352 scales *up* into screen height of 480

“_2” images (704x1024):
iPhone4, IP-Touch 4th-gen: 704 scales down into screen height of 640
Nook, Kindle, GalaxyTab: 704 scales down into screen height of 600
iPad1&2: non-scaled 2x images! (1024 spans actual width of screen)

“_3” images (1408 x 2048):
iPad3: non-scaled 4x images! (2048 spans actual width of screen)

. . .

The one you might want to adjust is the _1 for Android phones. As you see, this is the only factor that scales images UP, which won’t necessarily look as nice. You could, however, easily make Android use the _2 image set by changing 0.8 to 0.6 in my config setup (for the _2 setting). Since the Android scale factor is 0.6818, using 0.6 (or even 0.68) would lump those devices into the _2 set, while keeping the old iPhone3 in the very lowest bracket. It just depends on how picky you are, and if you think Android can handle all of the _2 images in memory (depends on the complexity/amount of your images of course!).

Again, every developer uses their own setup. I’m not saying that my setup is “ideal” or authoritative in some way. It’s just what I prefer. I think it covers all bases pretty well, and maintains 3 overall sets of images.

Brent Sorrentino
[import]uid: 9747 topic_id: 26276 reply_id: 107674[/import]

Hi Brent - just wondering too what you do re these related items…

a) do you hardcode your newImageRect(…) width/heights? i.e. as opposed to coming up with a way to do this dynamically? (I did pose the question here - https://developer.anscamobile.com/forum/2012/06/21/newimagerect-how-can-i-remove-need-hardcode-heightwidth-which-are-required)

b) placing/arranging small images on the larger background image - you just hardcode the absolute values of the small images position relative to the 704 x 1024 size from the config.lua file I assume? So this is the *_2 images hey. So you create the huge PSD file, then create the _1, _2, _3 images, then you use the _2 images to work out the absolute x/y coordinates for the point on the image you want to position the small image (e.g. a door).

cheers [import]uid: 140210 topic_id: 26276 reply_id: 112834[/import]

Hi Greg,
Interestingly, I’ve made some changes and new discoveries on this in the past few days.

#1) Are you using image sheets? If so, I think you can skip “newImageRect()” entirely and just use “newImage()” with no need to hard-code the dimensions in the actual image placement. You will still need to hard-code them once in the image sheet setup, but at least it’s only done once. And if you need to change the image sheet, it’s just one block of code where you change the dimensions and location within the sheet… better than locating every call of “newImageRect()” and adjusting the dimension numbers.

I’m waiting for an official answer from Corona Labs or other developers here… see my comments on why “newImageRect()” is likely unnecessary if you’re using image sheets:
http://developer.anscamobile.com/forum/2012/06/22/any-reason-use-newimagerect-image-sheets

#2) The new official build #840 has forced me to change my “config.lua” slightly. If the device scaling yielded by “contentScale” is *exactly* 1.0, the new build will NOT look for an image suffix. Thus, you MUST have “base” images with no suffix for your devices that yield 1.0 scaling. In the config example I gave you previously, this is the “_2” factor on iPad 1&2. I solved this new snag by just changing “_2” to “” (yes, empty quotes) in the config, then I removed the “_2” from all images that had it suffixed on there. Basically, what you need now is a set of base, non-suffixed images throughout your app. This is actually “safer” in a way because if, for some reason, the config doesn’t get a match suffix, the app can fall back on the base set.

Let me know if this doesn’t make sense… I’m probably rambling a bit here, but I can clarify this if it doesn’t add up for your app purposes.

Brent
[import]uid: 9747 topic_id: 26276 reply_id: 112838[/import]

thanks Brent

re 1 - I wasn’t using image sheets for many of the one off images - I take your point though to keep image sheets in mind

re 2 - I kind of get what you mean - if it’s ok I’d be really interested in seeing your new config.lua (to compare it). So in terms of images do you now have: image.png, image_2.png, image_3.png?
[import]uid: 140210 topic_id: 26276 reply_id: 112839[/import]

Hi Greg,
My config looks like the following now. “_2” is gone… it’s just an empty bracket… however it still tells Corona to use the “base” set (which was previously _2 for any scaling >= 0.8. If you just removed that definition entirely, I think it would try to use the _1 set for anything less than 2.0, which wouldn’t be wise since the _1 set is reserved for older devices with low resolution.

Remember, if you previously suffixed your images with _2, you’ll need to go back and remove that from every image file because this code tells Corona that there isn’t any _2 images now.

I absolutely recommend image sheets however. They are more efficient in almost every way, and you won’t need to bother with “newImageRect()” if my initial testing is correct. For the one-time images you don’t want to pack into an image sheet, unfortunately I think you’ll still need to hard-code the dimensions. Those dimensions need to come from somewhere so that Corona knows how to scale the images. I still use a couple images that aren’t packed into sheets, and inconveniently, I need to specify the dimensions. A “necessary evil” I suppose for proper scaling.

content = {  
 fps = 60,  
 width = 704,  
 height = 1024,  
 scale = "letterbox",  
 xAlign = "center",  
 yAlign = "center",  
  
 imageSuffix =  
 {  
 ["\_1"] = 0.4, --iPhone3G/iPod3/iPod2/Droid   
 [""] = 0.8, --Galaxy/Kindle/Nook/iPhone4/iPod4/iPad1/iPad2  
 ["\_3"] = 2.0 --iPad3  
 }  
}  

[import]uid: 9747 topic_id: 26276 reply_id: 112842[/import]

thanks for clarifying Brent - for my understanding, would’t it be the same to change to the following too:

[code]
content = {
width = 352,
height = 512

imageSuffix =
{
– no need for this line [""] = 0.4, --iPhone3G/iPod3/iPod2/Droid
["_2"] = 2.0, --Galaxy/Kindle/Nook/iPhone4/iPod4/iPad1/iPad2
["_3"] = 5.0 --iPad3
}
}
[/code] [import]uid: 140210 topic_id: 26276 reply_id: 112846[/import]

Yes, that should work fine. The setup width and height are half the amount that I put, so you can increase the scaling factors below it. However, you might need to change the “_2” setting to 1.6, and the “_3” to 4.0.

The best way to determine what these values should be is to put this in your main.lua code:

print(1/display.contentScaleX, 1/display.contentScaleY)  

Now just run the app in the Corona Simulator under every device and see how they output. If you want the Nook/Kindle to use the _2 group, make sure its output falls >= to the scale factor… that’s why I suggest you might need to change that value to 1.6, double of what I set it in my config.

Brent

P.S. - I think the “Indie” account disallows Nook/Kindle display in the Simulator, but you can get the same scaling factor output by choosing “Galaxy Tab” which has the exact same resolution as Nook/Kindle, last time I checked (hardware changes every month it seems). :slight_smile:
[import]uid: 9747 topic_id: 26276 reply_id: 112885[/import]

thanks again Brent - have a pretty good understanding now I think

One weird item/issue I hit was in my current config the _3 images are not being trigger as I’d expect - posted it as a question here: https://developer.anscamobile.com/forum/2012/06/24/why-3-image-not-being-selected-scaling-here-code-attached
[import]uid: 140210 topic_id: 26276 reply_id: 112985[/import]

Brent - just wondering how you’re going to change your resolution approach here (if at all) for iPhone5? seems like it is going to be 1136x640 [import]uid: 140210 topic_id: 26276 reply_id: 124648[/import]

Brent - just wondering how you’re going to change your resolution approach here (if at all) for iPhone5? seems like it is going to be 1136x640 [import]uid: 140210 topic_id: 26276 reply_id: 124648[/import]