用户输入的角色图集/精灵表动画在按键上不会停止 Phaser 3

Question

我正在使用 Phaser 3 中的用户输入来制作角色动画（使用纹理图集），但遇到了当我释放相应的箭头按钮时动画不会停止的问题。我尝试了一些策略，其中一些仅部分有效。下面的代码是我使用的代码，它在所有方面都按预期工作，除了在释放相应的箭头键后动画不会停止。也许我需要在按键被抬起后停止动画的逻辑？有什么建议么？谢谢！

我用这篇文章作为例子，但它阻止了角色对角移动： 带有方向键的 Sprite Sheet 动画

update() {      

    this.hero.setVelocity(0,0);

    if (this.cursors.up.isDown) {
        this.hero.anims.play('walkUp', true); 
        this.hero.setVelocityY(-200);                     
    } 
    
    else if (this.cursors.down.isDown) {
        this.hero.anims.play('walkDown', true) 
        this.hero.setVelocityY(200);
    }         

    if (this.cursors.left.isDown) {    
        this.hero.anims.play('walkLeft', true)
        this.hero.setVelocityX(-200);
    } 

    else if (this.cursors.right.isDown) {
        this.hero.anims.play('walkRight', true)
        this.hero.setVelocityX(200);
    }                
}

Answer 1

好吧，通过更多的研究，我发现并回答了。基本上，我将运动逻辑与动画逻辑分开。此 youTube 视频显示了从第 9 分钟左右开始的故障排除：https://www.youtube.com/watch?v=H-a_-uuM26E

这是我最终有效的代码：

this.hero.setVelocity(0,0);

    if (this.cursors?.up.isDown) {            
        this.hero.setVelocityY(-200);
    }          
    else if (this.cursors?.down.isDown) {
        this.hero.setVelocityY(200);
    } 
    if (this.cursors?.left.isDown) {    
        this.hero.setVelocityX(-200);
    }         
    else if (this.cursors?.right.isDown) {
        this.hero.setVelocityX(200);
    }
    if (this.cursors?.up.isDown) {            
        this.hero.anims.play('walkUp', true);  
    }          
    else if (this.cursors?.down.isDown) {
        this.hero.anims.play('walkDown', true) 
    } 
    else if (this.cursors?.left.isDown) {    
        this.hero.anims.play('walkLeft', true)
    }         
    else if (this.cursors?.right.isDown) {
        this.hero.anims.play('walkRight', true)
    } else {
        this.hero.anims.stop();
    }