Sign in to follow this  
alr92

Is it posible to tween graphic in Phaser 3 ?

Recommended Posts

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.

Share this post


Link to post
Share on other sites
   
    //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
  });

 

Share this post


Link to post
Share on other sites

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`.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.