Problems with GUI

[Cuubey1]

So I have been looking around to answer how to center a image button universally and I cannot get a good solution. Some people said to download the plugin AutoScaleLite and I tried that and it didn’t work. Others suggested some fiddling with AnchorPoint, which I don’t understand how to.

This is my code so far: pick it apart if you want.

local IB = script.Parent
local CSize = game.Workspace.CurrentCamera.ViewportSize
local CCenter = CSize.X / 2

IB.Position = UDim2.new({CCenter, 0.5}, {CCenter, 0.5})
IB.AnchorPoint = Vector2.new(CCenter, 0.5)

print(CCenter)

Any feedback would be appreciated

[Yarik_superpro (The_GrandOptimizer)]

Help and Feedback > Scripting Support

@Cuubey1

UDim2.new({CCenter, 0.5}, {CCenter, 0.5})

Solution:

UDim2.new(CCenter, 0.5, CCenter, 0.5)

To Center something Set Anchor point to 0.5,0.5 and Position to UDim2.fromScale(0.5,0.5)

[Cuubey1]

Yeah the screen gui still doesn’t show up. I don’t know why

[Amritss (EmperorOfChickens)]

Have you checked the screengui’s enabled property is true? Also is your script parented to the IB object? Also, I think the problem with the positioning is that you’re still using offset.

When dealing with 2D player UI, you should literally never use offset because it will not reposition/resize depending on the screen. It doesn’t take screen size into account. So set the offsets to 0.

The documentation has a really good article on scale, offset, and anchor points. Explained really well. You should read this:

https://create.roblox.com/docs/ui/position-and-size

[2112Jay]

local IB = script.Parent
IB.AnchorPoint = Vector2.new(0.5, 0.5)
IB.Position = UDim2.new(0.5, 0, 0.5, 0)

[Zerin107 (Zerin)]

So, you can use a mix of offset and scale like this, which i think you tried doing

local IB = script.Parent
local CSize = game.Workspace.CurrentCamera.ViewportSize
local CCenter = CSize.X / 2

IB.Position = UDim2.new(0, CCenter, 0.5, 0})
IB.AnchorPoint = Vector2.new(0.5, 0.5)

print(CCenter)

or simply just use scale

local IB = script.Parent
IB.Position = UDim2.fromScale(0.5, 0.5)
IB.AnchorPoint = Vector2.new(0.5, 0.5)

print(CCenter)

Either way, AnchorPoint should only be from 0-1, it uses percentages not pixels, for the anchor point to be in the center the X and Y should both be 0.5

UDim2.new takes 4 numbers (UDim2.new(0,0,0,0)), 2 UDims (UDim2.new(UDim.new(0,0), UDim.new(0,0))) or nothing (UDim2.new())

[DerBusfahrer12 (JustCarlo)]

You don’t need to calculate the camera size for this.
Roblox UI already provides an easy universal way to center UI elements using AnchorPoint + UDim2.

Here’s the correct and simplest solution:

local btn = script.Parent
btn.AnchorPoint = Vector2.new(0.5, 0.5)
btn.Position = UDim2.new(0.5, 0, 0.5, 0)

Why this works:
• AnchorPoint = (0.5, 0.5) makes the center of the UI object its reference point.
• Position = UDim2.new(0.5, 0, 0.5, 0) places that reference point in the middle of the screen.
• Works on all devices (PC, tablet, phone) without plugins or camera math.

If you want to center it inside a Frame instead of the screen, just place the button inside that Frame and use the same code.

Just a simple way

[Yarik_superpro (The_GrandOptimizer)]

You don’t have to do it in code per se, it can be done in editor
Make sure anchor point is 0.5,0.5 and position is 0.5,0,0.5,0

[Cuubey1]

Yeah thanks, I didn’t see this before hand. I wish this was mentioned somewhere in the main gui article but there ain’t no use complaining. Have a good day

[Cuubey1]

Update: the image still isn’t in the middle of the screen, as shown by the FP cursor compared to my custom crosshair (from the tb).

[Zerin107 (Zerin)]

Pretty late reply, if you still haven’t found a fix to this:

put these properties of a ScreenGui to none or false

What this will do is make it so the screen gui will not get scaled down so its under the topbar(the bar with the roblox buttons on top)

[Cuubey1]

Thanks, I was worried no one would reply, so you are a real lifesaver. <3