(tl;dr at bottom)
I'm working on a chess-like game. The user can select a piece and either click on a square to move the piece there, or drag the piece to the square they want it to move to. To implement this, I have 64 Area2D nodes for the squares, and each of these nodes includes a Sprite node for the piece on that square. To implement the dragging, I have an additional Sprite node that takes the texture of the piece that was selected when clicked, and disappears when the mouse button is released. Additionally, I hide the tile's "Piece" sprite when clicked, and then show it again when the mouse button is released.
The problem comes when the draggable sprite is released over a vacant square. 3 things should happen here:
- The draggable sprite should disappear
- The tile that was clicked should show its "Piece" sprite
- The piece should move from the tile that was clicked to the tile that the mouse was released over.
Ideally, all of these steps would happen before the next draw to the screen. Unfortunately, it seems like sometimes, steps 1 and 2 occur, then a screen draw occurs, and finally, step 3 occurs. This results in a one-frame "flash" of the piece in its original tile before it moves to the other tile.
I feel like this issue is pretty specific and difficult to explain with words, so I included an example project demonstrating this issue, here. The project is only 3 GDScripts and about 60 lines of code. When running the project, drag the piece from one tile to the other and you should sometimes see the flashing.
How would you fix this?
tl;dr: Here is a very small project. If you run it and drag the piece to the empty square, it will occasionally flash in its original square before moving. Why?