Sprite Jump Animation Plays While On Ground

Help & Support
1

So, I tried to make it so that when you hit the ground, the jump animation stops playing, and plays either the walk animation or idle animation depending on whether you’re moving or not. I tried out the current code that I have, but it seems to only stop if you’re idle. If you’re still moving while you hit the ground, the jump animation will continue to play out until you’ve stopped. This is sort of an issue, since in classic genesis sonic games, you don’t just roll when you hit the ground unless you’ve held down while hitting the ground. Here is the player script:

var PlayerController = pc.createScript('playerController');

//Attributes
PlayerController.attributes.add("xspd", { type: 'number', default: 261, title: 'X Speed' });
PlayerController.attributes.add("yspd", { type: 'number', default: 0, title: 'Y Speed' });
PlayerController.attributes.add("jfrc", { type: 'number', default: 6, title: 'Jump Force' });

//Variables
var xc = 50;
var yc = 0;
var canJump = true;

// initialize code called once per entity
PlayerController.prototype.initialize = function() {
    this.app.keyboard.on(pc.EVENT_KEYDOWN, this.onKeyDown, this);
    this.app.keyboard.on(pc.EVENT_KEYUP, this.onKeyUp, this);
    this.entity.collision.on('contact', this.onContact, this);
    
    this.moving = false;
    this.jumping = false;
};

// update code called every frame
PlayerController.prototype.update = function(dt) {
    this.movement(dt);
    this.animation();
    this.flip();
};

PlayerController.prototype.movement = function(dt) {
    this.entity.rigidbody.angularVelocity = pc.Vec3.ZERO;
    
    if (this.app.keyboard.isPressed(pc.KEY_RIGHT)) {
        this.entity.rigidbody.applyForce(this.xspd * dt, this.yspd * dt, 0);
    }
    if (this.app.keyboard.isPressed(pc.KEY_LEFT)) {
        this.entity.rigidbody.applyForce(-this.xspd * dt, this.yspd * dt, 0);
    }
    if (this.app.keyboard.wasPressed(pc.KEY_A) && canJump === true) {
        this.entity.rigidbody.applyImpulse(0, this.jfrc * dt, 0);
        this.resetPlayer(dt);
        canJump = false;
        this.jumping = false;
    }
    
    if (this.app.keyboard.wasPressed(pc.KEY_RIGHT)) {
        this.entity.rigidbody.applyImpulse(xc * dt, yc * dt, 0);
    }
    if (this.app.keyboard.wasPressed(pc.KEY_LEFT)) {
        this.entity.rigidbody.applyImpulse(-xc * dt, -yc * dt, 0);
    }
    
    if (this.entity.rigidbody.linearVelocity.x >= 261) {
        this.entity.rigidbody.linearVelocity = new pc.Vec3(261 * dt, 0, 0);
    }
    
    if (this.entity.rigidbody.linearVelocity.x < 0.1 && this.entity.rigidbody.linearVelocity.x > -0.1) {
        this.moving = false;
    }    
    

};

PlayerController.prototype.animation = function() {
    if (!this.jumping) {
        if (!this.moving && this.entity.rigidbody.linearVelocity.x > 0.1 || !this.moving && this.entity.rigidbody.linearVelocity.x < -0.1) {
            this.moving = true;
            this.entity.sprite.stop('Idle');
            this.entity.sprite.play('Walk');
        }
        else if (!this.moving) {
            this.entity.sprite.play('Idle');
            this.entity.sprite.stop('Walk');
        }
    }
    
    if (canJump === false && !this.jumping) {
        this.jumping = true;
        this.entity.sprite.stop('Idle');
        this.entity.sprite.stop('Walk');
        this.entity.sprite.play('Jump');
    }
    else if (this.entity.rigidbody.linearVelocity.y < -0.001){
        this.jumping = false;
    }
};

PlayerController.prototype.flip = function() {
    if (this.app.keyboard.wasPressed(pc.KEY_RIGHT)) {
        this.entity.sprite.flipX = false;
    }  
    if (this.app.keyboard.wasPressed(pc.KEY_LEFT)) {
        this.entity.sprite.flipX = true;    
    }
};

PlayerController.prototype.onContact = function(result) {
    //Jump
    if (result.other.tags.has('ground')) {
        canJump = true;
    }
    if (result.other.tags.has('stopJump')) {
        this.jumping = false;
    }
    
    //Rotation
    if (result.other.tags.has('turn0')) {
        this.entity.setLocalEulerAngles(0, 0, 0);
        this.yspd = 0;
        yc = 0;
        this.app.systems.rigidbody.gravity = new pc.Vec3(0, -9.8, 0);
    }
    else if (result.other.tags.has('turn45')) {
        this.entity.setLocalEulerAngles(0, 0, 45);
        this.yspd = 130.5;
        yc = 25;
        this.app.systems.rigidbody.gravity = new pc.Vec3(-4.9, -4.9, 0);
    }  
    else if (this.entity.rigidbody.linearVelocity.y > -0.001) {
        this.entity.setLocalEulerAngles(0, 0, 0);
    }
};

PlayerController.prototype.resetPlayer = function(dt) {
    this.entity.setLocalEulerAngles(0, 0, 0);
    this.app.systems.rigidbody.gravity = new pc.Vec3(0, -9.8, 0);
};

// swap method called for script hot-reloading
// inherit your script state here
// PlayerController.prototype.swap = function(old) { };

// to learn more about script anatomy, please read:
// http://developer.playcanvas.com/en/user-manual/scripting/

Can anyone solve the issue I’m having here? Also, one more thing. The jump animation also glitches out randomly while playing. The jump animation will jump to the first frame randomly, but the animation works fine when it’s rolling on the ground. So can anyone fix that problem as well?

2

I see that you don’t end the jump animation anywhere. Is that right?

I can’t test properly because moving the player doesn’t always work. Sometimes it works well and sometimes the player hardly moves when clicking the arrows.

However, I also recently experience similar problems with my own project. Perhaps there are problems with the PlayCanvas server.

3

It’s probably something with your device. Also, I’m not sure how to get this to work.

4

That is also a possibility, but since I have a powerful laptop with a good internet connection, it seems illogical to me.

5

That does sound illogical. I use a laptop.