How do I make a GUI scale to the mouse position not the anchor point?

Hello, I am trying to create a 2D map from scratch and this is my first time scripting GUIs. I currently have my map zoom in and zoom out function with the use of UIScale and it’s only scaling to the anchor point (anchor is set to the middle of the map). I want to make the map zoom in and zoom out from the mouse position, like the map from the game Fireteam.

Are there any explanations or methods in order to achieve this?

1 Like

What if you shift the image by an offset based off how far your mouse is (mouse.X, mouse.Y) is from the anchor point (e.g. the middle)?

1 Like

You could shift the anchor point to the position of the mouse using absolute size, absolute position, and some math.

1 Like

I see, thank you for the explanation!

1 Like

Did you get this solution to work? I’m trying to create a similar thing.

Shifting the anchor point works, but I switched to a more straightforward method which is just simply changing the map frame position relative to the mouse position inside the map.

Here is a messy example of the code:

local mouse = player:GetMouse()
local IgnoreGuiInset_Offset = 36 -- 36 if you ticked IgnoreGuiInset, 0 if not

function foo()
	local lastScale = mapFrame.UIScale.Scale -- gets the frame's UIScale value before zooming in/out

	-- zoom in/out

	local mousePosition = UDim2.fromOffset(math.floor(mouse.X - frame.Position.X.Offset), math.floor(mouse.Y - mapFrame.Position.Y.Offset + IgnoreGuiInset_Offset)) -- Get mouse position relative to frame
	local x1 = mousePosition.X.Offset * (mapFrame.UIScale.Scale / lastScale) -- calculate frame position
	local y1 = mousePosition.Y.Offset * (mapFrame.UIScale.Scale / lastScale)
	local x2 = mapFrame.Position.X.Offset + (mousePosition.X.Offset - x1)
	local y2 = mapFrame.Position.Y.Offset + (mousePosition.Y.Offset - y1)
	mapFrame.Position = UDim2.fromOffset(x2,y2) -- update
end

1 Like

I do not understand and im not sure it if it work on my style of map, I think im going to after the anchor point method.

Not sure how to make the grid lines and numbers attach properly but thank you.

Did you get the anchorpoint method to work, I’m attempting it.

Yes, I did get the anchorpoint to work. The implementation is more or less the same as the previous example.

But I think the zooming in this method isn’t as accurate and smooth as the changing the position method I showed earlier.

Can I contact you on discord? I’m having a whole host of issues and trying to create the same thing as you.

I’ll help you out if I can: NIcoGW#9006

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.