Gui Sizing/Position Messed up in Roblox Client

Help and Feedback Scripting Support
#1

Hello! I don’t really know if this is the right place to write this but I’ve encountered an issue some guis I’m making.
Both of the issues are very similar.

The first issue a cursor I made getting offset when playing the game using the roblox client rather than studio.
In Studio:
Screenshot 2022-08-20 192720

In the Roblox Client:
Screenshot 2022-08-20 193010

The Second issue is that a crosshair for a icon selection is not sized correctly in the roblox client.
In Studio:
Screenshot 2022-08-20 192749

In the Roblox Client:
Screenshot 2022-08-20 193030

Any help will do and again I really dont know if this is the right category. xD
Thanks!

1 Like
#2

Are you using offset or scale for the size and position of the guis?

#3

The Position for the Cursor shown in example 1 is:

{0.421, 0},{0.599, 0}

And the scale is:

{0.142, 0},{0.304, 0}

Here is for the crosshair.
Position:

{0.205, 0},{0.386, 0}

Scale:

{0.134, 0},{0.287, 0}

Both elements have constraints just btw

#4

I believe those tables I replied to you with mean I am only using scale.

#5

The window from Studio is not a perfect 16:9 ratio, unlike most monitors when games are in fullscreen. Whatever you forcefully align by using the UI dragging function of studio (which is garbage IMHO) to be centered in Studio will not look the same on other aspect ratios.

This is too little information for me to actually be able to give you any advice. GUI is harder than most people think it is.

One thing that I do notice is that the Pokemon icon and the selection indicator are independent of each other. In this case, parent the indicator to the Pokemon, scale it appropriately and center it using AnchorPoints. I actually made a plugin that helps with this:

#6

I am trying this out first on the cursor in example 1, now the x position is correct, but the y axis is off? Do you know any way to make the y axis always fit the screen?
Screenshot 2022-08-21 093825

#7

Not sure what you exactly mean by this, but:

AnchorPoint = 0.5, 0.5
Position = 0.5,0,0.5,0

Keep in mind this presumes that all of these UI elements are cropped correctly and there is no unnecessary white space. By that, I mean:
image

Green is how the image should actually be cropped, red has unnecessary white space, and that space sometimes isn’t even a perfect square (not in my example), so the center of the image could be off and then… unalignment

#8

There is no white space in the images and I designed them specifically for that reason. And also what I mean by fitting the screen is no matter the resolution of the screen the image stays in the same position, which it obviously is not judging by the screenshot. And the cursor is not parented to the button I am trying to make the cursor lay over.

I really don’t know if you need this but the green is the cursor, and the red is the frame containing the buttons I’m trying to lay the cursor over.
asfd

#9

If you really must insist on not parenting the cursor to the MenuItem, (idk why you do) then you need to use some scripting

workspace.CurrentCamera:GetPropertyChangedSignal("ViewportSize"):Connect(function()
	MainMenu.Cursor.Position = UDim2.fromOffset(MainMenu.MenuItems.AbsolutePosition.X, MainMenu.MenuItems.AbsolutePosition.Y)
end)

AnchorPoints for both of them need to be identical.

#10

The cursor works perfectly now. But now the only issue is the crosshair for the icons shown in example two. And I really can’t parent the crosshair to just one icon because the crosshair functions like this:

I think I’ll just tweak the code example you gave me to work for this.

#11

You actually can, if you store the instance in the script before changing it’s parent.

local Crosshair = -- Crosshair path
Crosshair.Parent = workspace -- randomExample

Crosshair.ImageTransparency = 0.5

And calling Crosshair still works.