I am making a tutorial system for my game and I have an ImageLabel showing an arrow that I want to move around my gui to tell the user what is what.
In this screenshot you can see the big green arrow is supposed to point to the center of the orange “SKIP” button:
To pull this off, I have made the following funciton that will take a gui element and return absolute coordinates of the center of the element, but as you can see in the screenshot it is not working well. The function that calculates position looks like this;
-- Find the scale center point of arbitrary gui item
local function pointToScale(item:ImageLabel)
local ss = workspace.CurrentCamera.ViewportSize
local p = item.AbsolutePosition
local s = item.AbsoluteSize
local a = item.AnchorPoint
warn("ss:", ss,"POS:", p, "SIZE:", s, "ANCHOR:", a)
return {X = (p.X + a.X * s.X) / ss.X, Y = (p.Y + a.Y * s.Y) / ss.Y}
end
The green arrow ImageLabel has Size = {0, 100},{0, 100} and AnchorPoint = 0.5, 0.0, and I set the position using arrow.Position = UDim2.fromScale(pos.X, pos.Y) where pos is the returned result from my pointToScale function.
The reason I want scale instead of offset is that whenever the window size is changed, the absolute (offset) coordinates will no longer be correct. Scale will adapt to any window size ( I learned this the hard way).
I think the problem is related to how the button has been laid out. It is part of a list in a list and has a bunch of parents with different positions based on ancho points, scales and offsets:
I was hoping that the AbsolutePosition, AbsoluteSize and AnchoPoint properties would be enough to get the middle of the item but aparently not. So what is wrong with my method?
