Is it posible to tween graphic in Phaser 3 ?

[alr92]

Hi,

i have the following code:

let button = this.add.graphics();
button.fillStyle(0x000000, 0.6); // color, alpha
button.fillRoundedRect(0, 0, 100, 100, 12); // x, y, width, height, radius
button.lineStyle(3, 0x6a7901, 1); // lineWidth, color, alpha
button.strokeRoundedRect(3, 3, 94, 94, 10); // x, y, width, height, radius
button.setInteractive(new Phaser.Geom.Rectangle(0, 0, 100, 100), Phaser.Geom.Rectangle.Contains);
button.input.cursor = "pointer";
button.name = "button_test";

What i need now is to make somehow only line from graphic to be able to change all the time from 0x6a7901 to 0xffffff (repeat: -1). Any ideas how to do this with tween task or maybe with something else ?

Thanks in advance.

[blackhawx]

   
    //CREATE A SIMPLE RECT WITH BORDER
    let button = this.add.graphics();
    button.fillStyle(0x000000, 0.6); // color, alpha
    button.fillRoundedRect(0, 0, 100, 100, 12); // x, y, width, height, radius
    button.lineStyle(3, 0x6a7901, 1); // lineWidth, color, alpha
    button.strokeRoundedRect(3, 3, 94, 94, 10); // x, y, width, height, radius
    button.setInteractive(new Phaser.Geom.Rectangle(0, 0, 100, 100), Phaser.Geom.Rectangle.Contains);
    button.input.cursor = "pointer";
    button.name = "button_test";
    button.x = 100;
    button.y = 100;

    //CREATE A BORDER ON TOP OF BUTTON
    let border = this.add.graphics();
    border.lineStyle(3, 0xffffff, 1);
    border.strokeRoundedRect(3, 3, 94, 94, 10);
    border.x = 100;
    border.y = 100;
    border.alpha = 0;

   //YOYO EFFECT ON BORDER
   let tween = this.tweens.add({
      targets: border,
      duration: 1000,
      delay: 500,
      alpha: 1,
      repeat: -1,
      yoyo: true
  });

 

[alr92]

Thank you very much for this solution, really helped me a lot.

[Pavel Mishin]

There is another way to tween colors - using interpolation and tweening its value. Here is example for Phaser 2:
https://sprite-storm.com/tutorial/phaser-tutorial/tweening-tint-phaser/

For Phaser 3 use `Phaser.Display.Color.Interpolate.ColorWithColor()` static method instead of `Phaser.Color.interpolateColor()` and `onUpdate`, `onUpdateParams` parameters of tween config instead of `onUpdateCallback`.

[Umz]

In case anyone else needs this in Phaser 3, web link doesn't work for me ? had to actually do some figuring out for once:

// MUST interpolate with Phaser.Display.Colour objects

let c1 = Phaser.Display.Color.HexStringToColor('#ffffff'); // From no tint
let c2 = Phaser.Display.Color.HexStringToColor('#ff0000'); // To RED

this.tweenStep = 0;
let tween = this.scene.tweens.add({
    targets: this,
    tweenStep: 100,
    onUpdate: ()=>{

        let col = Phaser.Display.Color.Interpolate.ColorWithColor(c1, c2, 100, this.tweenStep);
        let colourInt = Phaser.Display.Color.GetColor(col.r, col.g, col.b);
        sprite.setTint(colourInt);

    },
    duration: time,
    yoyo: true // Return to first tint
});

Tweens to C2 and then YoYo back to C1.