HTML5 Drag and Match engine updated to Phaser 2.6.2 update – adding tweens

In most cases, small things make simple games look great. If you look at my latest HTML5 Drag and Match engine updated to Phaser 2.6.2 with masks and a lot of custom options you will see when you drag and then release the mouse there isn’t any kind of animation and tiles just jump in their final position.

This is not possible in a game made in 2017. You have to add an animation to make tiles smoothly move in their final position. That what I did and what I am going to show you in this post.

We will use a fast tween to place tiles in their final place once the player releases the input.

Here is the modified game:

I made the tiles a bit bigger (actually, the game size a bit smaller) to let you know what happens. Try to drag a row or a column, release and see the quick tween as tiles move into their final position.

I added some lines to the source code, which are obviously commented and highlighted, mostly located in handleStop method:

It’s just a little tween, but adds polish to the game and makes it look better. Download the source code of this new example.