移相器中的寻路动画

如何解决移相器中的寻路动画

所以，我是第一次在 Phaser 中开发一款小游戏。

想法是使用寻路（使用easystar.js）在地牢中移动角色。

我使用本教程的源代码作为快速入门： https://www.dynetisgames.com/2018/03/06/pathfinding-easystar-phaser-3/

此处 Pathfinding 运行良好，但角色一直处于空闲状态，根本没有动画； 所以我用 4 路行走动画创建了这个精灵：

这个想法是附加到每个补间，easystar 使用它来创建要遵循的路径，正确的动画，基于精灵相对于每个补间的位置；像这样：

将动画附加到每个补间：

Game.moveCharacter = function(path){
    // Sets up a list of tweens,one for each tile to walk,that will be chained by the timeline
    var tweens = [];
    for(var i = 0; i < path.length-1; i++){

        var ex = path[i+1].x;
        var ey = path[i+1].y;
        tweens.push({
            targets: Game.player,x: {value: ex*Game.map.tileWidth,duration: 200},y: {value: ey*Game.map.tileHeight,onUpdate: animatePath(ex*Game.map.tileWidth,ey*Game.map.tileHeight)           
        });                              
    }
    
    Game.scene.tweens.timeline({
        tweens: tweens,onComplete: stopAnimation
    });
};

选择正确动画的功能：

function animatePath(x,y)
{
    if(y < playerPosY)
    {
        playerPosY -= 32;
        console.log("up");
        Game.player.anims.play('up',true);
    }
    else if(y > playerPosY)
    {
        playerPosY += 32;
        console.log("down");
        Game.player.anims.play('down',true);
    }               
    else if(x < playerPosX)
    {
        playerPosX -= 32;
        console.log("left");
        Game.player.anims.play('left',true);
    }
    else if (x > playerPosX)
    {
        playerPosX += 32;
        console.log("right");
        Game.player.anims.play('right',true);
    }  
}

其中“32”是每个图块的尺寸。

角色到达后停止动画的功能：

function stopAnimation()
{
    Game.player.anims.stop(null,true);
}

读取日志，路径似乎被正确读取。 问题是：唯一显示的动画是最后一个补间动画，好像它覆盖了所有其他动画。 如何强制显示所有动画？

这是正在发生的事情的视频

https://www.youtube.com/watch?v=z6IUzv4BJG8&ab_channel=FrancescoPeruzzi