alr92 Posted October 4, 2018 Share Posted October 4, 2018 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. Link to comment Share on other sites More sharing options...
blackhawx Posted October 4, 2018 Share Posted October 4, 2018 //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 1 Link to comment Share on other sites More sharing options...
alr92 Posted October 4, 2018 Author Share Posted October 4, 2018 Thank you very much for this solution, really helped me a lot. Link to comment Share on other sites More sharing options...
Pavel Mishin Posted February 3, 2019 Share Posted February 3, 2019 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`. Link to comment Share on other sites More sharing options...
Umz Posted April 8, 2019 Share Posted April 8, 2019 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. Link to comment Share on other sites More sharing options...
Recommended Posts