[SOLVED] How to play animation on space

Hey so my project crossover Im trying to make the player animated when they jump but so far i have no luck at all. Please help anyone.

Hi @Granted! Please share what you have tried so far and what your current result is. What should we look at and in which script?

Hey @Granted, check out this tutorial on how to blend an animation on a keypress.

This is what i currently have to play animations and it works just fine.

// Create PlayerAnimation Script.
const PlayerAnimation = pc.createScript('PlayerAnimation');

// Define script-scoped variables.
let direction = 'Stand Up';

// Add attributes to the script.
PlayerAnimation.attributes.add('blendDuration', {
    type: 'number',
    default: 0.25
});

// Initialisation code, runs only once.
PlayerAnimation.prototype.initialize = function() {
    const app = this.app;
    
    // Listeners for key up/down events. Fires a callback function to handle player animations.
    app.keyboard.on(pc.EVENT_KEYDOWN, this._keyChange, this);
    app.keyboard.on(pc.EVENT_KEYUP, this._keyChange, this);
    
    this.setState(direction);
};

// Update code, runs every frame.
PlayerAnimation.prototype.update = function(dt) {
    // Any code that needs to run such as timers for idle time or what not goes in here.
};

// Setter function for player state. Function also serves to change animation on state change. Animation blend duration is set from an attribute.
PlayerAnimation.prototype.setState = function(state) {
    this.state = state;
    this.entity.animation.play(direction, this.blendDuration);
};

// Direction logic, different combination of key inputs define different directions.
PlayerAnimation.prototype._checkKey = function() {
    const app = this.app;

    if (app.keyboard.isPressed(pc.KEY_W) && app.keyboard.isPressed(pc.KEY_S) === false) {
        if (app.keyboard.isPressed(pc.KEY_A) && app.keyboard.isPressed(pc.KEY_D) === false) {
            direction = 'Jog Forward Left';
        } else if (app.keyboard.isPressed(pc.KEY_D) && app.keyboard.isPressed(pc.KEY_A) === false) {
            direction = 'Jog Forward Right';
        } else {
            direction = 'Jog Forward';
        }
    } else if (app.keyboard.isPressed(pc.KEY_S) && app.keyboard.isPressed(pc.KEY_W) === false) {
        if (app.keyboard.isPressed(pc.KEY_A) && app.keyboard.isPressed(pc.KEY_D) === false) {
            direction = 'Jog Backward Left';
        } else if (app.keyboard.isPressed(pc.KEY_D) && app.keyboard.isPressed(pc.KEY_A) === false) {
            direction = 'Jog Backward Right';
        } else {
            direction = 'Jog Backward';
        }
    } else if (app.keyboard.isPressed(pc.KEY_A) && app.keyboard.isPressed(pc.KEY_D) === false) {
        direction = 'Jog Left';
    } else if (app.keyboard.isPressed(pc.KEY_D) && app.keyboard.isPressed(pc.KEY_A) === false) {
        direction = 'Jog Right';
    } else {
        direction = 'Idle';
    }
};

// Callback function to check if the direction has changed since a key down/up event.
PlayerAnimation.prototype._keyChange = function(e) {
    const previousDirection = direction;
    
    this._checkKey();
    
    if (previousDirection !== direction) {
        this.setState(direction);
    }
};

You can easily add an extra direction for your jump animation. See below how I did that.

// Create PlayerAnimation Script.
const PlayerAnimation = pc.createScript('PlayerAnimation');

// Define script-scoped variables.
let direction = 'Stand Up';

// Add attributes to the script.
PlayerAnimation.attributes.add('blendDuration', {
    type: 'number',
    default: 0.25
});

// Initialisation code, runs only once.
PlayerAnimation.prototype.initialize = function() {
    const app = this.app;
    
    // Listeners for key up/down events. Fires a callback function to handle player animations.
    app.keyboard.on(pc.EVENT_KEYDOWN, this._keyChange, this);
    app.keyboard.on(pc.EVENT_KEYUP, this._keyChange, this);
    
    this.setState(direction);

    this.timer = 0;
    this.timerActive = false;
};

// Update code, runs every frame.
PlayerAnimation.prototype.update = function(dt) {
    // Any code that needs to run such as timers for idle time or what not goes in here.
    if (this.timerActive) {
        this.timer += dt;
        
        if (this.timer > 0.7) {
            this.timer = 0;
            this.timerActive = false;
            this._keyChange();
        }
    }
};

// Setter function for player state. Function also serves to change animation on state change. Animation blend duration is set from an attribute.
PlayerAnimation.prototype.setState = function(state) {
    this.state = state;
    this.entity.animation.play(direction, this.blendDuration);
};

// Direction logic, different combination of key inputs define different directions.
PlayerAnimation.prototype._checkKey = function() {
    if (!this.timerActive) {
        const app = this.app;

        if (app.keyboard.wasPressed(pc.KEY_SPACE)) {
            direction = 'Jump';
            this.timerActive = true;
        } else if (app.keyboard.isPressed(pc.KEY_W) && app.keyboard.isPressed(pc.KEY_S) === false) {
            if (app.keyboard.isPressed(pc.KEY_A) && app.keyboard.isPressed(pc.KEY_D) === false) {
                direction = 'Jog Forward Left';
            } else if (app.keyboard.isPressed(pc.KEY_D) && app.keyboard.isPressed(pc.KEY_A) === false) {
                direction = 'Jog Forward Right';
            } else {
                direction = 'Jog Forward';
            }
        } else if (app.keyboard.isPressed(pc.KEY_S) && app.keyboard.isPressed(pc.KEY_W) === false) {
            if (app.keyboard.isPressed(pc.KEY_A) && app.keyboard.isPressed(pc.KEY_D) === false) {
                direction = 'Jog Backward Left';
            } else if (app.keyboard.isPressed(pc.KEY_D) && app.keyboard.isPressed(pc.KEY_A) === false) {
                direction = 'Jog Backward Right';
            } else {
                direction = 'Jog Backward';
            }
        } else if (app.keyboard.isPressed(pc.KEY_A) && app.keyboard.isPressed(pc.KEY_D) === false) {
            direction = 'Jog Left';
        } else if (app.keyboard.isPressed(pc.KEY_D) && app.keyboard.isPressed(pc.KEY_A) === false) {
            direction = 'Jog Right';
        } else {
            direction = 'Idle';
        }
    }
};

// Callback function to check if the direction has changed since a key down/up event.
PlayerAnimation.prototype._keyChange = function(e) {
    const previousDirection = direction;
    
    this._checkKey();
    
    if (previousDirection !== direction) {
        this.setState(direction);
    }
};

But that still does not play the jump animation.

You have to add the direction as an animation to your animation component.

image

yeah i just looked at that sorry and than you for helping it works now

but it only plays a small part of the animation if they just press space and it plays the whole thing if they hold space.

Your idle animation is probably overriding the jump animation. You’ll have to figure out a way to avoid this. A possible solution is to use a timer.

how would i use a timer

I updated the script above with a timer. (I activate the timer when your jump animation is executed.
I reset the timer when the idle animation is executed, if the timer is more then 1. You can adjust this value to get the correct result). Not tested, so please let me know if it works as expected.

so it works but the player will continue to run the animation and it also does not work while the player is moving

so it only works while the player is standing still

My logic was not working with your game logic. If have updated the script above again.

THANK YOU THANK YOU THANK YOU!!!
It now completely works. Thank you so much

1 Like