2D Gui Collision

Help and Feedback Scripting Support
, ,
#1

i don’t know if this should be in art design or in scripting since it revolves around these two Anyways:

I’m working on a Roblox project where I have a 2D grid made up of squares inside a frame. I also have another UI element (from a separate frame) that I need to check for collisions with the squares on the grid. I’m using absolute positions and sizes to detect overlap
i don’t know how to use this method since i don’t understand this part of the script

if pos1.X + size1.X > pos2.X and pos1.X < pos2.X + size2.X then (code here ) end

I want to know how to use this method and if you can help me with this

i would be very grateful

#2

This look like a simple AABB collision system. I’m no expert but it seems to only check on the X axis and for some reason that I don’t know that means that its checking bellow / above the frame for the other frame. So if (frame1, frame2) frame1 is over frame 2 it will return true or if frame2 is above frame1 it will still be true. But when Frame-1 / 2 are separated on the X axis it will return false.

image

Example of your method 
-- just create simple gui
local gui = Instance.new("ScreenGui", game.Players.LocalPlayer.PlayerGui)

local f1 = Instance.new("Frame", gui)
f1.Size = UDim2.fromOffset(100, 100)
local f2 = Instance.new("Frame", gui)
f2.Size = UDim2.fromOffset(100, 100)

-- offset one box
f1.Position = f2.Position + UDim2.fromOffset(1009, 0)

-- get positions
local pos1 = Vector2.new(f1.Position.X.Offset, f1.Position.Y.Offset)
local pos2 = Vector2.new(f2.Position.X.Offset, f2.Position.Y.Offset)

local size1 = Vector2.new(f1.Size.X.Offset, f1.Size.Y.Offset)
local size2 = Vector2.new(f2.Size.X.Offset, f2.Size.Y.Offset)

-- see if it overlaps on the x-axis
if (pos1.X + size1.X > pos2.X and pos1.X < pos2.X + size2.X) then 
	print("The boxes collide on the x-axis!")
else
	print("The boxes are not colliding on the x-axis!")
end
Example of a whole AABB check

!This will check on both axis AKA if there is a collision happening

local Frame_AABB_Overlap = function(a: Frame, b: Frame)
	local a_size = a.AbsoluteSize
	local b_size = b.AbsoluteSize

	local a_pos = a.AbsolutePosition
	local b_pos = b.AbsolutePosition

	return not (a_pos.x + a_size.x < b_pos.x or b_pos.x + b_size.x < a_pos.x or
		a_pos.y + a_size.y < b_pos.y or b_pos.y + b_size.y < a_pos.y)
end

-- just create simple gui
local gui = Instance.new("ScreenGui", game.Players.LocalPlayer.PlayerGui)

local f1 = Instance.new("Frame", gui)
f1.Size = UDim2.fromOffset(100, 100)
local f2 = Instance.new("Frame", gui)
f2.Size = UDim2.fromOffset(100, 100)

-- offset one box
f1.Position = f2.Position + UDim2.fromOffset(10, 10)

print("The box is overlapping: ", Frame_AABB_Overlap(f1, f2))

To sum it up the snippet you provided checks if theres a frame / or any other gui instance bellow or above it

Hope this helps in some way or another, sorry if anything was unclear

EDIT: Now when I’m looking at it it seems that I’ve misunderstood your problem sorry, hope that this could come to some help somehow anyways. :tongue:

#3

well i think the code is correct but ur explanatione is wrong.
What i was talkimg about is how to detect a colision between 2 gui elements like in 3d if u want to detecr a colision u use the .Touched event.
you see what i ve seen so far is the if statemenr (of a size +pos<b pos) this part it seems that i dont understand why it works like why this formula Detects the overlap betweem 2 gui elemnts