Javascript 如何在移相器3中消除玩家和地面之间的空白

我正在通过创建一个小平台游戏来学习Phaser 3，一切都按照我的要求进行，但是当玩家加载时，他和地面之间有一些空间，这是什么原因造成的，我如何修复它？我希望他站在地上，中间没有任何空隙，这是一张照片：

这是我的js代码：

var config = {
    type: Phaser.AUTO,
    width: 900,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 300 }
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

function preload() {
    this.load.image('sky', 'assets/world/sky.png');
    this.load.image('ground', 'assets/world/ground.png');
    this.load.image('platform', 'assets/world/platform.png');
    this.load.spritesheet('player', 'assets/characters/player.png', { frameWidth: 32, frameHeight: 48 });
}

function create() {
    this.add.image(400, 300, 'sky');

    platforms = this.physics.add.staticGroup();
    ground = this.physics.add.staticGroup();


    platforms.create(600, 400, 'platform');
    platforms.create(50, 250, 'platform');
    platforms.create(750, 220, 'platform');
    ground.create(500, 550, 'ground')


    // Creating the player
    player = this.physics.add.sprite(50, 350, 'player');

    player.setBounce(0.2);
    player.setCollideWorldBounds(true);
    player.body.setGravityY(300)
    this.physics.add.collider(player, ground);

    this.anims.create({
        key: 'left',
        frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }),
        frameRate: 10,
        repeat: -1
    });

    this.anims.create({
        key: 'turn',
        frames: [{ key: 'player', frame: 4 }],
        frameRate: 20
    });

    this.anims.create({
        key: 'right',
        frames: this.anims.generateFrameNumbers('player', { start: 5, end: 8 }),
        frameRate: 10,
        repeat: -1
    });

}

function update() {
    cursors = this.input.keyboard.createCursorKeys();


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

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

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

        player.anims.play('turn');
    }

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

你确定精灵的框架高度是48而不是32x32吗

另外，我建议您添加debug=true 要更改您的配置，请执行以下操作：

    arcade: {
      debug: true,
      gravity: { y: 300 }
    }

通过这样做，每个对象都将被标记为一个紫色的轮廓，我打赌您将很快找到它。

可能的解决方案1：

尝试在此处减少第二个参数：

ground.create(500, 550, 'ground')

比如说-450

可能的解决办法2：

ground.create(500, 550, 'ground').setSize(500,500, true);
ground.refresh();

---

感谢调试模式确实非常有用，在哪里可以设置高度？多亏了调试模式，我的资源增加了高度，导致了这个问题，但我不知道如何更改它。这取决于需要重新调整的资源“地面”资源查看我的新答案。希望它能做到。

ground.create(500, 550, 'ground').setSize(500,500, true);
ground.refresh();