UI's going offset when in-game


#1

I’m designing the UI in Roblox Studio so that it looks good to me,
image

But, when joining in-game, it looks like this
image
I think it looks like it has gone down by a bit…

Is there any fix for this? yes, i’m a noob at UI design…

Or is it just my graphics card? Is it because of my computer that the UI looks like it’s
closer to the bottom of the screen?


#2

When you are in-game your ROBLOX player is full screen?


#3

One thing to remember when designing a UI is that the first values of the UDim2 (the first x and y value) is scale. That means there is 100% to work with (that’s good for positioning the element in the correct part of the screen for all users). The second value is off set. I usually use this if I have like images, however I find scale is better for me.
My point being, if you want the same exact size (in both studio and in game), use offset, and if something needs to be positioned perfectly in a frame or whatnot, set its size to {1,0},{1,0}.
Not sure if that’s what you’re looking for, but that’s how I interpreted it (sorry lol)
Hope this helps :blush:


#4

Yes, I am fullscreen while in-game, because when I’m not fullscreen this happens:
image


#5

Show the sizes of the GuiObject?


#6

Side button’s size: {0, 54},{0, 55}
Money Display size: {0, 261},{0, 55}

I used the drag/resize editor while designing these, I don’t use even values while designing UI’s…
I should start using even values while designing UI sizes right?


#7

Can you also show the positions?


#8

Do some research on the difference between Scale and Offset for positioning and sizing GUIs. Also check out the AnchorPoint property. You should be able to use all of these in conjunction with each other to fix your positioning issues! (Sorry but not giving a specific fix, but this will help you create better guis in the future :slight_smile: )

UPDATE: I will give you a fix for this after all! I assume you want it in the bottom left corner of the screen.
Make the anchor point of your frame: 0,1
Make the position of your frame: 0,0,1,0
Then make the size whatever you want. It should always stick to the bottom left corner now.


#9

Side Toggle Posistion: {0.007, 0},{0.938, 0}
Money Display Position: {0.04, 0},{0.938, 0}

Same thing, I don’t use even values…


#10

Yeah, if you use the Offset:

{Scale, Offset},{Scale, Offset}

Then your UIs will only work for one screen size. There is a cool plugin that can automatically make your UIs resize, so this might not be necessary, but I recommend you use the Scale, not the Offset.


#11

Okay, because it only works in fullscreen, and what’s that plugin?


#12

Let me get a link.


#13

There.


#14

Thanks! Appreciate the help :slight_smile:


#15

But I’d still recommend you learn to use Scale lol. NP.


#16

Yeah, I tried it, and I absoulutely love it! :smile:


#17

Great! Solution?