Detect If GUI frame is colliding with another

[YouTube_HQplus (Matthew)]

I’m trying to make a rhythm sorts game and I’m trying to make it so if the pot is in the hitbox, it gets flung back.

This is my current code

local start = true
local cowbell = script.Parent["Rhythm Heaven Cowbell"]
local rep = game:GetService("ReplicatedStorage")
local localp = game:FindFirstChild("Players").LocalPlayer
local gui1 = script.Parent.Parent.Hitbox
local gui2 = script.Parent.Parent.pot
function collidesWith(gui1, gui2)  -----got this from dev fourm thanks to whoever made it
	local gui1_topLeft = gui1.AbsoluteSize
	local gui1_bottomRight = gui1_topLeft + gui1.AbsoluteSize

	local gui2_topLeft = gui2.AbsolutePosition
	local gui2_bottomRight = gui2_topLeft + gui2.AbsoluteSize
	return ((gui1_topLeft.x < gui2_bottomRight.x and gui1_bottomRight.x > gui2_topLeft.x) and (gui1_topLeft.y < gui2_bottomRight.y and gui1_bottomRight.y > gui2_topLeft.y))   --- return their values
end
script.Parent.MouseButton1Click:Connect(function(plr)
	if not debounce then
		if start == true then
			start = false
			script.Parent.Parent.TextLabel.Text = "Tap Joe In Time with the rhythm."
			cowbell:Play()
			wait(1)
			cowbell:Play()
			wait(1)
			cowbell:Play()
			wait(0.5)
			cowbell:Play()
			wait(0.5)
			cowbell:Play()
			wait(0.5)
			cowbell:Play()
			script.Parent.Parent.TextLabel.Visible = false
			wait(0.5)
			script.Parent.Parent.pleasedontban:Play()
		else
			script.Parent.Whoosh:Play()
			script.Parent.Image = "rbxassetid://121803704513390"
			wait(0.13)
			if collidesWith() then
				gui2:TweenPosition(UDim2.new(0.37, 0,0.403, 0), "Linear", "In", 1, false)
			end
			script.Parent.Image = "rbxassetid://126828287438911"
		end
	end
end)

[YouTube_HQplus (Matthew)]

The transparent black square is the hitbox

[proturk_yt (Cozmo)]

[v3.0] GuiCollisionService - Gui collisions done right

If you are looking for a physics based gui collision system, check this out: Nature2D - 2D Physics Engine for UI Elements [GuiCollision-removebg-preview (1)] Get GuiCollisionService here: https://www.roblox.com/library/7145661386/GuiCollisionService Version: v3.0 Documentation: View Table of Contents About Getting Started Initializing Examples Navigation About GuiCollisionService is an easy to use module that focuses on helping you create collidable Guis and help you detect them us…

How would I determine if a UI is overlapping another UI?

You could get the Size of each UI element and compare distances between them along the X and Y axis. Let’s say that we want to detect an overlap of two UI elements on the X axis. If the difference in absolute X position between the two elements is less than the sum of their absolute X size, you know they must be overlapping. (We are using AbsolutePosition and AbsoluteSize so we don’t have to worry about Scale / AnchorPoint of the UI). It’s just the same for the Y axis as it is the X axis for ca…

Check If ANY Two Gui's Are Touching

You can use a module like the GuiCollisionService. If you just need something simple to check if two gui’s are colliding, and assuming your GuiObject is rectangular and not rotated, you can check collisions on every corner of each Gui by doing something like this with a LocalScript. local Player = game:GetService("Players").LocalPlayer local PlayerGui = Player:WaitForChild("PlayerGui") function GatherGUIsTouching(GUIObject) local TouchingGUIs = {} local Corners = { TopLeftCorner = Vecto…

Help needed with detecting whether or not two frames are touching

Hey dude, looks like you’re on the right track for sure using absolute size and absolute position. Looks like for now you’re just checking the y axis, so for simplicity I’m just going to go over the process for the y axis. If you need to also check the x axis, its the same thing. So you’ll want 4 numbers, describing the endpoints of both frames. You can get the lower bounds by: a1 = frameA.AbsolutePosition.Y b1 = frameB.AbsolutePosition.Y And the upper bound by adding the size onto that: …

Please search a little about your topic before posting. Also wait() is deprecated, use task.wait() instead.

[YouTube_HQplus (Matthew)]

Yes, I’ve done my research but I keep getting an error.

[proturk_yt (Cozmo)]

What’s one the line that errors?

[YouTube_HQplus (Matthew)]

From the function, I don’t know why its causing this error

[proturk_yt (Cozmo)]

Try printing the gui1, gui2 both under where you define them and under the collidesWith() function then see what they print.

print(gui1, gui2)
function collidesWith(gui1, gui2)  -----got this from dev fourm thanks to whoever made it
	print(gui1, gui2)
	local gui1_topLeft = gui1.AbsoluteSize
	local gui1_bottomRight = gui1_topLeft + gui1.AbsoluteSize
	
	local gui2_topLeft = gui2.AbsolutePosition
	local gui2_bottomRight = gui2_topLeft + gui2.AbsoluteSize
	return ((gui1_topLeft.x < gui2_bottomRight.x and gui1_bottomRight.x > gui2_topLeft.x) and (gui1_topLeft.y < gui2_bottomRight.y and gui1_bottomRight.y > gui2_topLeft.y))   --- return their values
end

Make sure you are pathing these correctly:

local gui1 = script.Parent.Parent.Hitbox
local gui2 = script.Parent.Parent.pot

[YouTube_HQplus (Matthew)]

I’m a bit confused on what your saying… Like put the print under the place where I defined gui1 and gui2?

[Zer0Wit (zerod)]

Your not sending data to the function, it errors because you need to send parameters

[YouTube_HQplus (Matthew)]

Should I define them inside the function?

[Zer0Wit (zerod)]

Ok, so basically, you already have gui1 and gui2, but when that function is called, you overwrite those names with the function parameters, and since you don’t send any parameters, gui1 and gui2 is nil

[YouTube_HQplus (Matthew)]

Still confusing, but how can I send the parameters to the function?

[Zer0Wit (zerod)]

You can either remove the parameters from CollidesWith, or do this: local result = CollidesWith(gui1, gui2)

[YouTube_HQplus (Matthew)]

Sorry If I sound like a total idiot but, where do I place the result? I’m not that good with code.

[Zer0Wit (zerod)]

local start = true
local cowbell = script.Parent["Rhythm Heaven Cowbell"]
local rep = game:GetService("ReplicatedStorage")
local localp = game:FindFirstChild("Players").LocalPlayer
local gui1 = script.Parent.Parent.Hitbox
local gui2 = script.Parent.Parent.pot
function collidesWith(gui1, gui2)  -----got this from dev fourm thanks to whoever made it
	local gui1_topLeft = gui1.AbsoluteSize
	local gui1_bottomRight = gui1_topLeft + gui1.AbsoluteSize

	local gui2_topLeft = gui2.AbsolutePosition
	local gui2_bottomRight = gui2_topLeft + gui2.AbsoluteSize
	return ((gui1_topLeft.x < gui2_bottomRight.x and gui1_bottomRight.x > gui2_topLeft.x) and (gui1_topLeft.y < gui2_bottomRight.y and gui1_bottomRight.y > gui2_topLeft.y))   --- return their values
end
script.Parent.MouseButton1Click:Connect(function(plr)
	if not debounce then
		if start == true then
			start = false
			script.Parent.Parent.TextLabel.Text = "Tap Joe In Time with the rhythm."
			cowbell:Play()
			wait(1)
			cowbell:Play()
			wait(1)
			cowbell:Play()
			wait(0.5)
			cowbell:Play()
			wait(0.5)
			cowbell:Play()
			wait(0.5)
			cowbell:Play()
			script.Parent.Parent.TextLabel.Visible = false
			wait(0.5)
			script.Parent.Parent.pleasedontban:Play()
		else
			script.Parent.Whoosh:Play()
			script.Parent.Image = "rbxassetid://121803704513390"
			wait(0.13)
			if collidesWith(gui1, gui2) then
				gui2:TweenPosition(UDim2.new(0.37, 0,0.403, 0), "Linear", "In", 1, false)
			end
			script.Parent.Image = "rbxassetid://126828287438911"
		end
	end
end)

[YouTube_HQplus (Matthew)]

Ok, I’ll try adding a print so I can check if it works or not, I’ll update you later

[YouTube_HQplus (Matthew)]

The code is working fine, no errors but I believe it’s due to how I originally coded this section.

There is nothing in the output, can you help me fix it?

[Zer0Wit (zerod)]

Well that must mean they are not colliding then, or looking at your code, it might just be checking the corners (actually no)

[Zer0Wit (zerod)]

Add above that line print(CollidesWith(gui1, gui2))

[YouTube_HQplus (Matthew)]

White is the pot,
Black is the hitbox