GUI ends up in the wrong part of screen and is ruined

Help and Feedback Art Design Support
#1

image
image953×162 114 KB

this is my UI when I join the game.
This is what it looks like in studio (as it should)
image
I’ve tried looking this issue up and I do already have a plugin to scale my UI size and position but for some reason it still turns up that way (yes im publishing)

any help?

#2

Are you using relative coordinates for size and position? Where is the anchor point of this Frames?

#3

I think its because you need to use Autoscale or something on the purple line

#4

So for a UI like this, you’ll want to design your hierarchy like this:

ScreenGui
    VitalsWrap (Frame)
        UIAspectRatioConstraint
        BorderElement (ImageLabel)
        HPFillWrap (Frame)
            HPBar (Frame)
        MPFillWrap (Frame)
            MPFillBar (Frame)

The goal of setting up the UI like this is to enforce a parent-child relationship whereby everything is scaled with the parent element.

To start with, set up the Wrap element by setting its AnchorPoint to 0.5, 1 – this sets the anchor of the GUI to the bottom center, meaning that wherever it is positioned, it will scale upwards and around the center. Now, set the Position of the bar using Scale, try {0.5,0},{0.9,0}. This assumes you want these bars at the bottom center of the screen. Finally, set the size of the bar using Scale - for starters, just set the size to {0.5,0},{0.5,0}. Don’t worry if it looks too large, that’s why we have the UIAspectRatioConstraint.

With the Wrap set up, the next step is to define the UIAspectRatioConstraint. It seems a little confusing at first, but all you need to do is divide the width of something by the height of something. For example, an image that is 1600x900 will come out to be 1.7778, while an image that is 900x1600 will be 0.5625. Divide the width of your health bar image by the height of the health bar image, then set that as the AspectRatio. This will force your wrap to always be the correct shape for your image.

Next step is to add your image. Just insert the ImageLabel, set its border and background to transparent, then set its size to 1,0,1,0. The image will now take up the entire size of the parent Wrap element and be perfectly shaped all of the time.

Finally, you can add your health/MP bars. Set the size and position of the wrap elements using Scale. You can then add a frame as a child of the wraps that has its size set to {1,0},{1,0} and simply change the X scale value for how much you wanted it filled.

If you need any more help, just leave a reply and I’ll be happy to give you answers. If need be, I can create a mockup for you to look at.

#5

Occasionally UI plugins don’t work right, I personally do not recommend using one to scale it, you’ll always get a better result if you know how to and you do it yourself. Try going into the red/purple properties, and change both of their sizes and positions to {0.5, 0},{0.5, 0}, and then resize it and move it to where you want it. This should solve the issue.

I recommend you do this with the frame as well. This sets everything to match.

If this does not work, let me know and I will assist further.