Recommended Reading about iPad3 and iPad2 Graphics and Concepts

[chakorules]

I was wondering if someone could link me to a blog or maybe a thread in here that talks about best practices when developing your app for iPad.

For example, I am pretty sure we only are interested in targeting the iPad market only for now. With iPad Retina released, what are most developers doing now with graphics?

Do most developers just make all your graphics for the Retina iPad, then scale down for the iPad 2? Or do you include both resolutions in your app, and depending on which iPad version the customer has, you load either the graphics in your app for iPad 2 or iPad 3?

Or do is the concept still build two separate apps? One app is a normal app designed for iPad 2 and then do you make a separate app for iPad Retina HD?
[import]uid: 152474 topic_id: 30542 reply_id: 330542[/import]

[CraftyDeano]

I design my app for the iPad and set it to use upscaled assets for retina devices.

Here is my Config.lua. it specifies that any images ending in “@2x” will display on retina devices.

[lua]local targetDevice = ( system.getInfo( “model” ) )

if targetDevice == “iPad” or “iPad Simulator” then
application =
{
content =
{
width = 768,
height = 1024,
scale = “letterbox”,
fps = 60,
antialias = true,
xalign = “center”,
yalign = “center”,
imageSuffix =
{
["@2x"] = 2,
},
},
}[/lua]

Below is a piece of my code that displays an image, if the device is an iPad 3, it will automatically use background@2x.png (in the same directory) and double the display size from 763,1024 to 1526,2048.
[lua]display.newImageRect(“imageipad/background.png”,763,1024)[/lua]

I always make my images in iPad 3 res and downscale them with this application:
http://itunes.apple.com/gb/app/multirezer/id509966500?mt=12 [import]uid: 62706 topic_id: 30542 reply_id: 122390[/import]

[mike470]

“I design my app for the iPad and set it to use upscaled assets for retina devices.”

If I may ask - isn’t that wasteful? For iPad2, can’t you just use the upscaled assets and downscale them? That way you don’t have to duplicate the assets. [import]uid: 160496 topic_id: 30542 reply_id: 122396[/import]

[CraftyDeano]

Honestly, I haven’t actually tried it this way, I am used to using @2x gfx for iPhone so thought I would do the same for iPad, one of them little things apple does to make life easier for us.

My app is quite minimal on GFX (around 15mb when built and includes iphone/iphone@2x/ipad/ipad@2x gfx) so I haven’t really explored different ways of doing things.

As iPad 3 / iPad are different DPI’s i’m not sure if that would affect things when scaling, but i guess thats where testing comes into it.

Will be interesting to see how other developers approach this? [import]uid: 62706 topic_id: 30542 reply_id: 122406[/import]

[davidJames]

From my understanding, iPhone 3GS and iPad (1 & 2) continue to run the latest iOS versions. Neither of these devices have retina displays. So that’s why we have to continue to make graphics in multiple scales.

Let’s say you had a spritesheet scaled at iPhone 4 resolution. If you try to run that content on devices with less memory you’re probably going to run into an out of memory problem.

So that’s my understanding, we use scales specifically for the earlier devices that do not run on retina displays. I myself asked the same question you’re asking a few months ago. Here’s the thread if you’re interested:

https://developer.coronalabs.com/forum/2012/01/06/minimum-ios-version-43-work#comment-78122
[import]uid: 82194 topic_id: 30542 reply_id: 122411[/import]

[CraftyDeano]

Never even considered the memory aspect.

Just checked and my main background is 648.196 kb while background @2x is 1877.776 kb.

Quite a big difference when you look at large sprite sheets/multiple objects. [import]uid: 62706 topic_id: 30542 reply_id: 122418[/import]

[Omnigeek_Media]

Keep in mind when looking at those file sizes like @CraftyDeano posted, those are the compressed sizes on disk, not the uncompressed texture memory size.

A PNG is a 4 channel graphic (Red, Green, Blue, Alpha). Each screen pixels takes 4 bytes of memory to represent it. 1 byte for Red (0-255), 1 byte for green (0-255), 1 byte for blue (0-255) and one bite for the transparency.

1024 x 768 x 4 = 3,154,944 bytes. But wait there is more…

OpenGL deals with squares and that 1024x768 is actually using 1024x1024 block of memory or 4,194,304 bytes of memory. A retina graphic for a full screen background is using 2048x2048*4 bytes of memory… or 16,777,216 bytes. Now assume you’re on an iPad 1 with 256M of memory and a slow processor. Corona and OpenGL has to resample that image down on the fly. This is resource intensive on the older devices. Its kinder to your app user to use lower res graphics and then let Corona pick up better graphics off of storage to better displays than it is to keep the app size down.
[import]uid: 19626 topic_id: 30542 reply_id: 122442[/import]

[chakorules]

I can’t thank all of you enough for your knowledge. Thank you very much.

So unlike most of you, I am doing Children Books. which have lots of illustrations. Some of which are full backgrounds with images that float on-top of the background.

What I am hearing is, that I should be communicating with the illustrator I am working with to make sure we produce two complete sets of graphics for our Children book apps.

One designed for Retina or HD, and then a second set for iPAD 2. Since it’s a children book, that’s why we are not really targeting iPhone just yet.

I believe @davidJames made a VERY GOOD point…In our children books, we have at-least one if not two sprite sheets per page that is loaded.

I do know the maximum sprite sheet size for iPAD 2 is 2048 x 2048 and for iPAD 3 (retina) is 8192 x 8192 I believe is what the max texture is reporting.

print( system.getInfo( "maxTextureSize" ) )  

So having an HD image or sprite sheet that was larger than 2048 would crash an iPAD 2, so that makes sense to have two sets of art work.

I guess I wanted to confirm it being that seemed to be allot of images we are going to be packing in our children book. Plus images for games possibly later.

Right now we are done coding all the way through page 3, we have ten pages total, and the file size of all images are about 11 MB in size in the folder. So if we extrapolate, we might have about 100 MB in images PLUS…now another set of HD images…whew…children books are image intensive…

Maybe ONE MORE question…

For the image set that is iPAD 2, we are using PNG 24-bit.
Should we be making PNG 32-bit for iPAD 3 (Retina)? Or is 24-bit ok for that as well? [import]uid: 152474 topic_id: 30542 reply_id: 122531[/import]

[CraftyDeano]

I design my app for the iPad and set it to use upscaled assets for retina devices.

Here is my Config.lua. it specifies that any images ending in “@2x” will display on retina devices.

[lua]local targetDevice = ( system.getInfo( “model” ) )

if targetDevice == “iPad” or “iPad Simulator” then
application =
{
content =
{
width = 768,
height = 1024,
scale = “letterbox”,
fps = 60,
antialias = true,
xalign = “center”,
yalign = “center”,
imageSuffix =
{
["@2x"] = 2,
},
},
}[/lua]

Below is a piece of my code that displays an image, if the device is an iPad 3, it will automatically use background@2x.png (in the same directory) and double the display size from 763,1024 to 1526,2048.
[lua]display.newImageRect(“imageipad/background.png”,763,1024)[/lua]

I always make my images in iPad 3 res and downscale them with this application:
http://itunes.apple.com/gb/app/multirezer/id509966500?mt=12 [import]uid: 62706 topic_id: 30542 reply_id: 122390[/import]

[mike470]

“I design my app for the iPad and set it to use upscaled assets for retina devices.”

If I may ask - isn’t that wasteful? For iPad2, can’t you just use the upscaled assets and downscale them? That way you don’t have to duplicate the assets. [import]uid: 160496 topic_id: 30542 reply_id: 122396[/import]

[CraftyDeano]

Honestly, I haven’t actually tried it this way, I am used to using @2x gfx for iPhone so thought I would do the same for iPad, one of them little things apple does to make life easier for us.

My app is quite minimal on GFX (around 15mb when built and includes iphone/iphone@2x/ipad/ipad@2x gfx) so I haven’t really explored different ways of doing things.

As iPad 3 / iPad are different DPI’s i’m not sure if that would affect things when scaling, but i guess thats where testing comes into it.

Will be interesting to see how other developers approach this? [import]uid: 62706 topic_id: 30542 reply_id: 122406[/import]

[davidJames]

From my understanding, iPhone 3GS and iPad (1 & 2) continue to run the latest iOS versions. Neither of these devices have retina displays. So that’s why we have to continue to make graphics in multiple scales.

Let’s say you had a spritesheet scaled at iPhone 4 resolution. If you try to run that content on devices with less memory you’re probably going to run into an out of memory problem.

So that’s my understanding, we use scales specifically for the earlier devices that do not run on retina displays. I myself asked the same question you’re asking a few months ago. Here’s the thread if you’re interested:

https://developer.coronalabs.com/forum/2012/01/06/minimum-ios-version-43-work#comment-78122
[import]uid: 82194 topic_id: 30542 reply_id: 122411[/import]

[CraftyDeano]

Never even considered the memory aspect.

Just checked and my main background is 648.196 kb while background @2x is 1877.776 kb.

Quite a big difference when you look at large sprite sheets/multiple objects. [import]uid: 62706 topic_id: 30542 reply_id: 122418[/import]

[Omnigeek_Media]

Keep in mind when looking at those file sizes like @CraftyDeano posted, those are the compressed sizes on disk, not the uncompressed texture memory size.

A PNG is a 4 channel graphic (Red, Green, Blue, Alpha). Each screen pixels takes 4 bytes of memory to represent it. 1 byte for Red (0-255), 1 byte for green (0-255), 1 byte for blue (0-255) and one bite for the transparency.

1024 x 768 x 4 = 3,154,944 bytes. But wait there is more…

OpenGL deals with squares and that 1024x768 is actually using 1024x1024 block of memory or 4,194,304 bytes of memory. A retina graphic for a full screen background is using 2048x2048*4 bytes of memory… or 16,777,216 bytes. Now assume you’re on an iPad 1 with 256M of memory and a slow processor. Corona and OpenGL has to resample that image down on the fly. This is resource intensive on the older devices. Its kinder to your app user to use lower res graphics and then let Corona pick up better graphics off of storage to better displays than it is to keep the app size down.
[import]uid: 19626 topic_id: 30542 reply_id: 122442[/import]

[chakorules]

I can’t thank all of you enough for your knowledge. Thank you very much.

So unlike most of you, I am doing Children Books. which have lots of illustrations. Some of which are full backgrounds with images that float on-top of the background.

What I am hearing is, that I should be communicating with the illustrator I am working with to make sure we produce two complete sets of graphics for our Children book apps.

One designed for Retina or HD, and then a second set for iPAD 2. Since it’s a children book, that’s why we are not really targeting iPhone just yet.

I believe @davidJames made a VERY GOOD point…In our children books, we have at-least one if not two sprite sheets per page that is loaded.

I do know the maximum sprite sheet size for iPAD 2 is 2048 x 2048 and for iPAD 3 (retina) is 8192 x 8192 I believe is what the max texture is reporting.

print( system.getInfo( "maxTextureSize" ) )  

So having an HD image or sprite sheet that was larger than 2048 would crash an iPAD 2, so that makes sense to have two sets of art work.

I guess I wanted to confirm it being that seemed to be allot of images we are going to be packing in our children book. Plus images for games possibly later.

Right now we are done coding all the way through page 3, we have ten pages total, and the file size of all images are about 11 MB in size in the folder. So if we extrapolate, we might have about 100 MB in images PLUS…now another set of HD images…whew…children books are image intensive…

Maybe ONE MORE question…

For the image set that is iPAD 2, we are using PNG 24-bit.
Should we be making PNG 32-bit for iPAD 3 (Retina)? Or is 24-bit ok for that as well? [import]uid: 152474 topic_id: 30542 reply_id: 122531[/import]