Animating a tween with controls

[GoodOldSnoopy]

So I have a character (sprite) that whenever you press a key it'll move it along the y position and once it reaches the top, send it back down to the bottom.

So I've been doing this

   game.input.keyboard.onDownCallback = function() {

 

      player.y -= game.height / 4 + 20

 

      if (player.y < 0) {

        player.alignIn(laneRect_three, Phaser.CENTER);

      }

    };

 

 

I've been doing this. So basically, every key down move the player up and if it goes beyond the screen send it back down.

 

So I want to add some nice animation to this. So instead of just jumping up, it kind of travels up so I've added a tween,

 

      currentPosFish = game.height / 4 + 20;

 

      game.add.tween(playerFish).to({

        y: currentPosFish

      }, 1000, Phaser.Easing.Quadratic.InOut, true);

 

But the thing with this is, it just sets it at the y position. How can I set a tween so it increments like what I was doing above?

 

[samid737]

There are many examples available on Phaser website on how to achieve your animation and here is an example that might be useful to you :

https://jsfiddle.net/samid737/gk4us9qm/

[GoodOldSnoopy]

On 06/04/2017 at 4:59 PM, samid737 said:

There are many examples available on Phaser website on how to achieve your animation and here is an example that might be useful to you :

https://jsfiddle.net/samid737/gk4us9qm/

 

Thanks for the reply but it's not what i'm asking. I know I can animate a tween to some x y position. What I'm asking is if I can animate a tween to alignIn something? like the alignIn method I've used previously so instead of just animating it to some x y pos use alignIn and when it's aligning into something, animate it

[samid737]

I noticed that within the callBack function you are adjusting the player.y, but for the tween you are passing playerFish,is this correct?

You might be able to use onComplete event  to call a custom function that resets the player using alignIn when the tween is finished animating:

https://phaser.io/examples/v2/tweens/tween-loop-event

 

[snowbillr]

Not sure about tweening an alignTo call. Could be possible but I don't know the details of how. 

If it isn't possible, then tweening the y property is how you'll have to do it. Is there an easy way to find out what the sprite's y value would be set to by the alignTo call? If there's an easy way to do that, then you could find the resulting y value and tween to that. 

One approach, which may well be horribly inefficient, would be to make an invisible rectangle at your sprite's position, make the alignTo call on it, get the resulting y value, and then tween your sprite to that y value. 

 

I'm sure there's a better way to handle it, but that was my first thought reading your post. Would love to know how you solve this!