[SOLVED] Animation play error after scene change

hello guys

I’m getting an error that the animation doesn’t work after running the scene transition script.

image

here is my script

const PlayerAnimation = pc.createScript('PlayerAnimation');

let direction = 'Idle';

PlayerAnimation.attributes.add('blendDuration', {
    type: 'number',
    default: 0.25
});

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);
};

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

Animation blend duration is set from an attribute.
PlayerAnimation.prototype.setState = function(state) {
    this.state = state;
    this.entity.animation.play(direction, this.blendDuration);
};

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 = 'LEFT';
        } else if (app.keyboard.isPressed(pc.KEY_D) && app.keyboard.isPressed(pc.KEY_A) === false) {
            direction = 'RIGHT';
        } else {
            direction = 'Walk';
        }
    } 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 = 'LEFT';
        } else if (app.keyboard.isPressed(pc.KEY_D) && app.keyboard.isPressed(pc.KEY_A) === false) {
            direction = 'RIGHT';
        } else {
            direction = 'BACK';
        }
    } else if (app.keyboard.isPressed(pc.KEY_A) && app.keyboard.isPressed(pc.KEY_D) === false) {
        direction = 'LEFT';
    } else if (app.keyboard.isPressed(pc.KEY_D) && app.keyboard.isPressed(pc.KEY_A) === false) {
        direction = 'RIGHT';
    } else {
        direction = 'Idle';
    }
};

PlayerAnimation.prototype._keyChange = function(e) {
    const previousDirection = direction;
    
    this._checkKey();
    
    if (previousDirection !== direction) {
        this.setState(direction);
    }
};

The error occurs at line 32 and line 100.

An error occurs in the animation that occurs when moving a character after a scene change.
I put a tag in the model and executed the asset load together, but it was not resolved.

Do any of you know how?

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 is because you haven’t removed the listeners for key events when the component/entity is destroyed so that when you change scenes, the entity is destroyed but there is still a ‘orphaned’ event listener for key presses active.

You need to remove these on destroy.

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.on('destroy', function () {
        app.keyboard.off(pc.EVENT_KEYDOWN, this._keyChange, this);
        app.keyboard.off(pc.EVENT_KEYUP, this._keyChange, this);
    });

    this.setState(direction);
};

yaustar, god bless you !!!

I gave up halfway and thought about doing it another way, but it was solved!
Thank you so much.!!!