如何使用 Phaser 3 在我的无尽跑步者中显示滑动动画

Question

我正在尝试用 Phaser 3 制作一个无尽的跑步游戏。我让他跑和跳，但我不知道如何让他滑行（我想是因为动画 Run 在更新功能中不断运行) 有没有办法让他滑几秒钟然后重新开始玩。请任何建议或答案将非常需要和接受。谢谢。

Answer 1

如果您使用arcade 物理引擎，则可以使用setAccelerationX。当按键不再按下时，播放器可以滑动。精灵将“滑动”多少，将取决于您设置的drag （预期摩擦）。 Documentation （在此文档页面上，您可以找到更多信息到acceleration、drag 和其他使用的方法和/或属性）

这里有一个小演示，展示了这个：

var config = {
    type: Phaser.AUTO,
    width: 400,
    height: 160,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 100 },
        }
    },
    scene: {
        create,
        update
    }
}; 

var cursors;
var player;
var playerStateText;

function create () {
    cursors = this.input.keyboard.createCursorKeys();
    playerStateText = this.add.text(10,10, 'Playerstate: ???', {color: '#ffffff'});
    
    let ground = this.add.rectangle(-40, 120, 480, 50, 0xBAF0FF).setOrigin(0);
    player = this.add.rectangle(20, 20, 30, 30, 0xcccccc).setOrigin(0);
    
    ground = this.physics.add.existing(ground);
    ground.body.setImmovable(true);
    ground.body.allowGravity = false;
    
    player = this.physics.add.existing(player);
    
    // Just to be sure that the player doesn't get too fast
    player.body.setMaxSpeed(160); 
    
    // Tweak this value to define how far/long the player should slide
    player.body.setDrag(120, 0);
    
    this.physics.add.collider(player, ground);      
}

function update (){
    let currentState = 'Playerstate: running';
    if (cursors.left.isDown){
        player.body.setAccelerationX(-160);
    } else if (cursors.right.isDown) {
        player.body.setAccelerationX(160);
    }
    else {
        player.body.setAccelerationX(0);
        if(Math.abs(player.body.velocity.x) > 3) {
           currentState = 'Playerstate: sliding';
        } else if(Math.abs(player.body.velocity.y) > 3) {
           currentState = 'Playerstate: falling';
        } else {
           currentState = 'Playerstate: stopped';
        }
    }
    
    if(player.x > 400){
       player.x = -20;
    }
    
    if(player.x < -20){
       player.x = 400;
    }
    
    playerStateText.setText(currentState);
}

new Phaser.Game(config);

<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>

然后您可以根据当前玩家的动作、速度或其他属性设置正确的动画。

更新：

如果你只是想展示不同的动画，没有任何特殊的交互或功能，你可以像这个例子中解释的那样链接动画：http://phaser.io/examples/v3/view/animation/chained-animation

只需链接 Run 和 Slide 动画，然后它们将始终以正确的顺序播放而无需更改您的代码。如果你想在滑动过程中改变速度，那就有点工作了。

并且您可以结帐/使用events of animation，以便您可以对动画执行操作：开始、停止、完成等等... .

例如：如果玩家在着陆后应该滑动，它可能看起来像这样：

  player.on(Phaser.Animations.Events.ANIMATION_COMPLETE_KEY + 'jump', function (anims) {
       player.chain([ 'slide', 'run' ]);
   }, this);

Answer 2

也许您可以使用“let som=true; if(som==true){runnerfunction()}”，而当滑动按钮将使用“som=false”时