Drawing Retina sized graphics on older devices

iOS
1

Hi all,

My app graphically isn’t very intensive. Instead of creating x2 pngs for everything (making the file size bigger), I want to create retina sized graphics and draw natively on retina devices, but draw those same graphics at a smaller scale for older devices in code (rather than two files).

I know in OF you can do
iOSWindow->enableAntiAliasing(4);

But that only seems to effect lines/circles drawn in openGL, not pngs.

At the moment I am just doing:

  
  
if(!useRetina){  
  ofPushMatrix();  
  ofScale( 0.5, 0.5, 0.5 );  
}  
  
// draw everything  
  
if(!useRetina) ofPopMatrix();

This works of course, but pngs with thin lines look a bit jagged.

Do you have any suggetions as to how I could improve this (in code)? bilinear filtering or nearest neighbour?

Anyone done anything like this?

Thanks

2

Just wanted to reply to myself in case anyone is looking for this in a search.

For me the scale now works as described, I just needed to make sure image size dimensions are of an even size, i.e. 320x240 instead of odd 319x243, that seems to solve their weird look on the images drawn at half scale.

3

Hey Chris, do you know which is the way to show. png in retina display on 4 or 4s devices? i’m trying to load 320 x 480 px .png images but the result isn’t good.

Thanks

4

Can you be more specific as to the issue you are having? Maybe post some code.

5

Guts, in main.mm you need to add:

  
    ofAppiPhoneWindow * iOSWindow = new ofAppiPhoneWindow();    
    iOSWindow->enableAntiAliasing(4);    
    iOSWindow->enableRetinaSupport();        
    ofSetupOpenGL(iOSWindow, 480, 320, OF_FULLSCREEN);        
    ofRunApp(new testApp);

This sets up the retina enabling.

In my code, I use:

  
//if retina display  
	if([[UIScreen mainScreen] respondsToSelector:@selector(scale)] == YES &&  
	   [[UIScreen mainScreen] scale] == 2.00){  
		  
		generatorImage = "images/circle@2x.png";  
		receptorImage = "images/smallcircle@2x.png";  
		pulseImage = "images/pulse@2x.png";  
                  
                screenScale = 2;  
	}	  
	else{			  
		generatorImage = "images/circle.png";  
		receptorImage = "images/smallcircle.png";  
		pulseImage = "images/pulse.png";	  
  
               screenScale = 1;  
	}

and pass the string into loadImage when it needs to load.

6

Thanks Chris and Seth

i’m loading some images in sequence through DIR.listDir , i’m using png files at 320 x 480

on setup:

  
  
nImages = DIR.listDir("images/of_logos/");  
      
 	images = new ofImage[nImages];  
    //you can now iterate through the files as you like  
      
    for(int i = 0; i < nImages; i++){  
		images[i].loadImage(DIR.getPath(i));  
    }  
    currentImage = 1;

and i’m drawing the images:

  
 if (nImages > 0){  
        images[currentImage].draw(0, 0,  images[currentImage].width,  images[currentImage].height);  
          
    }

i’m using the correct file size? or i need to use 2x images sizes?

7

Chris’ method used higher resolution images that were down scaled (drawn at half scale). If you want to see 320 x 480 on retina, you need to make a 640 x 960 image (double the resolution).

You have 2 options. Make a ‘double resolution’ image and draw it half the size when it’s on a non-retina screen OR make 2 images - one at 640 x 960 and one at 320 x 480 and load the right one based on if the screen is retina or not (which you can see in my earlier post).

Right now you’re drawing a low res image for retina screens. It also sounds like you may not have that right code in your ‘main.mm’ file which I posted above. If you have retina enabled and draw a 320 x 480 image, it should only cover half the screen.

8

Thanks Seth, everything works fine in new devices using your code in main.mm and resizing of images.