CODEWITHSUNDEEP
javascriptphaser-framework
SimpleJ
SimpleJ

Reputation: 14768

Phaser 3 tween opacity?

I'm trying to tween a sprite from one point to another and have it fade away while it's moving. I've tried this:

const tween = game.tweens.add({
  targets: [log.sprite],
  x: fire.x,
  y: fire.y + (fire.height * 0.2),
  opacity: 0,
  duration: 300,
  repeat: 0,
  onComplete() {
    destroyLog(log);
    resolve();
  },
});

But this doesn't work. I'm having a lot of trouble finding good API docs for Phaser 3, so I'm not sure where I should be looking for this information.

Upvotes: 5

Views: 7310

Answers (1)

samvel1024
samvel1024

Reputation: 1163

You probably should use alpha instead of opacity. Below is a working example for Phaser3. The start and end value lambdas are good just for flexibility. I guess you can replace them by values directly. this refers to Phaser.Scene instance.

this.add.tween({
  targets: [sprite],
  ease: 'Sine.easeInOut',
  duration: 1000,
  delay: 0,
  x: {
    getStart: () => startX,
    getEnd: () => endX
  },
  y: {
    getStart: () => startY,
    getEnd: () => endY
  },
  alpha: {
    getStart: () => startAlpha,
    getEnd: () => endAlpha
  },
  onComplete: () => {
    // Handle completion
  }
});

You can easily find helpful usage examples for Phaser 3 by cloning the repo locally and searching for some keywords in the code.

Upvotes: 8

Related Questions