Jump to content

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


Recommended Posts

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? 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by Jammy
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...