How do I format my screen to edit UI well?

I’ve always wanted to make UI, but I always was held back because the way that the interface would look in Studio wouldn’t carry over to how it looked in-game. How do I make my Studio screen’s UI display look the same as it were to in-game?

I’d suggest scaling the Ui so that it fits to any screen because the problem is that Studio just isn’t the same as being in-game so that is why scaling the Ui could fix your problem because chances are it’ll then look the same even with the screen change.


Just a quick demonstration of what I meant. It makes it hard to make UI. If I have a vision, and make the vision in studio, I should get it in-game. I’m not. It makes it hard to imagine and have to go in and change things.

Ahhh… Here is a trick I picked up! When making your UI, go to size and set the scale x and y to 0.1 and set the offset x and y to 0. Now if you resize it using studio’s arrows, it will be scaled! If you want pictures on how to do this, feel free to reply!

2 Likes

The problem is probably that you’re creating your UI incorrectly. UI needs to scale to different screen sizes, so it looks different on each. When making UI, I usually scale the viewport around to see if it’s scaling the way I want. There are quite a few great tutorials on the dev forum about making scalable UI, I’d recommend checking them out.

1 Like

For the game that I’m developing, mobile users can’t play. How should I make my viewport look to most accurately a PC screen?

1 Like

You can select different device screen sizes:

Top Bar > Test > Device >

You can also just scale the viewport a bit with the drag bars on the sides, though selecting different screen sizes then going to the second dropdown > actual resolution is the most accurate.

3 Likes

This doesn’t make any sense to me. First off, what is “scale x”? Second off, it doesnt let me set size to 0.1, only 0. Finally, I don’t see how this would work at all.

I always knew this could be done, but I didn’t know that I could fit it to the window. Thanks.

They’re explaining to scale and offset. Offset is based on pixels, and scale is based of percentage of the parent’s size. Size and position are based on four values: scale x, offset x, scale y, offset y (UDim2).

NP

If you need any additional help, refer to this thread: