Retina display image quality problem

Question

I was trying to make my OPENGL ES app to support for retina display. I've added the image with @2x extension and made the contentscale factor to 2. The high resolution image is coming in the screen correctly but it suffers great loss of quality. The edges and blurred and it doesn't have quality of image I added into the resource folder.

How can I fix this?

Answer 1

My app is based on the default framework and I was getting this issue when running on a Retina based device. Specifically my framebuffer was being created at 320x480 rather than 640x960 as I wanted. Sorry James but this is NOT automatic because the problem is with the framebuffer created by renderBufferStorage:fromDrawable: (which calls glRenderbufferStorage on our behalf but specifies layout pixels rather than native device pixels for width and height by default).

I added the following code below line lines which set eaglLayer.drawableProperties in initWithCoder: in EAGLView.m:

UIScreen *mainScreen = [UIScreen mainScreen];
if ([mainScreen respondsToSelector:@selector(scale)])
{
    // iOS 4.0 and up (further to simeon's comment)
    const CGFloat scale = mainScreen.scale;
    self.contentScaleFactor = scale;
    eaglLayer.contentsScale = scale;
}

Thanks to David Amador's post for pointing me in the right direction. Thanks, more recently, to simeon's helpful comments.

Answer 2

In your EAGLView.m initWithCoder: method, add the following code:

if( [[UIScreen mainScreen] respondsToSelector:@selector(scale)] )
{
    self.contentScaleFactor = [[UIScreen mainScreen] scale];   
}