[SOLVED] Third Person Jump and Play Animation

Help & Support
#1

I have been playing around with a third person character scripts by @Gamer_Wael, and its works well, but I would like to add a jump movement and animation to the character. I have little knowledge of coding, so i have a hard time, editing the jump in to the Playermovement and Playeranimation script.

Could anybody help me in the direction?

Editor:
https://playcanvas.com/project/767503/overview/oslo-exhibtion

Thanks

1 Like
#2

Hello @Anders_Juul_Jorgense! You can add the code below in the update function of your PlayerMovement.js script.

    if (this.app.keyboard.isPressed(pc.KEY_SPACE)) {
        if (this.jumpTimer <= 0) {
            this.entity.rigidbody.applyImpulse(0, 2000, 0);
            this.jumpTimer = 0.5;
        }
    }
    
    else if (this.jumpTimer >= 0) {
        this.jumpTimer -= dt;
    }
    
    else {
        this.jumpTimer = 0;
    }
#3

Thank you very much, that worked perfect!
How would i add a jump animation to the animationhandler script?

var PlayerAnimationHandler = pc.createScript('playerAnimationHandler');

PlayerAnimationHandler.attributes.add('blendTime', { type: 'number', default: 0.2 });

PlayerAnimationHandler.prototype.initialize = function () {
    var app = this.app;
    app.keyboard.on(pc.EVENT_KEYDOWN, this.keyChange, this);
    app.keyboard.on(pc.EVENT_KEYUP, this.keyChange, this);

    this.direction = 'Idle';
    this.setDirection('Idle');
};

PlayerAnimationHandler.prototype.checkButtons = function () {
    var app = this.app;
    
    var w = app.keyboard.isPressed(pc.KEY_W);
    var a = app.keyboard.isPressed(pc.KEY_A);
    var s = app.keyboard.isPressed(pc.KEY_S);
    var d = app.keyboard.isPressed(pc.KEY_D);

    if (w && !s) {
        if (a && !d) {
            this.direction = 'Run Forward Left';
        } else if (d && !a) {
            this.direction = 'Run Forward Right';
        } else {
            this.direction = 'Run Forward';
        }
    } else if (s && !w) {
        if (a && !d) {
            this.direction = 'Run Backward Left';
        } else if (d && !a) {
            this.direction = 'Run Backward Right';
        } else {
            this.direction = 'Run Backward';
        }
    } else if (a && !d) {
        this.direction = 'Run Left';
    } else if (d && !a) {
        this.direction = 'Run Right';
    } else {
        this.direction = 'Idle';
    }
};

PlayerAnimationHandler.prototype.keyChange = function (e) {
    var tempDirection = this.direction;

    this.checkButtons();

    if (tempDirection !== this.direction) {
        this.setDirection(this.direction);
    }
};

PlayerAnimationHandler.prototype.setDirection = function (direction) {
    this.direction = direction;
    this.entity.animation.play(direction, this.blendTime);
};
#4

First you have to add your jump animation to the animation component. You can find this animation component on the Model entity that is a child of your Player entity. Rename the animation to ‘Jump’.

image

To play this animation replace the checkButtons function with the code below. In this code I have added on two places the jump state and disable the loop option before. I enable the loop option again on two two other places. I have not tested this, so let me know if you have a problem.

PlayerAnimationHandler.prototype.checkButtons = function () {
    var app = this.app;
    
    var w = app.keyboard.isPressed(pc.KEY_W);
    var a = app.keyboard.isPressed(pc.KEY_A);
    var s = app.keyboard.isPressed(pc.KEY_S);
    var d = app.keyboard.isPressed(pc.KEY_D);
    var space = app.keyboard.isPressed(pc.KEY_SPACE);

    if (w && !s) {
        if (space) {
            this.entity.animation.loop = false;
            this.direction = 'Jump';
        } else if (a && !d) {
            this.direction = 'Run Forward Left';
        } else if (d && !a) {
            this.direction = 'Run Forward Right';
        } else {
            this.entity.animation.loop = true;
            this.direction = 'Run Forward';
        }
    } else if (s && !w) {
        if (a && !d) {
            this.direction = 'Run Backward Left';
        } else if (d && !a) {
            this.direction = 'Run Backward Right';
        } else {
            this.direction = 'Run Backward';
        }
    } else if (a && !d) {
        this.direction = 'Run Left';
    } else if (d && !a) {
        this.direction = 'Run Right';
    } else if (space) {
        this.entity.animation.loop = false;
        this.direction = 'Jump';
    } else {
        this.entity.animation.loop = true;
        this.direction = 'Idle';
    }
};
3 Likes
[SOLVED] A smarter way to detect animation end?
#5

Thanks for quick reply :slight_smile: It works well, but the animation is a little delayed after the space bar has been pressed. How would one tweak that to fit with the actions?

#6

I think you can delay the actual jump a bit by using a timeout in the jump code I made for you. Tweak the timeout time (currently 100) to get the right delay.

    if (this.app.keyboard.isPressed(pc.KEY_SPACE)) {
        if (this.jumpTimer <= 0) {
            this.jumpTimer = 0.5;
            
            setTimeout(function(){
                this.entity.rigidbody.applyImpulse(0, 2000, 0);
            }.bind(this), 100);
        }
    }
    
    else if (this.jumpTimer >= 0) {
        this.jumpTimer -= dt;
    }
    
    else {
        this.jumpTimer = 0;
    }
#7

Thanks a lot for the help :slight_smile:

1 Like