如何在 Phaser3 中使精灵以与 tileSprite 相同的速度移动

Question

我是 Phaser 的新手。我想做一个代表地面移动的背景，上面应该有一堆石头，我把它们做成一个精灵组。

我将地面设置为 tileSprite，并且在每次更新时我都更改了 tilePositionX。我的问题是如何设置岩石的速度以匹配背景中的更新，使它们看起来在地面上并以与地面相同的速度移动。

Answer 1

从理论上讲，您可以测量自上次 update 函数调用以来经过的时间，并计算差异，或者只是 eye-ball 所需的速度。 （又名。尝试不同的速度，直到它与 background-movement 匹配）：

更新:
如果不需要物理对象，您可以“手动”移动“岩石”，这非常简单。

这是一个快速演示，我 eye-balled:

红色蘑菇，使用物理和速度。 警告：对象的速度can/will因浏览器和硬件而异。
更新: 绿蘑菇, 手动通过位置移动。

// Minor formating for Whosebug
document.body.style = "display: flex;flex-direction: column;";    

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 150,
    physics:{
        default: 'arcade',
        arcade: { debug: true }
    },
    scene: {
         preload,
         create,
         update
    }
}; 

var tilesprite;
var redRock;
var greenRock;

function preload ()
{
    this.load.image('mushroom', 'https://labs.phaser.io/assets/sprites/mushroom16x16.png');
}

function create ()
{
    tilesprite = this.add.tileSprite(400, 300, 800, 600, 'mushroom');

    redRock = this.add.image(400, 40, 'mushroom').setScale(2);
    redRock.setTint(0xff0000);

    this.physics.add.existing(redRock);
    redRock.body.setVelocityX(-60)

    greenRock = this.add.image(400, 90, 'mushroom').setScale(2);
    greenRock.setTint(0x00ff00);

}

function update (time, delta){
    tilesprite.tilePositionX += 1;
    
    let speedCorrection = (1000/60)/delta;
    redRock.body.setVelocityX(-60 * speedCorrection )

    greenRock.x -= 1;
    
    // extra "reset" Rock
    if( redRock.x + 16 < 0 ){
      redRock.x = this.sys.game.canvas.width + 16;
      greenRock.x = this.sys.game.canvas.width + 16;
    }
}


var game = new Phaser.Game(config);

<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js">
</script>

Disclaimer: It is not the most elegant solution, but it took me literally 30 Seconds to find a matching velocity.

次要更新：
我通过速度校正改进了 eye-ball-方法，它可能会导致较小的 flickering/slipping（最多 1-2 个像素跳过），但应该在 "所有" 设备。

变化只是增加了一个小的计算let speedCorrection = (1000/60)/delta;

如何在 Phaser3 中使精灵以与 tileSprite 相同的速度移动

How to make a sprite moving at the same speed of tileSprite in Phaser3

phaser-framework