onInputOver and onInputOut does not work properly.

[Overflowz]

Hello there, I'm having weird bug. I'm trying to add effect when player hovers the card, it should pop up like for 30px and when he outs hover, it should get back to it's position.

Here's the code I'm using:

                currentCard.events.onInputOver.add(function (sprite, pointer) {                    var tween = Global.Game.add.tween(sprite).to({ x: sprite.x, y: sprite.y - 30 }, 300, Phaser.Easing.Circular.Out, true).onComplete.add(function () {                        tween.pendingDelete = true;                    }, this);                }, this);                 currentCard.events.onInputOut.add(function (sprite, pointer) {                    var tween = Global.Game.add.tween(sprite).to({ x: sprite.x, y: sprite.y + 30 }, 300, Phaser.Easing.Circular.Out, true).onComplete.add(function () {                        tween.pendingDelete = true;                    }, this);                }, this);

if you hover in and out rapidly, cards just goes out of bounds (downside, like onInputOut happens more than it should), am I missing something or is this considered as a bug?

Regards.

[drhayes]

You probably need to cancel the running tween in onInputOut.

[Overflowz]

Tried but does not work.

                currentCard.events.onInputOver.add(function (sprite, pointer) {                    var tween = Global.Game.add.tween(sprite);                    sprite.inputOverTween = tween;                     tween.to({ x: sprite.x, y: sprite.y - 30 }, 300, Phaser.Easing.Circular.Out, true).onComplete.add(function () {                        tween.pendingDelete = true;                    }, this);                 }, this);                 currentCard.events.onInputOut.add(function (sprite, pointer) {                    var tween = Global.Game.add.tween(sprite);                     sprite.inputOverTween.stop();                     tween.to({ x: sprite.x, y: sprite.y + 30 }, 300, Phaser.Easing.Circular.Out, true).onComplete.add(function () {                        tween.pendingDelete = true;                    }, this);                }, this);

[drhayes]

What happens if you don't tween it? Just change the position directly... does it work?

 

Try writing a couple of console.log statements into your callbacks to see how many times they're getting called. If they don't get called symmetrically you're in trouble; e.g. onInputOver gets called *way* more often than onInputOut.

[Batzi]

Hello there, I'm having weird bug. I'm trying to add effect when player hovers the card, it should pop up like for 30px and when he outs hover, it should get back to it's position.

Here's the code I'm using:

                currentCard.events.onInputOver.add(function (sprite, pointer) {                    var tween = Global.Game.add.tween(sprite).to({ x: sprite.x, y: sprite.y - 30 }, 300, Phaser.Easing.Circular.Out, true).onComplete.add(function () {                        tween.pendingDelete = true;                    }, this);                }, this);                 currentCard.events.onInputOut.add(function (sprite, pointer) {                    var tween = Global.Game.add.tween(sprite).to({ x: sprite.x, y: sprite.y + 30 }, 300, Phaser.Easing.Circular.Out, true).onComplete.add(function () {                        tween.pendingDelete = true;                    }, this);                }, this);

if you hover in and out rapidly, cards just goes out of bounds (downside, like onInputOut happens more than it should), am I missing something or is this considered as a bug?

Regards.

I don't see a reason to do x: sprite.x if the x is not changing. You only need y: sprite.y +/- 30 since it is the only position that is changing.

[Overflowz]

Hi, sorry for delayed reply.

 

 

I don't see a reason to do x: sprite.x if the x is not changing. You only need y: sprite.y +/- 30 since it is the only position that is changing.

does that really matter? because I removed x: sprite.x and still got the same result.

 

 

What happens if you don't tween it? Just change the position directly... does it work?

 

Try writing a couple of console.log statements into your callbacks to see how many times they're getting called. If they don't get called symmetrically you're in trouble; e.g. onInputOver gets called *way* more often than onInputOut.

 

 

It works fine, as expected. I guess problem is that, I hover out before tween finishes to position itself.

When tween is doing animation, before going to specific position I hover it out and of course Y are less than sprite.y + 30 and that's why it goes at wrong positions.

Any thoughts how can I delay that?

 

EDIT: giving static values to tweens or just Y to a sprite, works fine, so I decided to use static values instead of dynamic.

if you know any other solution, you can post it here so others may know if needed.

 

Regards.

[Batzi]

does that really matter? because I removed x: sprite.x and still got the same result.

It won't fix your problem but it's unnecessary code that you could avoid :-)