I’ve created a scrollable map of the world GUI. While creating the ability for the player to zoom in/out, I’ve encountered an issue.
Obviously, when you zoom into a GUI, the GUI gets bigger. I tried the simple solution of increasing/decreasing the GUI’s size when it’s zoomed in/out.
Here’s the code I used. It is located in the “zoom in” button.
script.Parent.MouseButton1Click:Connect(function()
local s = script.Parent.Parent.map.Size.X.Scale
script.Parent.Parent.map.Size = UDim2.new(s + 1,0,s + 1,0)
end)
The code for the zoom out button is the same, just decreasing the size instead of increasing it.
This mostly works, but there’s an issue. The GUI’s anchor point is (0.5, 0.5), or the center. As demonstrated by the video below, the GUI will not zoom in on the point of the map the player is focusing on, but instead zoom towards the center point of the GUI.
How do you move the image though? Because you can just move the anchor point to where they’re focusing of course, so when they zoom in just offset the anchor point.
I believe I’ve had this working once, although in a different game engine, where I utilized anchors instead to move an object. That would eliminate the zoom-in problem.
Divide Vector2.new(1, 1) by the user’s ViewportCamera, and for mouse delta, multiply that to the quotient. This should suffice.
local User_Input = game:GetService("UserInputService")
local Camera = workspace.CurrentCamera
local Map_Coordinates = Vector2.new(0.5, 0.5)
local Pixel_To_Unit = Vector2.new(1, 1) / Camera.ViewportSize
Camera:GetPropertyChangedSignal("ViewportSize"):Connect(function()
Pixel_To_Unit = Vector2.new(1, 1) / Camera.ViewportSize -- Update to ensure mouse wont screw up the coordinates.
end)
-- Somewhere in your map movement function, multiply the delta coordinates to the Pixel_To_Unit.
I move the map with this code below that I found on the DevForum.
local UserInputService = game:GetService("UserInputService")
local gui = script.Parent.map
local dragging
local dragInput
local dragStart
local startPos
local function update(input)
local delta = input.Position - dragStart
gui.Position = UDim2.new(startPos.X.Scale, startPos.X.Offset + delta.X, startPos.Y.Scale, startPos.Y.Offset + delta.Y)
end
gui.InputBegan:Connect(function(input)
if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then
dragging = true
dragStart = input.Position
startPos = gui.Position
input.Changed:Connect(function()
if input.UserInputState == Enum.UserInputState.End then
dragging = false
end
end)
end
end)
gui.InputChanged:Connect(function(input)
if input.UserInputType == Enum.UserInputType.MouseMovement or input.UserInputType == Enum.UserInputType.Touch then
dragInput = input
end
end)
UserInputService.InputChanged:Connect(function(input)
if input == dragInput and dragging then
update(input)
end
end)
It changes the map’s position by the Offset, not Scale, because I’m not sure how to achieve the latter.