Best practices for multiple screen resolution support?

Solar2D General Questions/Discussion
#1

I’m creating a graphics-heavy game that I would like to release on as many device types as possible with as little re-working as possible, and am trying to figure out my art production pipeline.

Most of the examples and docs on the Corona site dealing with dynamic content scaling start with the assumption that the “original” resolution is 320 x 480, i.e.- original iPhone resolution. The config.lua file defines the original content as that size and then any other, larger sizes are created by defining an imageSuffix with a scale for each device resolution. Multiple versions of each graphics file at each of the specified scales are then created with the same names, plus the image suffix.

But what if I create the “original” app (and art assets) at 640 x 960 (iphone 4)? This seems like a good compromise since iPad is only slightly higher res. and Android and iPhone 3 are much lower. Should I then create an imageSuffix for, say, iPhone 3 as “[_x50] = 0.5”? Do I then need to create half resolution assets with that suffix?

The reason I ask is everything seems to work fine without needing to create additional, lower res. assets. I’m making my app. iPhone 4 “native” and it looks and works fine on my iPhone 3. The content is scaling correctly. In fact, when I created specific assets at reduced resolution to test on iPhone 3 the app. didn’t use them. At what stage is Corona scaling the content down to fit iPhone 3 (I wouldn’t want a scaling operation to affect the performance of the app., for example)? Are there any downsides to creating the assets ONLY at iPhone 4 res. and letting Corona, or iOS, do the auto-scaling for me?

-Stephen

Stephen [import]uid: 9422 topic_id: 2988 reply_id: 302988[/import]

#2

I’d be curious to know the answer to these questions. Can anyone from Corona respond?

#3

the biggest down side of building higher res images and down scaling them is memory. the device still needs to be able to load the image as it’s original size then downscale. now with that said there are less devices with 320x480 res each day. I quit supporting 320x480 images 6 months ago

#4

I’ve started to create my base-line graphics for the non-retina iPad, and then have @2x graphics for iPad Retina and @0.5x graphics for non-retina phones. The 0.5x/iPad graphics will be slightly larger than necessary for the non-retina/retina iPhone, but it will be scaled down a bit, and I haven’t noticed any problems doing it this way.

With the config below the base-line non-retina iPad graphics will be picked up by the iPhone Retina.

-- config.lua local aspectRatio = display.pixelHeight / display.pixelWidth; local MAX\_WIDTH = 768; local MAX\_HEIGHT = 1024; local maxAspect = MAX\_HEIGHT / MAX\_WIDTH; application = { content = { width = aspectRatio \> maxAspect and MAX\_WIDTH or math.ceil(MAX\_HEIGHT / aspectRatio), height = aspectRatio \< maxAspect and MAX\_HEIGHT or math.ceil(MAX\_WIDTH \* aspectRatio), scale = "letterbox", fps = 60, antialias = false, xAlign = "center", yAlign = "center", imageSuffix = { ["@0.5x"] = 0, [""] = 0.7, ["@2x"] = 1.4 } } }
#5

I’d be curious to know the answer to these questions. Can anyone from Corona respond?

#6

the biggest down side of building higher res images and down scaling them is memory. the device still needs to be able to load the image as it’s original size then downscale. now with that said there are less devices with 320x480 res each day. I quit supporting 320x480 images 6 months ago

#7

I’ve started to create my base-line graphics for the non-retina iPad, and then have @2x graphics for iPad Retina and @0.5x graphics for non-retina phones. The 0.5x/iPad graphics will be slightly larger than necessary for the non-retina/retina iPhone, but it will be scaled down a bit, and I haven’t noticed any problems doing it this way.

With the config below the base-line non-retina iPad graphics will be picked up by the iPhone Retina.

-- config.lua local aspectRatio = display.pixelHeight / display.pixelWidth; local MAX\_WIDTH = 768; local MAX\_HEIGHT = 1024; local maxAspect = MAX\_HEIGHT / MAX\_WIDTH; application = { content = { width = aspectRatio \> maxAspect and MAX\_WIDTH or math.ceil(MAX\_HEIGHT / aspectRatio), height = aspectRatio \< maxAspect and MAX\_HEIGHT or math.ceil(MAX\_WIDTH \* aspectRatio), scale = "letterbox", fps = 60, antialias = false, xAlign = "center", yAlign = "center", imageSuffix = { ["@0.5x"] = 0, [""] = 0.7, ["@2x"] = 1.4 } } }