Only picking one sprite on overlap

[eloguvnah]

Hey guys,

 

I'm creating a drag and drop interface and using arcade.overlap with onDragStop to position a sprite with a "drop zone" group. Unfortunately, the draggable sprite is large enough to cover two drop zones at the same ime. I have a custom property ("occupied") that is set to true while the sprite x,y is set to the drop zone x,y when a sprite is dropped and overlapping. Unfortunately, it does this for both drop zones in the group and both are "occupied" although only one x,y is used.

 

Hope that makes sense. But my question is how do I only allow for only one sprite to be triggered on overlay?

[eloguvnah]

I think I figured out a work around. Not sure if there is more sensible way, but I set a one second timer whether the "drop box" is allowed to be occupied. This allows for only one overlay at a time. 

[jonoco]

I was having the same problem while building an inventory with drag-and-drop items. But, I was having problems with overlap behaving properly, so I managed a way around without relying on the physics engine.

 

I set each item sprite item.events.onDragStop to iterate through the slots of the inventory to check if they were within bounds of any slots:

item.events.onDragStop.add(function (dropItem) {    this.inventory.forEach(function (slot) {        if (this.inBounds(dropItem, slot)) {      this.moveItemToInventory(dropItem, slot);    }   }, this);}, this);

And to check if the item was in the bounds of one slot, I just checked whether the center of the item was within the slot:

inBounds: function (obj1, obj2) {    var item = obj1.getBounds();    var slot = obj2.getBounds();    if (slot.x < item.centerX &&       (slot.x + slot.width) > item.centerX &&        slot.y < item.centerY &&       (slot.y + slot.height) > item.centerY) {      return true;    } else {      return false;    }}

And then my moveItemToInventory handles the rest!

 

Anyway, that's how I handled it, hope it helps give you some ideas.