Dealing with overlaping sprites and mouse hover

[makersho]

Hey, I am pretty new to love2D however I have a small little card game I'm writing just for practice and I've come across a problem that I am not exactly sure how to go about solving, I have cards in the player's hand but they will overlap if the player has enough cards in their hand so when the player mouses over the overlapping parts of the cards they will both trigger the on-hover function as well as have conflicts when trying to select a card. would love any suggestions on how to solve this issue.

[MrFariator]

There can be a few ways to go about this, but the one that comes immediately to mind is that you check for cards in the cursor's current position. If only a single card is detected, you do the appropriate things on that card. If multiple cards are detected, you use some heurestic to determine which one is more "correct" for the cursor's current position. For example, you might consider the card's position in player's hand (like maybe right-most card has priority over left-most), and compare. Apply effects only on the final result.

As such, the picking logic would come down to:

Code: Select all

-- while looping through the cards you've detected
if not currentlyPickedCard then
  -- we haven't picked a card yet, so just use the first one detected
  currentlyPickedCard = detectedCard
elseif currentlyPickedCard.position < detectedCard.position then
  -- detectedCard has higher position than currently detected one, so make it the current selection
  currentlyPickedCard = detectedCard
end

Of course, this will depend on how your cards are implemented.

[makersho]

Thank you, that's a great idea! I appreciate the quick response.

[RNavega]

It doesn't solve the overlapping problem (of which picking the topmost card like MrFariator suggested is probably the only way to address it), but anyway, to make it clear which card is being picked, there's that Mac OS docker zoom effect on mouse hover, which could be placed on the cards:

ezgif-6-016504c821.gif (510.9 KiB) Viewed 11851 times

[MrFariator]

Indeed, if the amount of cards held grows and grows, you'd need to aply additional checks or methodology to the card picking. This could be spacing cards the further away they are from the cursor's current position, doing the zoom effect that you mention, or maybe even doing a "sub-selection" (cards within that range are shown separately, and you pick one out of them).

However, things like that only matter if the hand size has no upper limit. If you put a hard cap to the amount of cards you can hold, you might never need anything more sophisticated than what was discussed above. It simply depends on the given game's mechanics.

[RNavega]

Hey.
I found a CodePen example of overlapped cards done with pure CSS, I modified it to add more cards, it's in here:
https://codepen.io/RNavega1/embed/WNqmV ... l%2Cresult

There's also this other one here:
https://codepen.io/walpolea/pen/Baawevv

And in case one couldn't afford the screen real estate for those animated effects (like if you have tons and tons of cards), then maybe using another method like showing the card in isolation or something. The below is 34 cards, 100px width each, and 16px spacing between them:

cardSelectionUI.gif (409.19 KiB) Viewed 11562 times