How to fix Gui position and scale

So basically the gui is not scaled at the right way and it’s not in the right position. I know there is some plugins like UI tools but it’s not working like I want with them or I’m not using it properly. So can someone with experience on gui tell me how to make it?


Probably that’s more obvious one XD, thanks!

4 Likes

When sizing, always set offset to 0. Only use scale. Also set everything at anchor point (0.5,0.5) then move the position. Don’t use UI constraints

2 Likes

Ok here I did that:



But still it’s not working

3 Likes

Restart. Use no constraints, make sure all size offset is at 0. Do anchor point 0.5,0.5, then move. If it still doesn’t work I’m not sure how to fix it

1 Like

Not sure why someone is telling you to not use constraints, but anyways, the solution here is beyond easy. Set anchor point to 0.5, 0.5. Set the position on each element to 0.5, 0, 0.5, 0. Then move it to the positions of your choice. Then insert a ui aspect ratio constraint into each element. I hope this helps :slight_smile:

4 Likes

Make Sure that every part of the gui is using that sizing with the scale. Roblox defaults to using offset so make sure all the buttons and frames are using the scale.

1 Like

I personally would use a BillboardGui (edit i meant: SurfaceGui my bad) gui, maybe on an invis part maybe on the part you want it to be on.

1 Like

I tried but that way it’s low quality when the camera is being zoomed.

1 Like

Looking at the screenshot you sent where we can actually see your workspace. All the components for the laptop gui mostly the stuff you want to be on the laptop screen, and buttons on the screen usually should be in 1 Frame. (layout info: User interface | Documentation - Roblox Creator Hub)
image
Center the frame and use scale. I still reccomend BillboardGui for your case: BillboardGui | Documentation - Roblox Creator Hub

Actually I meant SurfaceGui !!! look that up its exactly what I had in mind would work perfectly

And the quality being worse is only a guess since i cannot see everything but it seems your using images for the 2 buttons in the middle, avoid using higher resolution images since when they get downscaled the quality gets nuked?
Keep in mind all resolutions go on studio’s TEST tab at the top and press devices and you can check how it looks on every device.

For future questions, if you’re looking for a solution, try to provide as much detail as possible. It helps others give you a more accurate answer, and many would avoid even trying to answer due to the lack of information. Also, I’d recommend checking out the many available guides and resources first, as they might already have what you need: Get started with experiences on Roblox | Documentation - Roblox Creator Hub

And more specific for your case: User interface | Documentation - Roblox Creator Hub

3 Likes

Alright so I tried to place everything into a frame but it didn’t make any progress only it will make it harder because I will need to change the scripts. Also about the BillboardGui I tried surface gui and it’s bad quality but even If that isn’t problem with BillboardGui I will need to change a lot of scripts and It will make everything harder so it’s not very good idea in my case. But anyway, thanks a lot for the help!

1 Like

In my case your answer was closer to solution, thank you! I made the things that you said but I added the ui aspect ratio constraint from plugin called AutoScaleLite and played with the settings of a plugin called UI tools. it’s not perfect but for 90% of the devices is not bad and for 50% it’s perfect. Maybe to be perfect for all of them I’ll need to make it with billboard gui like @TimelessArtist said but I can’t because of the big amount of code changes I’ll need to do. Thanks for the help again!

2 Likes

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.