In my latest app (mostly just to test interface, and the experience of the Google app store) I’m having problems scaling an image based on a percentage of the screen.
Not all phones have the same resolution or aspect ratio
This is obvious right? So I wanted my interface to scale to all types of aspect ratios. Here’s what I wanted it to look like:
So to test, I’ve been creating a build and emailing to myself to open on my phone (Nexus 5). And what I found was that Glob’s eyeball was being scaled a bit too big:
I’m not actually sure why this is happening because I thought I’d got this figured out. The bounding box that Unity allows you to draw around each item for scaling, I thought was best to be the same as the image boundary. Like this:
Which I also did with the graphic of the eyeball (it’s separate because it’s an animation). Like this:
I made it super wide so it can scale (maybe this is the problem? Not sure, but it seemed to help when I tried the first time).
The above approach looks great in any aspect ratio I can create in the editor. I’ve tried all the example default resolutions and tried a few more but it always looks good. But on a phone… not so much.
I also tried this on a friend’s phone (a Google 1+1) with a much larger resolution screen, and that looks even weirder:
Look at that eyeball!! Not sure why it’s scaled even larger than the other image. Also the text is tiny. It’s supposed to scale to fit the area but hasn’t Perhaps because I set a max size?
I’m continuing to play with this, I uploaded to the Google play store (I wrote about that here) and if you’re interested, you can download it here (currently in Alpha):
https://play.google.com/apps/testing/com.DavidDickBall.Glob
EDIT – I think I’ve solved this but not quite sure. I think the problem was the anchors not being exactly flush with the image boundaries, causing scaling differences. I’ve made it more exact, as well as nesting the eye inside the body graphic (why not really), and it seems to work ok now, but needs just a bit more testing.
