时间戳

首页 > 解决方案 > 为什么显示 2 个精灵而不是 1 个？

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

问题描述

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

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

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);
    }
}
}

标签： phaser-framework

解决方案

你有几个问题：

首先，您要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在每次更新时都绑定到键，而您只希望它绑定一次。

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

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

推荐阅读