How are people working with non-retina/retina?

In OF, when retina is turned on, the ofGetHeight and ofGetWidth are in retina size. However, in UIKit sizes are always the same because retina isn’t necessarily more pixels to work with, but more density (from my understanding). On Android, this is also the case. The height/width in pixels is the same for devices, but the ‘density’ value will change. I imagine this is how OF should also handle it.

Since OF gives a retina iphone 640 x 960 and non-retina 320 x 480 it’s hard to program positions and sizes of objects because you have to write code twice (one for each case). Wouldn’t it make sense to operate more like UIKit and Android where a retina phone and non-retina phone would both show 320 x 480, but the ofxiPhoneGetDensity would = 2 for retina and = 1 for non-retina.

This way positions of objects on screen only need to be written once.

How are people currently handling this? I’d love to avoid having to go through all my code and divide or multiply my positions to work on both retina and non-retina devices.

I’m basically handling it like you describe - I have a scaleFactor that I apply to everything, and some startup logic to calculate it depending on what device I’m running on. Yeah, it’s a mess :slight_smile:

Yeah, that’s what I figured and also how I handle it in NodeBeat.

But, after thinking about it, I see no reason that OF should be using retina sizes pixels since. I don’t see the case where it’s necessary and clearly Apple doesn’t either since they don’t use that coordinate system in UIKit.

Am I crazy thinking we should probably move the coordinate system back to non-density pixels?

Looks like this is already being discussed here, but many months old: https://github.com/openframeworks/openFrameworks/issues/1379

I’ve made an example for this a while ago…
http://forum.openframeworks.cc/t/universal-app-example./10770/0

in that example I use one ofScale inside draw once
then draw everything for the normal non retina settings (320x480)
and then mapped mouseXY and ofGetwidth…
I also extended the the ofImage to load the retina images according to each device

This was the best solution I could came up with…

I agree with Seth it’s better if it’s done internally
since we are giving a signal to OF in the main.mm by calling ofAppiPhoneWindow::enableRetinaSupport()
we can calculate the density based on the type of the device internally and let OF use that value behind the scenes…

I’m now using a combination of:

https://github.com/armadillu/ofxEasyRetina
https://github.com/armadillu/ofxRetinaTrueTypeFont - to fix fonts

Both of these have made it relatively simple now. All coordinates are in non-retina size and it’ll draw correctly for retina. The only other thing that could potentially be extended is ofImage which would still need to load double image size but scale to half on retina.

I actually modified the ofImage to automatically load retina + hd assets when available… not that complicated

Nice! I’d love to see how you did it and maybe turn it into an addon until it can get in the core.

here is a link of the example:
http://www.2shared.com/file/gXDdyHQv/uofImageExample.html

run it with all simulators to see that it loads different image for each device.

look inside the data folder.

I have image.png for normal retina, (iphone3gs, iphone4,ipod and first gen ipad)
I have image_3g.png for non retina iphones
and I have image_hd.png for retina ipad

so if instead of ofImage you use the alternative in the example, all you need to do is put the right assets in the data folder and it will load the file, if you don’t put the files then it loads the normal images…

Thanks! That’ll be helpful. Maybe I’ll override the draw function for ofImage too so the images are automatically scaled correctly when drawn (like how ofxRetinaTrueTypeFont does it).

Thanks again!