UI Elements not scaling correctly on build, even with anchors in place.

Unity Engine
,
1

I’ve setup a small UI Menu with elements and what-not. The elements placed in the editor are misplaced when I build the project and I’ve tried different anchors, from the corner anchor to stretch anchors. I’ve looked through tons of forums, yet to find no solution.

8471609--1125791--upload_2022-9-28_16-37-49.png
8471609--1125791--upload_2022-9-28_16-37-49.png906×370 144 KB

8471609--1125794--upload_2022-9-28_16-38-2.png
8471609--1125794--upload_2022-9-28_16-38-2.png897×378 153 KB

8471609--1125797--upload_2022-9-28_16-38-12.png
8471609--1125797--upload_2022-9-28_16-38-12.png899×385 155 KB

Above are the three button elements.

  • The top button is anchored to the top left, the same for its pivot.
  • The middle button is anchored to the middle, the same for its pivot.
  • The bottom button is anchored to stretch to all sides, the pivot is set to the middle.

I’ve tried everything I could think of with anchoring and all that, it still gave the same result.
All of the elements were out of place when built, as shown in the image below.

8471609--1125806--upload_2022-9-28_16-43-59.jpg
8471609--1125806--upload_2022-9-28_16-43-59.jpg1896×1025 151 KB

The canvas scaler is set to constant pixel size, as “scale with screen size” uses a fixed reference resolution and that doesn’t go well when I’m trying to make the resolution dynamic.

[UI Canvas - Album on Imgur] - Canvas Properties

  • Thanks in advanced

8471609--1125803--upload_2022-9-28_16-41-19.png

1 Like
2

The attatched upload at the bottom is the anchor point for the bottom button element on the UI.

3

Here’s the dedicated UI forum for this stuff. I’ll move your post for you.

1 Like
4

Thank you

5

It was a long process, but this is solved. I can’t not give credit, so here it is: @ , borderline games, discord.

The problem was multiple things and lot of them at that:

  • I was not using “scale with screen” on canvas because I thought the “reference resolution” was static, but it was just as it said, a “reference”.

  • Match, on canvas should of been 0.5 to balance it out, it was set to zero before.

  • I was using EmptyObjects as containers for my ui elements, I should of used Panels instead, Panels are like divs in html if you know web development.

  • My elements were scaled wrong ( IN TWO WAYS! ). It’s hard to explain this one.

  • Overall, my ui was not what you’d call “responsive”, so it didn’t even scale with the screen.

PS: I hate the number 5 for an unknown reason. I JUST HATE IT.

I hope this helped even one person with the same problem(s) as me. Crjase OUT-

1 Like
6

Hi my circle ui changed to oval how to keep that in 1:1 ratio I mean how to keep that ui Always in square format