So i finished most of my game mechanics and moved onto UI. The problem was Ui scaling tricky. How do I scale the UI so it is how I want where I want it on all platforms. Would love some help on how to fix this. For example…
This is an image of what UI looked liked in studio
This is what It looks like in game
Did you try to anchor it the Gui?
Try to use scaling thing in the properties panel.
There’s a plugin that scales/sizes UI into the size you want it to be, just a click of a button and… BAM!
Make’s it stay in that size/position!
Link: https://www.roblox.com/library/1496745047/AutoScale-GUI
Not Working For Some Reason… Don’t know why.
In UDim2 elements (size and position), the format is (x.Scale, x.Offset, y.Scale, y.Offset)
Offset is specific pixel sizes, and scale is the percent of the size of its parent object.
The shop button has more offset set to its size than the twitter button. If you have objects that are the same size, you’ll want them to have the same scale and same offsets for size. Otherwise on different devices, the scaling will differ.
Overall in my UI design, I mostly use scale because it matches on platforms. I use it with the UISizeConstraint and UIAspectRatio. UISizeConstraint provides bounds on the pixel size, and UIAspectRatio keeps the object a certain ratio all times.
So theres some background on how objects are scaled relative to pixels and screen sizes; best of luck!
Are you sizing it using the offset option or the scale option? If you want to keep a certain aspect ratio then you can use “UIAspectRatio”
This is simple to fix. Just make sure you don’t use offset instead use scale. I will get an example
As you can see, the size is (0,100) for both x and y.
This is a terrible idea since you will have problems as you did on your game.
A way to fix this is to use scale for size AND position. It just requires a little more effort on our part but it helps us in the long run.
This would not be different for any platform then. Of course you need to make sure that position is also a scale. So, if I wanted to put the above example in the middle of this frame, I would have to do
1 - [Scale X(Size of your x axis)] = Edge[How much it requires to go to the edge] to get it in the middle just half it.
Since you are using images you should use “Fit” in most cases to make the image be its original form in the biggest possible size it can be and right in the center.
Hopefully, this long explanation helped you
Message me on discord and I will just do it for you for free IF you run into problems [daffyawesomejeff#0966]
read my above reply it shows how to fix it
Ah, I didn’t see that. My apologies for the inconvenience. Thanks for making it in-depth as well, it contributes to the integrity of the discussion.
If you want better examples message on discord as I am more afraid of posting my work to somewhere I dont check often.
I can send you my recent work with the scales
Rather than separating UI into each ScreenGui, make them into one, they look nicer and may solve the problem you mentioned above.
FYI: You might want to put the shop button and the code button inside a frame and put a UIListLayout inside it, this should help the problem (Remember to set padding as well)
it was probably one of the frames. Sometimes frames don’t appear in certain directions a lot of times. It does this to me a lot.
