Font & Image sizes

[Rick]

I'm a little confused. I've read the iPhone 5 resolution is 1136x639. However on the iPhone simulator my heart images (which are 64x64) are massive and extend into the playing field, and the font (which I use 20) all runs together on the top. If the resolution is really that big I wouldn't think this would happen.

 

This is generally why I like 3D interfaces so that it all scales automatically for you, but what is the best way to handle the font size and 2D image size? I almost think I need to know if I'm on a phone vs pad. Is there a way to tell this? Most phones are the same size and so I can set the font & heart image size accordingly and it'll look decent and close enough on all phones.

[Josh]

On retina devices, Leadwerks renders to a half-resolution buffer by default. You can disable this in ViewController.mm:

//Comment this line out to support native resolution for retina displays:
   view.contentScaleFactor = 1.0;

[Rick]

What's the risk in doing this? Why do you do this? Just want to know the reasons behind it to avoid any possible issues on other phones. Ideally getting into the native code of these devices would be avoided as I assume on every publish it would overwrite any changes we make and would have to remember to make them each time? Maybe this could be exposed to LE so we can control it there? Maybe some IsRetinaDevice() and SetContentScaleFactor() or something?

 

I'll give it a shot to see what the results are but this makes me nervous.

[Rick]

The simulator looks like it's more 480x320 (iPhone 3) resolution. When I put that res in my game and run it on PC/Mac the interface looks more like how it does when I run it on the simulator. So for me this leads to 2 questions.

 

1) For older iPhones & Androids with such high resolution what would be the best way to check for any and all variations of these high resolutions? Checking width/height might be error prone with possibly not knowing all possible resolutions by all these devices (Android in particular).

 

2) Is there a way to simulate different versions of iPhones from xcode?

[edit] http://stackoverflow...ay-on-simulator but if I comment out the line you mention above, the touching/clicking doesn't work. I don't think the issue is retina displays. Those seems just fine and that line is just fine. It's the older higher resolution devices. My iPad device that I tested on is a retina display and it looks just fine.

[Rick]

OK, here is the problem. With iPhone retina displays if I comment out the line you have the graphics look great BUT the touching/clicking doesn't work. I can't get to the game screen to see what the result is of the font and heart images. If I leave that line UNcommented, the clicking works but the graphics look horrible and the hearts and fonts are too big but only on retina displays. So why does that line even exist? To me it seems like it shouldn't, but then you have to fix the input touching/clicking as it breaks without that line. Also, as far as I know we can't make different builds based on retina/non-retina so how did you picture this working?

 

Why is that line even in there? On on retina displays (in the simulator anyway) if it's uncommented I don't see a difference in graphics quality).

[Rick]

So I guess I'm back to this original question. Commenting out that line doesn't seem to be an option because of the degraded graphics is creates. So there must be a decent/reliable way to know we are on a phone vs pad? That's all I really need to know so I can just pick a font size that will look decent on all phones and resize my hearts to 32x32 which I'm thinking will work decent on all phones too.

[Josh]

THat line of code will force retina displays to render at the non-retina resolution, so for example the iPad 3 and 4 will match the iPad 2.

 

I have not tried touches with the retina resolution, so I can't say. Sounds like I need to test that.

 

You have found one of the biggest challenges 2D developers face. Even if you were to make your fonts a percentage of screen space, that still doesn't guarantee they will be visible on lower resolution screens.

 

I would pick an arbitrary resolution. Above that resolution, use a smaller font, below it use a larger font. Remember, your Android resolutions will be all over the place, so it's not just iPhone / iPad.

[Rick]

I don't think picking an arbitrary resolution and deciding on that will work. The iPhone 5 resolution is lower than the iPad 3, yet the 2D images look fine on the iPad and not fine on the iPhone. It's almost like there are 2 resolutions. 1 for the physical device screen and 1 for the stuff we draw on (virtual), and 3D drawing works on the virtual fine, but the 2D drawing uses the physical device screen. I mean if the iPhone 5 resolution is 1136 x 64, then my heart 64x64 image should not be drawn as big as it is.

 

I'm going to try and get the hearts on a plane and use Unproject() to position the 3D plane always in the top left corner. This is why I did 3D UI for everything else

 

This still has the font issue though...