Tiling map background that can be dragged?

Help and Feedback Scripting Support
1

I have a script set up that tracks the positions of objects in a folder and mirrors their positions’ onto the map. Could anyone lead me through how I could do this with a background imagelabel too?
I have the imagelabel set up as a tiled image (notice the hexagons).

image
image847×568 31.8 KB

Map table script:

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local RunService = game:GetService("RunService")
local Players = game:GetService("Players"):GetPlayers()

local MouseInputEvent = ReplicatedStorage.Events.MouseInput
local PlayerInputEvent = ReplicatedStorage.Events.PlayerInput
local CameraEvent = ReplicatedStorage.Events.CameraTween

local ScreenPart = script.Parent
local ScreenGui = script.Parent.SurfaceGui

local background = script.Parent.Parent.Backdrop.Bottom.SurfaceGui.ImageLabel

local Tracked = workspace.Tracked

local BoundaryPart = ScreenPart.Boundary

local mousepos = nil

local DragOffset = Vector3.new(0, 0, 0)

ScreenPart.Click.MouseClick:Connect(function(plr)
	if plr.Controlling.Value == "" then
		plr.Controlling.Value = "Holomap"
		
		plr.Character.PrimaryPart.Position = ScreenPart.Position
		plr.Character.PrimaryPart.Position += Vector3.new(0, 0, 10)
		plr.Character.PrimaryPart.Anchored = true
		
		CameraEvent:FireClient(plr, "Holomap1")
		
		ScreenPart.Click.MaxActivationDistance = 0
	end
end)

PlayerInputEvent.OnServerEvent:Connect(function(plr, key)
	if plr.Controlling.Value == "Holomap" then
		if key == Enum.KeyCode.Space then

			plr.Controlling.Value = ""

			plr.Character.PrimaryPart.Anchored = false
			CameraEvent:FireClient(plr, "Holomap2")

			ScreenPart.Click.MaxActivationDistance = 15

		end
	end
end)

MouseInputEvent.OnServerEvent:Connect(function(player, delta, pos)
	mousepos = pos
	for _, part in pairs(ScreenPart.Displayed:GetChildren()) do
		if part:IsA("BasePart") then
			-- Move the parts when dragging the map
			DragOffset += Vector3.new(delta.X, 0, delta.Y)
			
		end
	end
end)


while task.wait() do
	for _, v in pairs(ScreenPart.Displayed:GetChildren()) do
		if v:IsA("BasePart") then
			--Track the position of the tracked part(s)
			v.Position = (Tracked:FindFirstChild(v.Name).Position / 8) + DragOffset
			if v.Position.Y < 4.177 then
				v.Position = Vector3.new(v.Position.X, 4.177, v.Position.Z)
			end
			
			--Boundary of holomap
			local boundarySize = BoundaryPart.Size / 2
			local boundaryPosition = BoundaryPart.Position
			local partPosition = v.Position

			local withinX = math.abs(partPosition.X - boundaryPosition.X) <= boundarySize.X
			local withinZ = math.abs(partPosition.Z - boundaryPosition.Z) <= boundarySize.Z
			local withinY = math.abs(partPosition.Y - boundaryPosition.Y) <= boundarySize.Y

			if withinX and withinZ and withinY then
				v.Transparency = 0
			else
				v.Transparency = 1
			end	
		end
	end
end

Thanks in advance :grinning:

1 Like
2

Hello!

I understand that you have a script that displays objects on a map, and you want to do the same for a background label (such as a hexagonal mosaic image) that serves as a background or grid on the map.

Here’s how you can implement the display of such a label (background mosaic) - let’s assume that you have an ImageLabel that serves as a background and has a hexagonal image. Essentially, the idea is to position this ImageLabel so that it matches the current position of your “displayed” space.

General steps:

  • Create or use an existing ImageLabel for the background (for example, BackgroundImageLabel).
  • Update its position and size to match the boundaries or area where you are displaying objects.
  • If necessary, scale the image to fit the current scale of the map.

An example of integration with your script

Let’s say you have an ImageLabel - for example, backgroundImage, which you want to position and scale. Here’s an example of how you can do this inside your loop:

local background = script.Parent.Parent.Backdrop.Bottom.SurfaceGui.ImageLabel

-- Suppose you have variables for the size of the map and the display area:
local mapSize = Vector2.new(512, 512) -- the size of your ImageLabel in pixels
local mapWorldSize = Vector3.new(160, 0, 160) -- the size of the area in the "world" (example, 160x160 units)

while task.wait() do
    -- Updating the positions of objects
    for _, v in pairs(ScreenPart.Displayed:GetChildren()) do
        if v:IsA("BasePart") then
            -- position on the map
            local mapPos = (Tracked:FindFirstChild(v.Name).Position / 8) + DragOffset
            
            -- Background update
            -- Let's assume that background is an ImageLabel that should cover the entire map
            -- and its position and size must match the map area
            -- Let's update the background position so that it matches the boundaries of the area
            background.Position = UDim2.new(0.5, mapPos.X / mapWorldSize.X * mapSize.X, 0.5, mapPos.Z / mapWorldSize.Z * mapSize.Y)
            -- Update the background size (if you want it to cover the entire map)
            -- or fix its size if the card is fixed
            -- for example, to cover the entire map:
            background.Size = UDim2.new(0, mapSize.X, 0, mapSize.Y)

            -- Update the transparency or other properties as needed
        end
    end
end

Important points:

  • The UDim2 coordinates for Position in SurfaceGui or ImageLabel allow you to position the image relative to its parent.
  • Scale the image if you want it to match the display area exactly.
  • If your mosaic is a hexagonal image, make sure it is properly scaled and positioned according to the map coordinates.

Result:

  • Update the Position of the ImageLabel (background label) in the same way that you update the positions of objects.
  • Use scaling and positioning through UDim2 to ensure that the label matches the map area exactly.
  • You can further adjust the image scale to ensure that it is displayed correctly relative to the boundaries.

If you want, send me the structure of your ImageLabel, and I’ll help you create a specific code for positioning and scaling it!

1 Like