为什么显示 2 个精灵而不是 1 个？

Question

我是第一次制作格斗游戏，一切都很顺利，直到加载玩家的 sprite sheet 时，同一个 sprite 的两个图像显示在屏幕上，而不是一个。

我知道这是因为加载精灵 sheet，但我不知道如何将物理加载到播放器，所以动画仍然有效，但第二个精灵 sheet 没有出现。

var player;
var cursors;
var anim;


class fightGame extends Phaser.Scene {
constructor(){
  super("fightGame");
}

preload(){
  this.load.spritesheet('programCode', 'assets/sprites/player/programador/spritesheet/spriteCoder.png', {frameWidth: 187, frameHeight: 360, endFrame:6});
}


create ()
{
    var platforms = this.physics.add.staticGroup();
    player = this.physics.add.sprite(100, 450, 'programCode').setScale(0.4);
    player.setBounce(1.2);
    player.setCollideWorldBounds(true);
    this.anims.create({
      key: 'bounce',
      frames: this.anims.generateFrameNumbers('programCode', { start: 0, end: 1 }),
      frameRate: 0.22,
      yoyo: true,
      repeat: -1
    });

    player.anims.load('bounce');

    this.anims.create({
        key: 'left',
        frames: this.anims.generateFrameNumbers('programCode', { start: 2, end: 6 }),
        frameRate: 0.355,
        repeat: -1
    });


    this.anims.create({
        key: 'right',
        frames: this.anims.generateFrameNumbers('programCode', { start: 2, end: 6 }),
        frameRate: 0.355,
        repeat: -1
    });

    cursors = this.input.keyboard.createCursorKeys();

}

update ()
{
    if (cursors.left.isDown)
    {
        player.setVelocityX(-1);

        player.anims.play('left', true);
    }
    else if (cursors.right.isDown)
    {
        player.setVelocityX(1);

        player.anims.play('right', true);
    }
    else
    {
        player.setVelocityX(0);

        player.anims.play('bounce', true);
    }

    if (cursors.up.isDown && player.body.touching.down)
    {
        player.setVelocityY(-330);
    }
}
}

Answer 1

您有几个问题：

首先，您要多次启动 fightGame 场景。

this.input.keyboard.on('keydown_ENTER', function(event) {
    spriteSelec.anims.pause();
    spriteSelec2.anims.pause();
    spriteSelec3.anims.pause();
    spriteSelec4.anims.pause();
    spriteSelec5.anims.pause();
    spriteSelec6.anims.pause();

    this.input.keyboard.on('keydown_ENTER', function(event) {
        this.scene.start('fightGame');
    },this);
}, this);

这可能目前在您的 update 中，但应该在 create 中。就像现在一样，它在每次更新时都绑定到 enter 键，而您只希望它绑定一次。

其次，由于您已经考虑到正在加载的多个场景，因此需要调整动画 frameRates 和 player.setVelocityX(); 值。如果您将前者更改为 10 并将后者增加 100，您会发现它的体验更流畅一些，但您需要进一步调整它。

多次将事件绑定到键是一个很常见的问题，调试起来很棘手，除非你单步调试代码；我发现在 create 函数顶部添加 console.log('create'); 的旧方法是简单的第一步。 :)

为什么显示 2 个精灵而不是 1 个？

Why are 2 sprites displaying instead of 1?

phaser-framework