Card Dealing with Tween Chain of Phaser 3

phaser, card dealing, tweens, advance tutorials

2024-02-02T04:14:54-08:00

_Tween Chain_ is the new feature added on Phaser 3.60, it is super awesome feature done by [Richard Davey](https://github.com/photonstorm). _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;
}