How many percentage/pixels is an element overlapped

Unity Engine
,
1

Hello together,

is it possible to get the value for how much percentage or pixels one element overlaps another ?

I have eight (spell)buttons in the UI with separate handlers for drag and drop. The problem is, if i drag a “spell” (simple gameobject with just an image and a script) from one button to another and i drop it in the mid of the buttons, both get the gameobject. So i wanna check, if it overlaps a button more then 60% (or any number), then it should move/drop to that, otherwise it should stay on the current button.

6349680--705828--upload_2020-9-25_20-53-42.png

6349680--705825--upload_2020-9-25_20-53-10.png

The “problem” is, that on the first button the event OnEndDrag is fired and for the second the OnDrop event. That should be fine, but i have to check in which event anything should be done, depending on which button is overlapped more.

Kind regards,
Sphinks

2

If you are using a Rect to collide against the buttons, just use a zero-sized rect, which can by definition only hit one of the button slots at a time. You might need to make an extra Rect in your hierarchy for this purpose.

3

If you’re overlapping more than one, just check which rect the center point of the hovering rectangle is overlapping to disambiguate.

1 Like
4

Hi,

thanks for your answers!

@Kurt-Dekker : Sorry, but i don´t get your answer completely. I´m using the OnDrop event from the IDropHandler. I have no special checks for collisions (or is that done internaly in the event ?).

@PraetorBlue : I think that´s what i want/need. But I don´t know how to do that. Tried it with the followong lines:

public void OnDrop(PointerEventData eventData)
{
   // eventData.selectedObject = dropped spell object               
   bool test = RectTransformUtility.RectangleContainsScreenPoint(eventData.selectedObject.GetComponent<RectTransform>(), GetComponent<RectTransform>().rect.center);
   bool test2 = eventData.selectedObject.GetComponent<RectTransform>().rect.Contains(GetComponent<RectTransform>().rect.center);
}

Both of them returning always true. Am i completely wrong with this ? Could you show me maybe a short example ? The overlap method itself (from a rect) takes only another rect as parameter, so can´t use it.

5

Print out the rects and I bet you’ll find they actually overlap.

6

Yes, both of them overlaps. That´s why i wanna know if it´s possible to see/check which of them is more overlapped. I think to check which button´s center point is overlapped should work, i just don´t know how to check that.

7

@Sphinks

“The “problem” is, that on the first button the event OnEndDrag is fired and for the second the OnDrop event.”

I wouldn’t trust those UI events… I would do a UI raycast to determine what you hit. But that is just me.

“Yes, both of them overlaps. That´s why i wanna know if it´s possible to see/check which of them is more overlapped”

When you end your item drag, check if item overlaps your slot(s). Then do what @PraetorBlue said. If item overlaps more than one slot, check which one contains the center of dropped Recttransform.

This example probably can’t be used as is but it should work.

var center = rt.TransformPoint(rt.rect.center);
var pos = slotRt.InverseTransformPoint(center);

if (slotRt.rect.Contains(pos, true))
{
    Debug.Log("Item center is over slot:" + slotRt.name);
}
else
{
    Debug.Log("Item center is not over slot");
}
1 Like
8

@eses Thank you very much, that was exactly what i looked for, works great!

Yes i saw a lot of times, that Raycast is used, but i´m not familiar with that, have to read first something about it. So maybe i change it in the future for a better solution., but for the moment i´m happy that it works, so it´s fine for now :smile:.

1 Like