Drag and drop over a square, how to know which square I dropped on?

[HimeWorks]

I'm making a chess game to practice pixi. Here's how it's set up:

1. I have a Sprite_Tile for each of the 64 squares on the board
2. I have a Sprite_Piece which represents one of the chess pieces (king, rook, queen, etc)

So basic use case is player clicks on a piece to "pick it up", and then they can drag it around.

I used the example onmousedown, onmousemove, and onmouseup events for the pieces, and it works, I can drag and drop pieces around.

To give the player a visual reference for where their piece is going to be dropped, I added an onmouseover event to the tiles, so that when they move the cursor over it, it'll change color or something. I saw there was a topic a week ago about setting the hitarea of the picked up sprite to 0 0 0 0, and that worked well. Here's a picture of how it looks:

Now I'm stuck on how to get the square I dropped it on. When the player releases the mouse, the piece will be dropped wherever their cursor is, but I'm having a hard time figuring out how to efficiently grab the sprite that I dropped it over. Since I already have onmouseover event over the tiles, I could always just store that reference globally or something, but that's probably terrible idea lol.

What's a nice way to handle this? 

[HimeWorks]

I've been reading about collision detection and I think the concept can be applied here.

My mouse cursor in this case is the collider, and can be treated as a point collider. When onmouseup event is emitted, the piece that I'm dragging will trigger its onmouseup handler. Since I know the position where the mouse was released, I can perform a "hit test" at that position on the screen to get a sprite there.

If I see a tile sprite, now I have both objects and I'm able to perform the interaction between them.

Possible issues are, does the hit test return all sprites at that position? If I have a tile with an existing piece on top, would it return the piece, or the tile, or both?

[ivan.popelyshev]

Its possible to hittest return everything. If it doesnt, check if you can change search algorithm (TreeSearch). Copy it and put your own search in "renderer.plugins.interaction.search"

[Jammy]

@HimeWorks onmouseup on the sprite they drop it on if(game.dragging==true) {hitsquare=this}
 

hope that helps.

Edited August 2, 2020 by Jammy

[HimeWorks]

4 hours ago, Jammy said:

@HimeWorks onmouseup on the sprite they drop it on if(game.dragging==true) {hitsquare=this}
 

hope that helps.

Hmm, actually onmouseup is probably good enough for a single-player game.
I only need the pieces to be clickable when it's time to choose a piece to move, so I don't actually need hit areas on all the time.

Maybe a global game phase tracker like the "game.dragging" you mentioned

1. choosing a piece (not dragging)
2. choosing where to move the piece (dragging)

Though I imagine this global variable only works because it's a one-player game. If I wanted to players to click on pieces and drag them around at the same time (like in real-life when there's no strict rules on playing with your pieces while the opponent is making their move), might need a different solution.

[Jammy]

Hiya, thats just a logic choice I think. If(myTurn){allowDragging = true} else {allowDragging = false} If it's a turn based game probably store somewhere whos turn it is, or have an event u run when it changes turns.

Addition: It sounds like in your original post you're worried about using globals. In my opinion, its your application and game therefore the entire scope is there for you to use; unless you're thinking about the game being integrated into other peoples projects at some point, in which case then it should definitely be considered.. You should though create a nice structure, for example game.state contains game state, game.events contains events etc. In my projects, although its a bit ropey, i have one global object called game, and everything else is a part of that.

Edited August 2, 2020 by Jammy