images on retina look blured

im using the simulator if that affects anything.

please tell me if I’m doing this wrong. i have a round image thats 600x600 that draws fine on an iphone resolution of 320x480. if i switch to retina with the 2x resolution of 640x960 (but with the screen dimensions as 320x480) the image gets scaled up. This threw me for a bit but then realised its because of the screen dimension, so I scaled it down by 2x by using image.draw(x,y,300,300) which draws the image with the correct screen dimensions, but the image is very blurry. see the pics.

and also, whilst deploying to a retina resolution, [[UIScreen mainScreen] scale]; will be 2, but retinaEnabled sent in - (id) initWithFrame: will be false, why is that?

![]( Shot 2012-10-21 at 21.38.02.png)

![]( Shot 2012-10-21 at 21.41.35.png)

Selecting just the retina simulator from the settings of the iosSimulator is not good enough

yes Images don’t always a appear 100% correctly on the simulators.
but what you are trying to do looks fine on my simulators and it should look the same in yours as well (if you did it correctly):

This is an example of a non retina screen loading an image with dimensions 400x400 and drawing it using .draw(0,0) without specifying dimensions or scaling it up:

retina screen loading an image with dimensions 800x800 and drawing it using draw(0,0) without specifying dimensions or scaling thins up or down:

actual image :

what do you mean by

“retina with the 2x resolution of 640x960(but with the screen dimensions as 320x480)”

? my simulator is a gigantic 640x960 ipadish looking simulator. is your laptop screen a retina screen?

it seems to me that you are unawarely using the non-retina , “retina” simulator, that has 640x960 size but 480x320resolution and you paste a 600x600 image scaling it down by drawing it to a pixel area of 300x300 . and then the simulator scales a blurred 300x300 image up to 600x600 . you are not pasting a 600x600 to a 640x960 area you are pasting at a 480x320 area that is then scaled up to 640x960 size by the non retina retina simulator

that was the only way I could recreate something similar to what you did

if you load a 600x600 and you paste it 300x300 it appears like that on the non retina simulator. and on the nonretina-retina it will appear like that scaled up by 2. like in your case.

non retina iphone is the simulator that runs on 480x320 resolution and 480x320size
retina simulator is the simulator that runs on 640x960 resolution and 640x960 size.
nontretina -retina simulator is the simulator that runs on 480x320 resolution but has a 640x960 size

the last two are the same simulator but I separated them here for you to make a point.

if you load a 600x600 image draw it on a 300x300 in a retina enabled area and then you scale it up using of scale by 2 to fit the 640x960 retina area then you are actually drawing it to the normal size and it appears fine even on the simulators. on the device it appears perfect.
but if you load a 600x600 shrink it to 300x300 to fit a 320x480 resolution area and then scale the blurry image up to a 640x960 size (not resolution) then it will appear exactly like that. pixelated and blurry

… note that if you don’t actually include an image Default@2x on the data folder and you don’t setup the code in the file to detect a retina screen your simulator and the device will run a standard 320x480 non retina window. the standard OF empty_example is not running on a retina screen you have to setup the project on x-code like I showed you on the example.
to test if you are using a true retina screen use the ofGetWidth() or ofGetScreenWidth() method provided by openFrameworks library to see what it returns. if it returns 960 it means that is retina if it’s 480 then you are actually running on a non retina resolution, therefore images will appear blurry.

just because you selected retina in the simulator it doesn’t mean that your code is “retina enabled”.

For example here is a situation where I commented out enableRetinaSupport() from the
in both cases I draw the same image. but in one case the simulator is scaling up everything drawing a 320x480 image into a 640x960 pixel area. on the other case it draws the images correctly in the right resolution. If I loaded an hd image for the second case it would appear nice and sharp. If I loaded an hd (retina image) in the first case it would appear double the size if I scaled it down to fit the screen size it would appear not just blurred but pixelated and blurred.

printing ofgetWidth() int using a ofDrawbitmapString() function it shows that it returns 480 in the first case and 960 on the second case.

imagine you take a 600x600 image, you shrink it down to 300x300 pixel area making it to appear pixelated like that then the simulator scales the whole pixelated thing up to a fake retina screen and that is why your images appear so messed up.

by the way… you shouldn’t really load your images inside draw (that is not why they are pixelated but you should load everything once, like inside the setup function per say.

in the following screen shot I recreated all 4 possible scenarios.

in the first case, it’s loading a 600x600 img drawing it 300x300 in a non retina enabled 320x480 window

second case is loading a 600x600 img drawing it in 299x299 in a retina enabled 640x960 window and scaling it up by2

third case is is loading a 600x600 img drawing it in 300x300 in a retina enabled 640x960 window and scaling it up by2

forth case is is loading a 600x600 img drawing it in 600x600 in a retina enabled 640x960 window and not scaling it up

case 2-3-4 will appear nice hd and crisp on the actual device even though case 2 will appear slightly pixelated in the simulator because of the aspect ratio change. on the device they appear the same.

case 1 will appear blurry and pixelated both in the simulator and the device.

you should not confuse ofScale() function with zoom or scale in photoshop here you are multiplying all pixels by the number you set on the function. This is the reason why it can be used in our case. it’s not doing digital zoom of the gl window like the simulator does. it multiplies within the code the values thus enabling us to draw the retina image in a retina window. :-[

haha, again, awesome post. thanks.

yes it seems the problem is im getting the fake retina simulator. i assumed with a retina screen the resolution was double but the screen dimensions stayed the same. just got a bit confused i suppose.

im on a 2010 macbook pro so no retina display here. ill try setting up my project as you mejtion to see if i can get a true retina simulation.

so i added this in

ofAppiPhoneWindow * iOSWindow = new ofAppiPhoneWindow();

now i get
retinaEnabled in - (id) initWithFrame: set as true, awesome, scale is still 2, awesome. i get a display area in the simulator that looks 640x960, and my 600x600 image is getting displayed in its exact resolution.

just 2 things are still weird, ofgetwidth and height are still showing as 320x480 and this is what it looks like

![]( Shot 2012-10-22 at 21.44.52.png)

something else to point out. i added my green ball picture to your uimage example and made a call to ofwidth and ofheight. in the iphone retina 3.5 inch (as with the image above) im getting 320x480 returned as opposed to the 640x960 as it should be. but this time need to scale the image down to display it at its screen dimensions as with the first iage i posted, but this time it wont be blurred after doing so.

![]( Shot 2012-10-22 at 22.14.51.png)

oh wait, i see you’ve overrided ofgetheight and width to return the standard resolution. if i comment out that then i get what i expect.

ok in summary i understand your project and the way retina works. what i dont understand is how to transfer your settings to my own project to get the retina display displaying correctly. is

ofAppiPhoneWindow * iOSWindow = new ofAppiPhoneWindow();

not enough?

1 Like

got it, i hadnt added the iOSWindow to ofSetupOpenGL(iOSWindow, 640,960, OF_FULLSCREEN);

all working now, cheers mate. woo hoo!

1 Like

glad that everything worked out well.
I tested case-one on a physical device with a non retina display… it doesn’t look as bad as on the simulator. but on a retina device it looks blurry. *as expected. So case 2-3-4 are the way to go.

setting up x-code project is not just the code part, it’s a good thing you finally got it right but when you are going to archive your app to publish it on the app store you are going to encounter more problems.

I don’t know how the new openFrameworks iphone examples are setup but in my case you have to change the deployment from iphone to universal add all those icons that I have on the universal example, if you don’t have them in the binary the project will be rejected, and it’s not good enough just to have them in the data file. you will have to modify the plist file like I did in the example. don’t just copy paste one plist file with another it won’t work, you need to modify it accordingly and add the icons. and you can’t just add the icons by dragging them in either. (you can but you will brake all the directories and make your app’size double) you have to do it by the plist file. google add icons to iphone project for more information…

also your project will fail when you will try to archive it the first time if you haven’t ticked an option in the x-code build settings about the way statics libraries are compiled.(like OF) so you will have to tick that box. *I am not sure if I ticked that on my example either…