Position relative to edge when scaling the UI

Help & Support
1

What would be the correct way to setup a UI image that I want to always stay a certain amount of pixels away from an edge of the screen?

I have a Blend scale mode with a value of 1, which as far as I understand changes the scaling vertically. The issue is I want to have a certain element away from the right edge, but this edge seems to be off the limits of the rendered area, so in certain aspect ratios the element goes partially out of the screen.

2

Hi @mariogarranz,

You can use the Preset to select side/corner to anchor your element and at the same time change its local position to add some margin. Check how the logo is positioned on the tutorial project below:

image
image1315×779 78.6 KB

Now to have your image always render and not get cropped on the left/right sides, I think setting the scale blend property to 0 will ensure that the screen will always scale in relation with the width of the window (and not the height of the window).

1 Like
3

Thanks a lot Leonidas! You are always very supportive! :slight_smile:

The anchor part I was already using, so I guess I will check the horizontalFov setting and try to make it work. Does it also apply to the UI? I would expect the camera FoV to apply to the rendering of the 3D scene only.

4

You are right I was mistaken, it won’t affect 2D screens. For that purpose you switch from 1 to 0 the scale blend property.

I’ve updated my answer above, thanks for correcting me!

1 Like
5

OK thanks.

I guess if I do that I will then have issues with the elements I want to stick to the top and bottom edges, right?

So essentially I need to code my own resizing logic to achieve this effect on any edge?

6

I’m surprised that anchoring doesn’t keep it fixed from an edge during resizing. Would it be possible to show a gif on how it’s going wrong?

1 Like
7

You’re absolutely right yaustar. I created an empty project to show you the issue and it worked fine there.

I double checked my project and I think the issue is that the elements anchored relative to the edges need to be direct children of the 2D Screen, mine were children of an empty container that was centered, therefore its width was always the same even if the screen was scaled.

1 Like