My problems with percentage layouts in Unity

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:

jurdles

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:

globs funny eye

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:

blob image bounding box

Which I also did with the graphic of the eyeball (it’s separate because it’s an animation). Like this:

globs eye

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:

Glob on Tim's 1+1

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. 

flush