button tween when tapped

[oxxxo]

I am not sure if I am describing it right... on the topic title

 

but I was wondering if there is a tween function in phaser that lets the button pops out a little bit

 

to signify that this button has been tap.. I cant describe it but here is an example http://themostclickedbutton.com/

 

 

[Tom Atom]

Hi, code below creates button that scales a bit if mouse is over and moves down a little if pressed. It is without tweens and it looks OK, but you can of course employ tweens in onInputDown:

            // create button            this._button = this.game.add.button(0, 0, aAtlas);            this._button.anchor.setTo(0.5, 0.5);            this._button.setFrames(aFrame, aFrame, aFrame);            // add callbacks            this._button.onInputOver.add(function () {                this._button.scale.setTo(1.05, 1.0);            }, this);            this._button.onInputOut.add(function () {                this._button.scale.setTo(1, 1);            }, this);            this._button.onInputDown.add(function () {                this._saveY = this.y;                this.y = this.y + 8;            }, this);            this._button.onInputUp.add(function () {                this.y = this._saveY;                // do something you need            }, this);

[oxxxo]

 

Hi, code below creates button that scales a bit if mouse is over and moves down a little if pressed. It is without tweens and it looks OK, but you can of course employ tweens in onInputDown:

            // create button            this._button = this.game.add.button(0, 0, aAtlas);            this._button.anchor.setTo(0.5, 0.5);            this._button.setFrames(aFrame, aFrame, aFrame);            // add callbacks            this._button.onInputOver.add(function () {                this._button.scale.setTo(1.05, 1.0);            }, this);            this._button.onInputOut.add(function () {                this._button.scale.setTo(1, 1);            }, this);            this._button.onInputDown.add(function () {                this._saveY = this.y;                this.y = this.y + 8;            }, this);            this._button.onInputUp.add(function () {                this.y = this._saveY;                // do something you need            }, this);

hey , thanks 

 

I will try to implement this code

[BdR]

I was also looking for a way to animate the buttons when they are pressed. Here is another way to do it.

 

You can patch the changeStateFrame function of the standard Phaser.Button, then it will automatically work for all buttons which is pretty cool. The only downside is that you have to check the changeStateFrame function for any changes when there is a Phaser version upgrade.
 

// -------------------------------------// Path the Phaser.Button to scale when pressed// -------------------------------------Phaser.Button.prototype.changeStateFrame = function (state) {    if (this.freezeFrames)    {        return false;    }    var frameKey = '_on' + state + 'Frame';    var frame = this[frameKey];    // PATCH BEGIN scale when pressed    if (state == 'Down') {        //this.alpha = 0.5;        this.scale.setTo(0.9, 0.9);    } else {        this.scale.setTo(1.0, 1.0);    }    // PATCH END    if (typeof frame === 'string')    {        this.frameName = frame;        return true;    }    else if (typeof frame === 'number')    {        this.frame = frame;        return true;    }    else    {        return false;    }};

Also, note that it looks better when you center the anchor of your button, else the scale effect will be fixed to the upper left button position instead centered. 

this.testbtn = this.game.add.button(100, 100, 'buttonicon', this.doBtnPress, this, 4, 0, 8);this.testbtn.anchor.setTo(0.5, 0.5); // centered

[jdnichollsc]

Or use a spritesheet for this: http://codepen.io/jdnichollsc/pen/NPJmRq