Demo Preview

Tween Chain is the new feature added on Phaser 3.60, it is super awesome feature done by Richard Davey. The primay use of tween chain It is to chain multiple different tweens in more comfortable manner

Card Dealing animation is very common when you want to make a card/board games, in this tutorial I will explain how to use tween in Phaser in order to achive a smooth card dealing animation. You can definitely add more juicy stuff on top of this base.

Create function:

function create() {
  // A simple background for our game
  this.add.image(400, 300, "sky");


  const card1 = this.add.image(200, 200, "1b");
  const card2 = this.add.image(200, 200, "1c");
  const card3 = this.add.image(200, 200, "1d");
  const card4 = this.add.image(200, 200, "1b");
  const card5 = this.add.image(200, 200, "1c");
  const card6 = this.add.image(200, 200, "1d");

  // add a list of cards you want to deal and starting position of the deal cards
  dealCards(this, [card1, card2, card3, card4], { x: 400, y: 400 });
}

Card Dealing Tween function:

function dealCards(context, cardList, pos) {
  const tweenChain = context.tweens.chain({
    tweens: [
      {
        targets: cardList,
        x: function (a, b, c, d) {
          return pos.x + 85 * d; // calculate the next position of each card
        },
        y: pos.y,
        duration: 900, // duration of the tween
        angle: { from: 180, to: 0 }, // animate angle from 180 deg to 0
        delay: context.tweens.stagger(100, { start: 0 }), // stagger delay
        ease: Phaser.Math.Easing.Sine.Out // ease function
      },
      {
        targets: cardList, // second phase of the tween
        props: {
          scaleX: { value: 0, duration: 300, yoyo: true } // scale X with yoyo
        },
        // onYoyo: function (tween, target) {
        //   target.setTexture(target.cardValue); // change card texture to front
        // },
        ease: Phaser.Math.Easing.Linear // ease function
      }
    ],
    paused: false,
    repeat: 0
  });
  return tweenChain;
}