Can anyone Explain GUI Collisions, because ROBLOX Wiki does a poor job of explaining it especially with the idea of using edges for Collision detection?
I wrote up part of a wiki article for GUI collisions but never ended up publishing. Here's the algorithm I created for it. It will work for general cases, but not for rotated GUIs.
In order to check if two GUI objects overlap, we can use the read-only AbsolutePosition and AbsoluteSize properties to calculate the positions of the four corner points of each rectangle. AbsolutePosition is the offset (in pixels) from the top-left corner of the game window, while AbsoluteSize is the width and height of the GUI object, in pixels. For example, if a button is located 20 pixels from the top and 40 pixels from the left side of the screen, the AbsolutePosition will be 40, 20. Both properties return the Vector2 data type, a simple data type with only two components: x and y.
function collidesWith(gui1, gui2) local gui1_topLeft = gui1.AbsolutePosition 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)) end