iPhone 4 - Retina Screen Implications

Discussion in 'iOS Programming' started by Jof, Jun 8, 2010.

  1. Jof macrumors regular

    Joined:
    Oct 2, 2008
    #1
    In some of our apps some buttons are pre-rendered (including the text) and some are native... so I'm thinking "This will look a bit odd on the iPhone 4". How are other devs thinking about solving this? Are you going to build iPhone 4 and "not iPhone 4" versions to take advantage of the screen and avoid things looking odd? Or are you just going to ignore it?

    Would love to know your thoughts.
     
  2. sammich macrumors 601

    sammich

    Joined:
    Sep 26, 2006
    Location:
    Sarcasmville.
    #2
    A la iPad screen doubling.

    Same physical size = no pixelation.

    Just update your app to make it look snazzy.
     
  3. Jof thread starter macrumors regular

    Joined:
    Oct 2, 2008
    #3
    You might be missing my point - not sure. Old apps built for previous iPhones will have a MIX of pixelated screen-doubled icons and very smoothly rendered native ones if they use any pre-rendered buttons. It's the mix that looks rubbish.

    Most likely, what we'll do (without speaking to our devs, who are busy doing stuff other than typing on macrumors forums! lol) is re-export all creative a 2x the res for iPhone 4 hardware and let the earlier models down-size automatically as they do with images anyway.

    Either than or there will be something we can do with the nib files...
     
  4. sammich macrumors 601

    sammich

    Joined:
    Sep 26, 2006
    Location:
    Sarcasmville.
    #4
    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?
     
  5. robbieduncan Moderator emeritus

    robbieduncan

    Joined:
    Jul 24, 2002
    Location:
    London
    #5
    The best solution would be to not use pre-rendered buttons. Draw them in-app.
     
  6. Jof thread starter macrumors regular

    Joined:
    Oct 2, 2008
    #6
    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.
     
  7. robbieduncan Moderator emeritus

    robbieduncan

    Joined:
    Jul 24, 2002
    Location:
    London
    #7
    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.
     
  8. Jof thread starter macrumors regular

    Joined:
    Oct 2, 2008
    #8
    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.
     
  9. sammich macrumors 601

    sammich

    Joined:
    Sep 26, 2006
    Location:
    Sarcasmville.
    #9
    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.
     
  10. Jof thread starter macrumors regular

    Joined:
    Oct 2, 2008
    #10
    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.
     
  11. robbieduncan Moderator emeritus

    robbieduncan

    Joined:
    Jul 24, 2002
    Location:
    London
    #11
    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).
     
  12. Thomas Harte macrumors 6502

    Joined:
    Nov 30, 2005
    #12
    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?
     
  13. rossipoo macrumors regular

    Joined:
    Jun 7, 2009
    #13
    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.
     
  14. robbieduncan Moderator emeritus

    robbieduncan

    Joined:
    Jul 24, 2002
    Location:
    London
    #14
    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.
     
  15. Jof thread starter macrumors regular

    Joined:
    Oct 2, 2008
    #15
    Not all of our button images are vectors though - some are rasters - but that's a generally sensible approach, thx. I'll put it to the team :)
     

Share This Page