Developing for Retina and non-retina displays OpenGL ES

Question

I am looking for advice before getting too deep into my next project. I would like to support all the various resolutions now supporting by iOS (retina, non-retina iPhones, and all 3 iPads).

What is the most common way developers are getting this done? I have seen similar questions asked but on a specific nature. I am looking for the complete package. IE. I would like to support different resolution bitmap fonts, images, etc.

Is the device specific switch, or if statements standard?

Thanks for all the help in advanced.

E

Edit: I have found this from Apple:

Blockquote If your application uses OpenGL ES for rendering, your existing drawing code should continue to work without any changes. When drawn on a high-resolution screen, though, your content is scaled accordingly and will appear more blocky. The reason for the blocky appearance is that the default behavior of the CAEAGLLayer class, which you use to back your OpenGL ES renderbuffers , is the same as other Core Animation layer objects. In other words, its scale factor is set to 1.0 initially, which causes the Core Animation compositor to scale the contents of the layer on high-resolution screens. To avoid this blocky appearance, you need to increase the size of your OpenGL ES renderbuffers to match the size of the screen. (With more pixels, you can then increase the amount of detail you provide for your content.) Because adding more pixels to your renderbuffers has performance implications, though, you must explicitly opt in to support high-resolution screens.

Blockquote To enable high-resolution drawing, you must change the scale factor of the view you use to present your OpenGL ES content. Changing the contentScaleFactor property of your view from 1.0 to 2.0 triggers a matching change to the scale factor of the underlying CAEAGLLayer object. The renderbufferStorage:fromDrawable: method, which you use to bind the layer object to your renderbuffers, calculates the size of the renderbuffer by multiplying the layer’s bounds by its scale factor. Thus, doubling the scale factor doubles the width and height of the resulting renderbuffer, giving you more pixels for your content. After that, it is up to you to provide the content for those additional pixels.

So I guess my updated question is how do I double the scale factor described above?

Edit 2:

I am almost there...

I am using this to scale inside my EAGLView:

        // Adjust for retina displays
    if ([self respondsToSelector:@selector(setContentScaleFactor:)])
    {
            self.contentScaleFactor = [[UIScreen mainScreen] scale];
    }

The only problem that now remains is the origin is somehow messed up. Display images now scale according to the resolution, but on the larger resolution the image starts in the middle of the screen.

Please help!

Edit 3: Solved!!!! I was experiencing the problems in my orientation.

You need to make sure your translate is updated. I used this:

    glTranslatef( width / 2, height /2, 0);
glRotatef(-90, 0, 0, 1);
glTranslatef(-1 * (height / 2),-1 * (width / 2),0);

Thanks for the looks. I hope this helps someone.

Answer 1

See the view programming guide: View Geometry and Coordinate Systems

http://developer.apple.com/library/ios/#DOCUMENTATION/WindowsViews/Conceptual/ViewPG_iPhoneOS/WindowsandViews/WindowsandViews.html

Coordinate values are represented using floating-point numbers, which allow for precise layout and positioning of content regardless of the underlying screen resolution

That means that the point you specify (GCRect etc...) is not pixels - it's a point which is adjusted for retina/non-retina

Finally as Cocoa Priest noted, you can maintain png images and *@2x.png version of your images:

Retina Display Images on iPhone

What is the point of the @2x for Retina display apps?

Also, here's an article on designing for retina: http://globalmoxie.com/blog/designing-for-iphone4-retina-display.shtml