Animate Sprite & Make it follow pointer when it's down

Phaser 2 / CE
1

Like in this Snow-Board game, I want my sprite to follow pointer input when pointer is down and at same time animate that sprite to achieve same kind of effect like in that Snow-Board game.

Right now I’m doing this,

//  To Follow pointer
update() {
    if (game.input.activePointer.isDown) { 
        game.physics.arcade.moveToXY(snowBoard, game.input.activePointer.x, snowBoard.y, 60, 100);
        //  Animate Here 
        let diff = game.input.activePointer.x - snowBoard.x;
        if(diff < 20 && diff > 0) {
            snowBoard.animations.play("fromRight", 10, false);
        }
        else if(diff < 0 && diff > -20) {
            snowBoard.animations.play("fromLeft", 10, false);
        }
        else if(diff > 20) {
            snowBoard.animations.play("right", 10, false);
        }
        else {
            snowBoard.animations.play("left", 10, false);
        }
    }
}

Now, I’m confused on how to animate snowBoard. If I create animation like leftMovement and rightMovement and play it inside if it works but it doesn’t look smooth because it always start from middle frame to right/left.

How should I approach this problem? Any suggestion is greatly appreciated? :slightly_smiling_face:

2

Actually answer to this is quite simple.

Just need to change frame according to snowBoard’s body velocity in X direction.

if (snowBoard.body.velocity.x >= -50 && snowBoard.body.velocity.x <= 50) {
            snowBoard.frameName = 'Animation/Step - 12';
} else if (snowBoard.body.velocity.x < -50) {
            // Animation for Left Side
            if (snowBoard.body.velocity.x > -150) {
                snowBoard.frameName = 'Animation/Step - 13';
            } else if (snowBoard.body.velocity.x > -250) {
                snowBoard.frameName = 'Animation/Step - 14';
            } else if (snowBoard.body.velocity.x > -350) {
                snowBoard.frameName = 'Animation/Step - 15';
            }
            ...
            ...
} else {
            // Animations for Right Side
            ...
            ...
            ...
}