There are several animations that make the game work. They use different techniques and I wanted to cover each of them here.

Piece Drops

The first type is piece drops. This is a relatively simple animation where the values of the tilegrid are simply updated with the corresponding value. The dropping effect is achieved by updating the columns from the bottom up. Initially, I was going to try and make each piece a separate tilegrid and move them all at the same time, but that both increased the game's complexity and caused a lot of lag, especially in the initial piece drop.

Even with using a single tilegrid, there's still a bit of lag when everything drops after a reset. The delay during the animation can cause issues with the mouse buffer getting full and this causes it to not respond until a reset has been performed. To get around this, the mouse update function is called within the gravity function.

One interesting bit is when matches are made, in order to show which pieces were matches, a half second delay before dropping highlights where the pieces were removed before dropping them again. Although the technique is simple, it is very effective.

Selecting Pieces

Selecting pieces is accomplished with a displayio group. This group contains 2 tilegrids stacked on top of each other. The lower tilegrid is the sprite of the piece that is selected and the upper tilegrid contains the selector sprite. When a piece is clicked, the group is moved above the clicked piece. The tilegrid is set in the selected layer, the group is made visible, and the piece on the game board is replaced with an empty sprite. This helps prepare it for swapping. If the piece is clicked again, it is deselected by reversing the process.

Swapping Positions

Swapping the positions of pieces is done in a very clever way. The first piece is already selected and placed in a tilegrid as described above. When a second piece adjacent to the first is clicked, the swap piece is loaded into another tilegrid in a manner similar to the first piece. The steps that the pieces need to move are then calculated. This is to help figure out which direction each piece should go, based on the current position and the target position, to perform the swap animation. After that the tilegrids are simply moved and displayio takes care of the rest. Once both pieces have been moved, the pieces are unloaded from the tilegrids and the game board is updated.

Hints are similar to the piece swapping, except the selector is hidden during the process.