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
UIAspectRatioConstraint to make it look same on all resolutions.
This is what it looks like.
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.
This is how it looks by not using it on the background frame.
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.
If i make it 80 though the height gets smaller see:
Just put the X Scale of the frame to some bigger number.