Anchoring on-screen buttons

Studio
#1

Hello. I want on-screen buttons to be anchored at the top of the screen and at the bottom of the screen so that no matter the screen size the buttons are always in the right position. I’m used to Unity’s anchor points and canvas scaler, which would positions things dynamically depending on screen size.

Right now I have some buttons that are cropped out or can’t be seen at all. A user on here explained to me I could use groups and RelativeTo to anchor them accordingly but I’m still needing to reposition them according to aspect ratio and it’s not as dynamic as I’d hoped… OR I’m just a big NOOB that I’m not using the groups and RelativeTo correctly (if that’s all that’s needed and no scripting).

#2

Not easy, is it :slight_smile:

I need to anchor stuff to top and bottom of the screen, too - a title at the top, a call-to-action button at the bottom, and it’s going to be quite a complex process. We have all the tools we need: we can find out the screen aspect ratio, we can trigger a script when the orientation changes and/or when the device resizes the screen. We can even calculate the camera’s focal length (useful in my case - I want to have our title graphic start on the target image, then smoothly fly up and lock to the phone screen)

The hard part (at least for me) isn’t the code, so much as deciding artistically what the logic should be when a user has their phone in landscape mode. Newer iPhones in landscape mode lose a third or more of their screen height to browser tabs and address bar stuff, leaving you with a really thin but wide strip of canvas to play with.

I don’t think it’s possible to have the same set of UI stuff fit both of these:

37

59

… at least, not just by repositioning and rescaling the same “block” of UI. And these are extremes of wide and tall, but iPad users have much squarer canvasses to play with, whether in landscape or portrait layout.

I suspect I’m going to have to do some convoluted “if the aspect ratio is very wide, have my buttons in one row, but if it’s very tall and thin, have my buttons in two rows, and if it’s more square, scale it a bit differently” kinda logic.

Not an easy problem to sort out.

That said, your cropping issue is something we ought to be able fix. It’s really hard to diagnose what your particular problem is, as there are lots of interrelated settings and whatnot, and trying to describe (in crappy ole’ English words) how your hierarchy of things should be is tough and error-prone.

If I have time later I’ll try and set up an example project, but you could always pop your project up here for us to see (or put it somewhere private and PM me a link if it’s sensitive)

2 Likes
#3

Thank you so much. so helpful. :sob: yeah cropped out cause of positioning.

#4

It’s been a pain for me at times as well.
That’s why unless I need to I only set things for one view.

Steve
Ps. I love your button dock :wink:

1 Like
#5

Ah… so it’s not so straightforward. I mentioned to howiemnet before that im currently using if…else statements to compare aspect ratio values and position them accordingly.

#6

anchor_to_bottom.zpp (188.0 KB)

This is a bare-bones example of how to position things so they’re always locked to the bottom edge of the screen, no matter how you hold your phone. The text should never look clipped.

No scripting involved.

If you flick through the orientation States, you can see what I’ve done: for landscape, the group is set relativeTo Z.screen, and rotated 90° one way or the other; it’s positioned at either [0,1,0] or [0,-1,0] depending on inversion.

For portrait, the relativeTo is set to Z.screenRight instead, and the position is set to [0,0,0].

All this combined means you end up with a Group that always sits the correct way up, and is always perfectly centred right on the edge of the screen. Select the “group_fixed_to_bottom_edge” and flick through the orientations to see. Make sure you have a transform handle visible (the S R P buttons above the viewport) - that’ll show you where the group’s origin is.

You can put anything you like into that group, and as long as you make sure you put them above the group’s origin (like the plane and text), they’ll never end up getting their bottoms clipped (!)

This isn’t exactly a complete solution - you may need to do a bit of scripting to scale that “group_fixed_to_bottom_edge” up or down so it fills the space a bit better horizontally, or you could swap in a different set of UI stuff for wider views. But it’s a start eh

2 Likes
#7

@howiemnet thank you so much for sharing. I did do the RelativeTo wrong. eheh…