Jump to content

Tweening group hover


Shinto
 Share

Recommended Posts

Hi,

scaling a group on hover is troubling me a bit...

I have a list of several Phaser.Groups, each group contains some sprites and looks like a row.

Now, in that list when I hover an item (onInputOver) I want to zoom into the group and on leave (onInputOut)

revert the zoom. I got it working okayish, but the problem is I think my solution is butt ugly and it doesn't trigger

the scale always when moving very fast over the groups. I don't intend to tween the scale itself, but the change in x-position.

Here's my relevant code... Since I'm new to Phaser I appreciate any feedback.

        this.invisibleLayer.events.onInputOver.add((item) => {
            var currentWidth = this.width;
            if (this.tweenOutX === null && this.tweenInX === null) {
                this.originalX = this.x;
                this.scale.setTo(1.15, 1.15);
                var destinationX = this.x - (this.width - currentWidth);
                this.tweenInX = this.game.add.tween(this).to(
                    {x: destinationX}, 150, Phaser.Easing.Linear.None
                );
                this.tweenInX.onComplete.add((item) => {
                    this.tweenInX = null;
                });

                this.tweenInX.start();
                this.resetTween = true;
            }
        }, this);
        
        this.invisibleLayer.events.onInputOut.add((item) => {
            if (this.tweenOutX === null) {
                if (this.tweenInX !== null) {
                    this.tweenInX.stop();
                    this.tweenInX = null;
                }

                if (this.resetTween) {
                    this.resetTween = false;
                    this.scale.setTo(1, 1);
                    this.tweenOutX = this.game.add.tween(this).to(
                        {x: this.originalX}, 150 , Phaser.Easing.Linear.None
                    );
                    this.tweenOutX.onComplete.add((item) => {
                        this.tweenOutX = null;
                    });

                    this.tweenOutX.start();
                }
            }
        }, this);

 

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...