So, im working with small UI elements mainly trim around my UI components. I can build the UI perfect for a resolution say 1920x1080. Every element is within the bounds of the ancors and everything looks fine. As soon as the resolution changes, Editor or at runtime, the smaller UI elemtns seem to want to snap to a new position slightly.
This is fine if the whole element did this but for some reason Unity is chaning the size and scale of these componants to fit to that snap.
The video below shows what i mean.
As you can see in the video the UI elements are getting deformed by the changing resolution.
I have been though everything i can find online to setup a good UI system. Ive used canvas scalers, pixel perfect on and off, Built the UI for lower resolutions and higher resolutions, changes the canvas scaler to conant pixel size. The ancors are setup correctly for scaling with resolution change :
I am truley lost on what i can do to fix this. Apart from building a seperate UI for different resolutions which would then make my game limited to set resolutions
Its like, i can build a UI element. But if i shift its posiiton on the canvas the elements will totaly freak out and all be different sizes. Just by chaning the poision of the element on the cavas.
If feels like there is this seceret UI grid that elements are either in our out of.
Anyone out there built small UI elements with unity have any tips?
Thanks for your attention and time!
Steve
Seems like you’re having the effect of layout element width flexible affecting the width of your objects.
But my question is, why would you want to change the resolution slowly in real time? Changing it would cause every item in the canvas to recalculate their recttransforms, since they are based on the canvas.
Also, I would not base the final results on how the game looks in the editor, specially canvas objects, as they go through re-escalation on a custom size, because of that you will see some dirty lost shapes. I’d recommend building it and observing how it looks in an actual full sized environment.
Side-node: I observed you’re creating a rect-like shape with 4 different line objects, I’d strongly suggest using a single image instead with Sliced type. It will be a lot easier to manage on canvas.
Hey FernamdoHC thanks for the help,
I am using Panels, with no image componant just the color for most of the UI design could this be the issue?
On a note on resolution change.The video demo was captureing a build version on windows not in the editor. I really wanted to go for the user being able to scale the game window to their preference as the type of game i am making does not realy need to be played in fullscreen.
So, im guessing changing aspects is the main reason these deforms are happening ?But then again if i change to a different 16:9 resolution i get this effect still.
Thanks!
Oh my bad, I didn’t realize it was on a build.
Even if it’s on a custom size window you still can have the UI as you desire, however, you’d need to put more effort into it for things to look good.
So if the issue you have at the moment is not related to sizes and all you want to change is the speed in which Unity updates the UI while you change the window size I can recommend try calling Canvas.ForceUpdateCanvases()
on the event for screen size value change, or even faster if not enough. Let us know if that helps.
