How to make a UI map "zoom" system

Help and Feedback Scripting Support
, , ,
#1

I want to make a system where you can zoom in and out into a map with the mouse wheel.

The system I have right now is really buggy and doesn’t work well.

I have searched the Dev Forum and tried to find an answer, but I couldn’t find anything specific.

local Map = script.Parent.Map

-- [VARIABLES] --
local MapPosition = Map.AbsolutePosition
local ZoomMultiplier = 0.25
local MinZoom = 1.75
local MaxZoom = 4

-- [MAIN] --
local function Zoom(Direction)
	
	if Direction == 1 and Map.UIScale.Scale < MaxZoom then
		
		TweenService:Create(Map.UIScale, TweenInfo.new(0.125), {Scale = Map.UIScale.Scale + ZoomMultiplier}):Play()
		
	elseif Direction == -1 and Map.UIScale.Scale >= MinZoom then
		
		TweenService:Create(Map.UIScale, TweenInfo.new(0.125), {Scale = Map.UIScale.Scale - ZoomMultiplier}):Play()
		
	end
	
	TweenService:Create(Map, TweenInfo.new(0.125), {Position = UDim2.new(
		Map.Position.X.Scale,
		(Mouse.X - MapPosition.X) * ZoomMultiplier,
		Map.Position.Y.Scale,
		(Mouse.Y - MapPosition.Y) * ZoomMultiplier
		)}):Play()
	
	MapPosition = Map.AbsolutePosition
	
end

The map’s position is {0.5, 0},{0.5, 0} and the anchor point is 0.5, 0.5, also it has an UIAspectRatioConstraint that is 1.

Thank you.

3 Likes
#2

Have you tried making the “map frame” bigger. Yes I know this will make the map appear bigger on the screen like out of bounds which isn’t optimal. We can fix this by parenting the frame to a frame which has ClipDescendants turned on which will keep the map in bounds while you resize it.

I might have explained a bit vaguely so ask again if you need any clearance. :slight_smile:

(Sorry I probably misunderstood the question so this might not be the answer you’re looking for.
I’ll be back to you in about 7 hours with a full answer! :sleeping: )

#3

Yes, I am resizing it. However, what I want is for the map to zoom into where the player turned the mouse wheel. I haven’t figured out a solid and smooth way to do it.

(Sorry for not specifying this in the post.)

#4

What you could try is if you could get the mouses position in the map frame as a scale so top left corner of the frame is x 0, y 0 and bottom right corner of the frame is x 1, y 1. Then you could just set the Map.AnchorPoint to Vector2.new(x, y) and then resize it. This will in theory resize the map in the direction where the mouse is on the frame.

#5

Won’t that also move the map, messing up the position?

#6

It will resize from the AnchorPoint so that the AnchorPoint stays in the center. Atleast in theory.