如何在 Phaser 3 中移除玩家和地面之间的空白空间答案

【问题标题】：How to remove empty space between player and ground in Phaser 3如何在 Phaser 3 中移除玩家和地面之间的空白空间
【发布时间】：2020-09-14 07:52:55
【问题描述】：

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

https://ibb.co/Px65JMR

这是我的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);
    }
}

【问题讨论】：

标签： javascript phaser-framework

【解决方案1】：

    this.load.spritesheet('player', 'assets/characters/player.png', { frameWidth: 32, frameHeight: 48 });

您确定精灵的 frameHeight 是 48 而不是 32x32？

另外，我建议您添加 debug=true 到你的配置：

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

通过这样做，每个对象都将被标记为紫色轮廓，我敢打赌你很快就会弄清楚。

【讨论】：

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

【解决方案2】：

可能的解决方案1：

在这里尝试减少第二个参数：

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

到 - 比方说 - 450。

可能的解决方案2：

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

【讨论】：