match 3 game in pixi.js 103: JUICE and POLISH
Tags: pixijs, javascript, gamedev, tutorial
Published: 2021-12-12 17:11:37

After [PART 1](https://dev.to/roman_guivan_17680f142e28/match-3-game-in-pixi-js-36hm) and [PART 2](https://dev.to/roman_guivan_17680f142e28/match-3-game-in-pixijs-102-gameplay-3e9k) we're left with an app that has the humble beginnings of a match-three game, but still won't be sufficient to get you a PASS if it was any kind of assignment

Let's add some sprinkles here and there, once you're done - [the result might end up being somthing like this](https://suspicious-goldberg-1c6bb6.netlify.app/) (or way better, it's all in your hands, really!)

### Animations 

The easiest cheapest way to animate sprites without additional animation frames (which i don't have) is to change sprite's properties over time. Position, scale and tint are my TOP-3. If i would like my animals to EXPAND a bit, after they're added onto the screen, something like this would totally do:

      function animate(sprite) {
          setTimeout(()=> sprite.scale.set(0.9, 0.9), 100);
          setTimeout(()=> sprite.scale.set(1.1, 1.1), 200);
          setTimeout(()=> sprite.scale.set(1.0, 1.0), 300);
      }

The results would be a bit crude and jerky, but you get the idea. Here's a 60fps version of this same function 

      function animate(sprite, scaleTo, timeSeconds) {
          const frames = timeSeconds * 60, timePerFrameSeconds = 1 / 60;
          for (let i=0; i< frames; i++) {
             const frameTimeSeconds = timePerFrameSeconds * i;
             const scale = i / frames * scaleTo;
             setTimeout(()=> sprite.scale.set(scale, scale), frameTimeSeconds * 1000);
          }
      }
Again, crude, `requestAnimationFrame` would perform better than `setTimeout`, I'm using this code for explaining purposes only. 

What we achieved here is called linear interpolation. We gradually changed value of sprite scale, over time, till `sprite.scale` became `scaleTo`. While linear interpolation is perfectly fine, human eye finds these most tasteless and dull.  [Tween.js](https://createjs.com/tweenjs) to the rescue!

[Tween.js](https://createjs.com/tweenjs) will calculate interpolated values for different kinds of easing functions, so instead of linear - your animated scaling can be exponential or use one of many other functions available. 

[You can check the animations (or just tweens) i have used in the game here](https://github.com/guivanrv/pixijs-match-three-example/blob/main/src/scripts/tween.js) For example, this same scale animation looks like this:

        export function popIn(sprite, time = 300) {
	const props = { x: 0.8, y: 0.8 };
	new TWEEN.Tween(props)
		.to({ x: 1, y: 1 }, time)
		.easing(TWEEN.Easing.Bounce.Out) // Use an easing function to make the animation smooth.
		.onUpdate(() => {
			sprite.scale.x = props.x;
			sprite.scale.y = props.y
		})
		.start()
      }
Now add `popIn(sprite);` somewhere after you have added it onto screen with `this.addChild(sprite)` and you're golden! Things "pop-in" nicely. I suggest you try animating sprite.tint too, to add some color to it.

**IMPORTANT NOTE**
Tween.js has an .update() function that has to be called too, with a timestamp. PIXI's dt, or one from requestAnimationFrame won't do. What does work for me, is passing performance.now() value. [Here's the place where i do it in my implementation](https://github.com/guivanrv/pixijs-match-three-example/blob/main/src/scripts/index.js#L112) 

### Sounds

You can write your own wrapper around HTML5 audio, insert an <audio> element, listen to `load` event and so on, but for practical purposes i suggest you give [howler.js](https://howlerjs.com/) a try. 

Get some free sounds from [https://freesound.org/](https://freesound.org/), organize them into your static assets folder, then you can create a separate [audio.js](https://github.com/guivanrv/pixijs-match-three-example/blob/main/src/scripts/audio.js) module and trigger sound effects as exported members

Some looping background theme music might be a good idea too.

Once again [the source of the example can be found here](https://github.com/guivanrv/pixijs-match-three-example) or just [play the deployed version](https://suspicious-goldberg-1c6bb6.netlify.app/)

If you have followed this series, and actually made something of yours - post links or your questions in the comments bellow. 

I think at it's current state the repo already shows the basics of making a match-three game in PIXI.js. A losing condition and some additional scenes like a menu and a game over screen still can be added. If you're interested in these being explained - leave it in the comments below too. 

For now - i'm leaving this series here, hope you liked it. Roman G - signing off