Glowing button and tweens

[Tom Atom]

Hi, I am new to Phaser as well as to this forum...

 

  Yesterday I created button that starts glowing when user moves mouse over it and stops glowing when user leaves it. The glowing in gradual and full glow in and out takes some time (0.25 sec), so it may happen that user leaves it before it is fully in or returns before it is fully out.

 

 I created glowing button like this: standard button, over it I have glow (initialy with 0 alpha) and finally there is text above. Two callbacks are used for Button.onInputOver and Button.onInputOut. In these callbacks I do this:

        // -------------------------------------------------------------------------        glowIn(): void {            this.mGame.tweens.removeFrom(this.mGlow);            this.mGame.add.tween(this.mGlow).to({ alpha: 1 }, 250, Phaser.Easing.Sinusoidal.In, true);        }        // -------------------------------------------------------------------------        glowOut(): void {            this.mGame.tweens.removeFrom(this.mGlow);            this.mGame.add.tween(this.mGlow).to({ alpha: 0 }, 250, Phaser.Easing.Sinusoidal.In, true);        }

 Everything works well, but I would like to ask:

  - is "this.mGame.tweens.removeFrom(this.mGlow);" correct or the best way how to stop and remove tween? Sometimes when user is above button I have only to start new tween and sometimes if previous tween is still running I have to cancel it first,

  - are there any memory issues with creating so much tweens (if user is moving with mouse a lot here and there)? I do not keep any reference to it - is it garbage collected?,

  - is there any way how to stop and reuse/change tween data? I tried to stop tween and add another with .to/.from, but it only chained it if previous tween was not yet finished (I looked into examples where tweens are reused, but only when previous tween is finished)

 

Thanks, Tom

 

 

 

 

[mwatt]

I'll throw in two cents.  This won't be a definitive answer but will offer some thoughts.

 

I've done glows with CSS - works very nicely - in the normal DOM.

 

WebGL on the other hand, offers shaders.  Here is a link to an example on the Game Mechanics Explorer site: http://gamemechanicexplorer.com/#lightning-3 .  This site shows how to implement various game mechanics using Phaser.  Great stuff.

 

However, you have successfully implemented a glow.  IMO, the problem with your solution, as you are yourself worring about, is that it is rather heavy for the scenario in which it is used - mouseover/mouseout is going to generate lots of events.  This is going to cause a lot of work to be done, including memory reclamation.  If you aren't doing so already, you could possibly implement some sort of flagging that only allowed the growing glow animation to be fired whenever it is not active - something like a debounce idea.

[Tom Atom]

thanks for answer:

 - the gamemechanicexplorer site looks promising not only for that lightening example,

 - I found yet another solution I will apply if i run into performace problems - instead of creating tweens, I will update alpha of glow for particular button in update function until it is fully lightened or fully transparent...