Ive done most of the steps to try and fix this by using scale on position and size and trying to use ui aspect ratios but none of them will work.
This is how its suspose to look:
But when i turn on the simulation mode this is how it looks:
How can i fix this?
I’m assuming that your using a percent of the screen to set the size of those UI elements.
The reason that they act this way is because when your in studio, you probably have widgets option (explorer, properties, output ect.) Depending on how many of these you have open, it’s gonna change the size of your viewport. The GUI is scaling according to the viewport size when in studio but when you test those widgets go away which increases the screen size in one direction more than the other. This causes the weird scaling.
When designing UI in studio using scaling, keep in mind that it will look differently (usually more stretched) in the game. Also close all widgets and playtest to check if it’s looking good.
Another alternative is using pixels instead of scaling but this obviously…doesn’t scale with the screen so that may not be a good option for you.
Why did I spend so much time on this post lol
Use UIAspectRatioConstraint to make it look same on all resolutions.
Turned all wigets off and make it how i wanted it
How its suspose to look:
How it looks when i use the screen simulation:
Id say not to use it on the background frame, use it on the pic that is supposed to be a square.
I’ve never seen this before but I’ll have to test it out sometime!
It is very useful! I believe you could achieve same effect by changing SizeConstraint in frame properties, but this way is more organized.
When you put it inside the frame that is supposed to be a square like this:
By default it will always make that frame a square:
AspectRatio of 1 is default and its a square:
By changing it to more than 1 or below 1 you can make it other shapes.
Oh i see i was using a plugin to insert them easier and it made it a diffrent number this worked on the gui i wanted square but not the one i wanted rectangular anything i can do to fix that?
To make it a rectangle just set the AspectRatio to above 1.
This is what AspectRatio of 3 looks like.
I found 7 worked well though i had to move it around a little is that gonna be a issue?
Nope! Moving it doesnt change anything. Though if you want both of those elemets to scale together id suggest putting them both inside one bigger frame that also has UIAspectRatioConstraint, since if you change the resolution those 2 shapes will scale differently, like rectangle might start becoming smaller first and then the square.
Something like this, make it transparent and u will have no issues!
Also correction: You dont have to put UIAspectRatioConstraint inside of them if they are inside of another frame with UIAspectRatioConstraint, but its easier to make sure its the shape you want it to be if all of them have it.
Ive turned off all wigets and made it like this in the screen simulation thing:
This is how it looks with all wigets turned off without the screen simulation on:
Is this normal?
Yes since its resizing it looks smaller, if you want it to always stretch from one side to the other no matter the size id say either dont put UIAspectRatioConstraint inside of it or make it so long that no matter how small screen gets its still stretching fully.
Is it needed to fix that though or should i keep it the way it is?
Well that depends on how you want it to look, if you want it to always be stretched from one side to the other id say just make its AspectRatio to like 80 and it should always look like its stretching from one side to the other.
Just put the X Scale of the frame to some bigger number.
