Need feedback on some GUI I made!

,

So I don’t generally make GUI, but today I decided to give it a go. What do you think?

There’s some things that don’t belong to me (ex. the gamemode logos, property of Call of Duty, they are just placeholders), and the operator.

Some things that I will probably end up changing are the operator, if not fully removing him, changing his position on the screen, but I wanted to get some feedback first before doing anything else… What do you all think? Be as harsh as you want, I don’t mind, any feedback helps considering this is one of my first times doing UI.

PS: If there are any tips on how to make images not look so stretched but also make them still be on the screen is also appreciated…

10 Likes

also this which i’ve just completed:

3 Likes

I think it looks great, especially if you dont generally make UIs, though I will offer my advice;

Maybe add stroke to the frames,
Make the text labels a little farther away from the edges of the frame, - As well as the robux Icon etc…

In terms of suggestions that’s all I really have for you did a great job, though I will do my best to help you with sizing.

As you said you don’t generally make UI, so I’m going to operate under the assumption you don’t completely grasp Constraints and Scale vs Offset… -If you do skip the following part

When importing an image of any sort into any program, weather or not it’s photoshop or roblox each image has dimensions, maybe its 100x100 or maybe its 450x205 that can be found under the metadata of the image itself, or opening the image and clicking the little image icon.

Once you have the dimensions it’s instrumental that you set the size to the dimensions of that image. If the image is 110x110 set the size of the image to {0 , 110 , 0, 110}. What this does is it ensures that the image is maintain the quality it was downloaded with. If you take an image that’s 10x10 that image will only maintain the quality at that size. If you were to try and expand that to 50x50 you’re taking the little data that photo has, and stretching it over a larger canvas, tanking the quality.

But now the problem we run into is that it’s not scaled to all devices, the easiest way to do this is to use AutoScale Lite - Roblox, or if you dont mind spending 150 robux this one is a lot more intuitive… AutoScale Nightly - Roblox. Regardless they do the same thing in the end, that is – convert your pixel offset size to scale. Essentially what this means is instead of having a 100 pixel by 100 pixel image for every device, it sets the size relative to the players screen ensuring proper scaling between devices… When you use this plugin you will see these options

image

You are going to want to click ‘unit conversion’ and then see where it says ‘Size’ click ‘Scale’ as roblox sets postion scale by default.

Adding a constraint will maintain the image dimension factor, hard to explain easier to show you.


At the beginning of the video, The frame has no constraint, at the last part is when I added the constraint.

Now that you have a basic understanding of constraints and scale, hopefully you can apply these to your image labels, frames, buttons, and textlabel and create a UI all devices can enjoy.

If you’re confused in anyway don’t hesitate to ask, I’m happy to help.

Tip:

Some people seem to be really against this for reasons I will never understand, but whenever I make UI always create, maneuver, edit, code whatever in the device emulator. You can navigate there like this:

What this does is it emulates how you would see your UI in game, outside of studio. As all these docked ‘widgets’ on the side of our screen can really bend how the UI positioning turns out in game, this simply ensures I’m positioning and scaling correctly…

Happy devving!
-Good Luck!

2 Likes