iOS iPhone 4 - Retina Screen Implications

A la iPad screen doubling.

Same physical size = no pixelation.

Just update your app to make it look snazzy.

I got what you were saying, there will be a mixture of vector and non vector elements in your app. But the crucial thing is that since the actual physical screen size remains the same, pixelation won't be there. Rastered images might even look a tiny bit better because there are more points to smooth across.

But yes, you will notice if you looked closer that vector elements will be crisper, and you can only bring other elements up to par by redoing your rastered images. That can't be too much work, right?

The best solution would be to not use pre-rendered buttons. Draw them in-app.

Jof said:

That's not possible; we use a lot of custom classes so we have to make our own. I probably should have mentioned that before.

Click to expand...

Custom classes have no impact on your ability to draw your own buttons using Core Graphics. Or at least using Vector sources for the artwork instead of bitmaps.

Jof said:

I would counter that it would be there. Your eyes might not be able to interpret it as "pixellation" but when viewed on the iPhone 4 hardware you'd definitely notice the difference between a rastered image optimised for iPhone 3(G/GS) DPI and one with 4x the pixels for the new hardware.

It's like when you get badly-scaling icons for OSX apps (particularly non-native ones); the lower icon DPI sticks out like a sore thumb versus the small native ones.

Click to expand...

I didn't totally discount that pixellation wouldn't exist. I acknowledged that in the 2nd part of my post you didn't quote. Pixellation will be hard to see.

The thing that is difficult to grasp is that since there is no easy to reach parallel of the 2x increase in resolution in the new/old iPhone's it is hard to see what the affect of pixellation will have. In other words, you haven't seen what pixellation is like between a screen of 'x' PPI and a screen of '2x' PPI, where 'x' is at least 80.

There are other things that will smooth things out, like anti-aliasing, which also happens on rastered images. The example of the icon scaling doesn't work because the image was enlarged physically. You need to compare two physically identically sized icons on two different PPI screens.

Jof said:

You mean draw them from scratch (highlight, background, text, corners, emboss effects, intent effects...) or is there some sort of half-way house? Cos an approximately-like-the-inbuilt-buttons-but-highly-customisable thing using CG would be ace if it exists.

Click to expand...

Yes, actually that is what I meant. It is possible but will take quite a bit of effort. Which is why I suggested using vector images instead of bitmaps. Draw the various buttons without the text for each state you want. Split into left/middle/right sections (so you can tile the middle to get a button of any width) and save as a vector format that the iPhone can deal with. PDF say (which is, I believe, what Apple do with OSX these days). Load the image sections into your custom UIButton and use instead of the bitmaps to render the image background and render the text as normal. You can use the shadow properties of the text to get indent-like effects (draw the shadow above the text instead of below in a light colour instead of dark).

Jof said:

You mean draw them from scratch (highlight, background, text, corners, emboss effects, intent effects...) or is there some sort of half-way house? Cos an approximately-like-the-inbuilt-buttons-but-highly-customisable thing using CG would be ace if it exists.

Click to expand...

Through the built-in stuff you can programmatically do quite a lot to buttons and other items that isn't obvious from Interface Builder. Recolouring is the main one that's especially useful, but like the original poster I nevertheless now have a bunch of apps with bits of pre-rendered text (especially where branding guidelines have required that we use a particular font that the iPhone doesn't have) and images (usually just as a workflow aid; it's easiest to tell designers just to supply in PNG and drop that in). I guess the immediate steps will be to obtain everything at iPhone 4 resolution and leave the hardware to scale down. Where that creates memory issues I guess we'll need to keep a pre-resampled copy of the image and do some programmatic steps — unless they're going to put something in Interface Builder for this?

My experience is that PDFs are usually slower to draw than bitmap type images. It would probably be better to just scale up the art in your next version than use PDFs or raster formats.

Something I am thinkig about is hardcoded pixel coordinates and developing for both new and older platforms.

rossipoo said:

My experience is that PDFs are usually slower to draw than bitmap type images. It would probably be better to just scale up the art in your next version than use PDFs or raster formats.

Something I am thinkig about is hardcoded pixel coordinates and developing for both new and older platforms.

Click to expand...

You could render the vector images once into an appropriately sized UIImage in memory (taking into account the resolution of the current device) and then use that cached version.

As with anything the best solution from a conceptual point of view has to be tempered by real world performance concerns.