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

Question

我正在尝试使用 Phaser 3 制作无尽的运行ner 游戏。我已经让他运行并跳跃，但我不知道如何让他滑动（我想因为动画运行在更新功能中持续运行ning）有没有办法让他滑动几秒钟然后 return 开始播放。请非常需要和接受任何建议或答案。谢谢。

Answer 1

如果您使用arcade physics-engine，您可以使用setAccelerationX，然后播放器可以滑动，当按键没有被按下时。精灵“幻灯片”的数量取决于您设置的 drag。 Documentation （在文档的这一页上，您可以找到 acceleration、drag 和其他使用的方法 and/or 属性的更多信息）

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

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

只需链接运行和 Slide 动画，然后它们将始终以正确的顺序播放，而不会改变您的代码。如果你想在滑动过程中改变速度，那就更麻烦了。

和你可以checkout/useevents 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”

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

How to display a sliding animation in my endless runner using Phaser 3

javascript

infinite-scroll

phaser-framework