Hi I was wondering if someone who’s good at the UIs/Guis part of roblox can help me. I’m learning to make guis just for fun and for some reason I cant get the size right, on the screen everything looks normal but when I go test it, it all rescales. If someone can help me stopping that from happening that would help!
1 Like
So, I’ll take a guess you are using Offset for your sizing. This is not ideal for ScreenGuis.
Because everyone has a different sized screen, you want to use scale. Offset refers to a constant number, Scale is a ‘percentage’, so to speak, for example you can make it cover 30% of the X axis.
1 Like
Yeah I was looking up and apparently
that plugin was the best to use.
Basically what @Zirkonir said…
Here is that plugin you were looking for, (I use it too)
Also I see you are trying to make a stroke effect around the buttons.
You can simply just add a UiStroke into the buttons and change the color to white, you can also change the thickness, transparency, etc.
https://developer.roblox.com/en-us/api-reference/class/UIStroke
1 Like
I downloaded it but it’s till making the same error
Would you mind sending me the file?
I can check it out better.
I don’t specialize in GUIs but I’ve been working with them enough to help you with your problem. It would be great if you could send a screenshot of your properties tab. Anyways, sure you can use those plug-in’s that magically auto sizes your gui, however you’d still want to know how to configure them yourself. For sizing your UIs DO NOT use offset numbers (e.g. {0,500,0,300}) this is a really easy mistake beginners do, as Roblox even uses offset when initially making a Frame or UI Objects. The same goes for positioning, as much as possible never ever use offset numbers for positioning as this could heavily affect the positioning of the UIs on different devices. Instead do something like this {.5,0,.3,0} notice it has periods at the beginning of the 5 and 3? This is because those depends on the screen of the device, for example the x axis (.5) would be 50% of the screen, as a 1 would be 100% of the screen and the y axis (.3) would be 30% of the screen from top to bottom. Also another thing, it may look like the UI is off by a little when you do size {.5,0,.5,0} and position {.5,0,.5,0} this may be because of your anchor point, do not forget to set your anchor point (can be found at the very top of your GUI property) to {.5,.5} this will set the anchor point to the middle of the UI. Last but not least if you are trying to cover the whole screen, select your ScreenGui and look for “IgnoreGUIInset” in the property’s tab and toggle it, this will cover that irritating top bar of the screen. I find it helpful that watching AlvinBlox’s can help you understand more information on GUIs.
I am assuming the size, is the cause of it.
I wouldn’t recomment you to be lazy and use a plugin, it’s actually important to understand what’s going on, and use an actual solution since converting it to scale size/position won’t fully fix the issue. The AnchorPoint property is what you should use.
The AnchorPoint property shifts the UI object by multiplying the the object’s size with itself and then subtracting it from the object’s AbsolutePosition. In other words, an anchor point of 0.5, 0 means that the object should have its position subtracted by its X size multiplied by 0.5, which shifts it to the left half its X size many pixels. More info about how the property works can be found here. I’ve also explained the calculation of it here though you need to know Lua to undestand my explanation.
Here you go.
Fixed the buttons, let me know if you want any other UI fixed.
FixedUI.rbxl (41.7 KB) ← just click to download
I completely just remade it.
To edit the text I recommend the plugin Rich-Text Editor.
It helps with editing rich-text, which is what I used and recommend you use aswell.
edit : the picture & file were messed up. i reuploaded the correct files with the right text!
To edit the rich-text in a script, instead of using the expected TextLabel.Text = "Points : "..points.Value you would do TextLabel.Text = [[Points : ]]..points.Value where the brackets act as quotations.
All I left for you to do is to add the TextSizeConstraint for the text. You can learn how that works by clicking the hyperlink.
I also agree with @cnr123451 as you 100% should learn how the plugin actually works.
1 Like
That’s correct, the size is the problem, and as @cnr123451 said, I wouldn’t recommend being lazy and use a plug-in. GUI properties are the easiest to understand in my opinion, your only limit are your imagination.