How to display a sliding animation in my endless runner using Phaser 3

Question

I am trying to make an endless runner game with Phaser 3. I have gotten him to run and jump, but I don't know how to make him slide(I think because the animation Run keeps on running in the update function) is there a way I can make him slide for some seconds then return to playing. Please any suggestions or answers would be greatly needed and accepted. Thanks.

Answer 1

If you are using the arcade physics-engine, you could simply use setAccelerationX. The player could slide, when the keys are not more pressed. How much the sprite will "slides", would than depend on the drag (intended friction) you set. Documentation (on this page of the documentation, you can find more information to acceleration, drag and other used methods and/or properties)

Here a small demo, showcasing this:

var config = {
    type: Phaser.AUTO,
    width: 400,
    height: 160,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 100 },
        }
    },
    scene: {
        create,
        update
    }
}; 

var cursors;
var player;
var playerStateText;

function create () {
    cursors = this.input.keyboard.createCursorKeys();
    playerStateText = this.add.text(10,10, 'Playerstate: ???', {color: '#ffffff'});
    
    let ground = this.add.rectangle(-40, 120, 480, 50, 0xBAF0FF).setOrigin(0);
    player = this.add.rectangle(20, 20, 30, 30, 0xcccccc).setOrigin(0);
    
    ground = this.physics.add.existing(ground);
    ground.body.setImmovable(true);
    ground.body.allowGravity = false;
    
    player = this.physics.add.existing(player);
    
    // Just to be sure that the player doesn't get too fast
    player.body.setMaxSpeed(160); 
    
    // Tweak this value to define how far/long the player should slide
    player.body.setDrag(120, 0);
    
    this.physics.add.collider(player, ground);      
}

function update (){
    let currentState = 'Playerstate: running';
    if (cursors.left.isDown){
        player.body.setAccelerationX(-160);
    } else if (cursors.right.isDown) {
        player.body.setAccelerationX(160);
    }
    else {
        player.body.setAccelerationX(0);
        if(Math.abs(player.body.velocity.x) > 3) {
           currentState = 'Playerstate: sliding';
        } else if(Math.abs(player.body.velocity.y) > 3) {
           currentState = 'Playerstate: falling';
        } else {
           currentState = 'Playerstate: stopped';
        }
    }
    
    if(player.x > 400){
       player.x = -20;
    }
    
    if(player.x < -20){
       player.x = 400;
    }
    
    playerStateText.setText(currentState);
}

new Phaser.Game(config);

<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>

You then could set the right animation depending on the current player action, the velocity, or other properties.

Update:

If you just want to show the different animation, without any special interaction or functionallity, you could just chain animations like explained in this example: http://phaser.io/examples/v3/view/animation/chained-animation

Just Chain the Run and Slide animation, and then they will always play in the correct order without changing your code. If you want to change the speed during the slide, that is abit more work.

And you can checkout/use events of animation, so that you can take action on animation: start, stop, complete, and more ....

For example: If the player should slide after landing, it could look something like this:

  player.on(Phaser.Animations.Events.ANIMATION_COMPLETE_KEY + 'jump', function (anims) {
       player.chain([ 'slide', 'run' ]);
   }, this);