Phaser Platformer Series: 7 Animating Coins

posted on 11 April 2021

We spoke about ‘juicing’ in a previous tutorial when we added ‘sticky friction’ / inertia to our controls. We’re going to take a break from platformer tropes for this post, and begin to make our game fun and satisfying with some easy wins that aren’t gameplay. A great example of this can be seen here on less milk. Our game has some solid controls now, but it’s not that fun or engaging yet.

Let’s juice our game a little by making the coin collection more engaging. Instead of coins just disappearing, let’s have a funky animation of some sort. I don’t know how / why this ever landed in front of my eyes, but ‘PewDiePie: Legend of the Brofist‘ has got a real nice mechanic for this. When you collect a coin, it animates up to the top left corner where the score is, and the score is updated. We’ll borrow that idea.

Here’s what we’ll be making:

See the Pen
Phaser Platformer: 7 Animating Coins by Digitherium (@digitherium)
on CodePen.

If you are viewing on a mobile, you can open a version of it here without all the codepen chrome taking up screen space so you play it in landscape mode.

The first thing we’ll do is change the score text so it’s just a number. We’ll also move it to the left now that it’s smaller, but we’ll leave a little bit of space for a coin graphic to sit next to it:

scoreText = this.add.text(46, 16, '0', { fontSize: '32px', fill: '#fff' });

For the coin graphic we’ll set a global variable called scoreCoin, and add some code to our create function to add to it the screen:

 scoreCoin = this.add.sprite(30, 32, 'coin');
 scoreCoin.setOrigin(.5, .5);
 scoreCoin.scaleX = .5;
 scoreCoin.scaleY = .5;

We’ve changed the origin, which is the point at which the graphic will rotate and scale around, to be the centre of the coin. We’ve also scaled it down by half.

Next up we need to edit the collect coin function. It currently just disables the body so it can’t be collected over and over, increments the score and changes the score text. We want to add some animation in the form of a tween. First the coin you just collected.

//tween coin to score coin in corner shrink
  var tween = this.tweens.add({
      targets: coin,
      alpha: 0.3,
      angle: 720,
      x: scoreCoin.x,
      y: scoreCoin.y,
      scaleX: 0.5,
      scaleY: 0.5,
      ease: 'Linear',
      duration: 500,
      onComplete: function() {
          destroyGameObject(coin);
      },
  });

This takes the coin, fades it out slightly (down to 30 percent opacity/aplha), rotates it (720 degrees, so 2 full spins), scales it (0.5, so half size), and moves it to the top corner where our scoreCoin is (we use the scoreCoin objects x and y coordinates). The idea is almost like the scoreCoin is some sort of magnet, and each coin you collect is drawn to it and joins your lovely big fat pile of gold. When this animation is complete we call a function we added called destroyGameObject which just does this:

function destroyGameObject(gameObject) {
      // Removes any game object from the screen
      gameObject.destroy();
  }

Just a simple cleanup to get rid of any game objects we no longer need. At the same time we’ll animate our scoreCoin spinning around and getting bigger, and then shrinking back down again.

//rotate score coin and make bigger before shrinking again
var scoreCoinTimeline = this.tweens.timeline({
    targets: scoreCoin,
    duration: 100,
    tweens: [{
            scaleX: 0.8,
            scaleY: 0.8,
            angle: "+=45"
        },
        {
            scaleX: 0.5,
            scaleY: 0.5,
            angle: "+=45"
        }
    ]
});

Here were are scaling it up to 0.8 and rotating it 45 degrees. We then scale it back done and rotate it another 45 degrees. As our coin is square we can just keep on rotating it these 90 degrees each time and will look the same as when it started.

The score is updated as usual but now it’s got a bit more to it and makes the game that little bit more fun to play. Next we’ll add some baddies.

chromeless mobile version
view all the code on codepen
download the source on github.