How do I make GUI hitboxes?

Help and Feedback Scripting Support
#1

Im making a 2D GUI game for learning purposes, do you know how I could make obstacles?
I’m using UDim2 for Movement.

-- || Options ||
Test = true -- Debug stuff


local gui = game.Players.LocalPlayer.PlayerGui.Screen
if Test == true then
	gui.Player.dbug.Visible=true
end
local m = game.Players.LocalPlayer:GetMouse()
local debounce = false
m.KeyDown:connect(function(k)
	if k == "d" then
		debounce=false
		while true do
			wait()
			gui.Player.Position += UDim2.new(0.01,0)
			gui.Player.dbug.Text = "left"
			if debounce == true then break end
		end
		
	end
	if k == "a" then
		debounce=false
		while true do
			wait()
			gui.Player.Position += UDim2.new(-0.01,0)
			gui.Player.dbug.Text = "right"
			if debounce == true then break end
		end
	end
	if k == "w" then
		debounce=false
		while true do
			wait()
			gui.Player.Position += UDim2.new(0,0,-0.01,0)
			gui.Player.dbug.Text = "up"
			if debounce == true then break end
		end
	end
	if k == "s" then
		debounce=false
		while true do
			wait()
			gui.Player.Position += UDim2.new(0,0,0.01,0)
			gui.Player.dbug.Text = "down"
			if debounce == true then break end
		end
	end
end)
m.KeyUp:connect(function(k)
	debounce=true
end)
3 Likes
#2

Change the mouse icon using mouse.Icon and then have MouseEnter events correspond to hitting obstacles.

#3

You should probably read before posting.
Its 2D, it doesn’t use the mouse.

#4

I thought you were making something like scary maze game.

#5

maybe this might help you? i’m not a scripter so idk

2 Likes
#6

whilst this solved pretty much every other question I have, this didn’t solve the current question

1 Like
#7

You make GUI hitboxes by making hitboxes on GUIs

Jokes aside, make the GUI size the same as the hitbox size.

#8

You could use ZIndex to make ui elements overlap but they already have hitboxes

#9

Assuming you want to draw the hitbox around a GuiObject | Roblox Creator Documentation then you can achieve this using the GuiBase2d | Roblox Creator Documentation, GuiBase2d | Roblox Creator Documentation, and GuiBase2d | Roblox Creator Documentation properties to set the align and size a Frame | Roblox Creator Documentation object. If you want to make the hitbox visible (for debugging purposes or whatever) you can add a UIStroke | Roblox Creator Documentation object to it.

For example, something like this might work:

local SHOW_HITBOXES = true

local function DrawHitbox(guiElement)
	if not guiElement:IsA("GuiBase2d") then return end
	local gui = guiElement:FindFirstAncestorWhichIsA("LayerCollector") -- get the gui container

	local absPos = guiElement.AbsolutePosition
	local absSize = guiElement.AbsoluteSize
	local absRot = guiElement.AbsoluteRotation

	local hitbox = Instance.new("Frame")

	hitbox.BackgroundTransparency = 1 -- make it invisible

	hitbox.Position = UDim2.fromOffset(absPos.X, absPos.Y)
	hitbox.Size = UDim2.fromOffset(absSize.X, absSize.Y)
	hitbox.Rotation = absRot

	if SHOW_HITBOXES then
		local outline = Instance.new("UIStroke")
		outline.Color = Color3.new(1,0,0) -- set outline color to red
		outline.Parent = hitbox
	end

	hitbox.Parent = gui
end

This is just a simple function for drawing and visualizing a hitbox. It will not update or “follow” the element it surrounds. It is just an example. If you want to detect 2d collisions with hitboxes then you already have all the information you need with the aforementioned AbsolutePosition, AbsoluteSize, and AbsoluteRotation properties.

If you are having trouble understanding how to implement this then I recommend checking out this tutorial on the Separating Axis Theorem.

1 Like
#10

Explanation

Sorry I was a bit vague, I want to know how I would make it impossible to walk through walls.
The code provided on the post is movement, so if A is pressed Udim2.new blah blah blah.
[its a 2d gui game]

#11

Just teleport it back if the ui are touching

#12

but how do i know where back is? theres 4 possible sides that the player could enter from.

#13 
local oldPosition = ui.Position 

ui:GetPropertyChangedSignal("Position"):Connect(function()
   -- check if its touching
   ui.Position = oldPosition
end)
#14

ill try this, give me a moment

#15

It finally works, thank you!
I’d also like to thank @BuilderBob25620 for pointing me in the direction

2 Likes