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

Question

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

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

Answer 1

理论上，您可以从上一次update函数调用开始测量经过的时间，并计算差值，或者只需观察所需的速度(也就是说，尝试不同的速度，直到它与背景移动相匹配(：

更新：
如果不需要物理对象；岩石"手动"；，这很容易

这里有一个快速的演示，我大开眼界：

• 红色蘑菇，使用物理和速度 警告：对象的速度可能会因浏览器和硬件而异
• 更新：绿色蘑菇，通过位置手动移动

// Minor formating for stackoverflow
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>

免责声明：这不是最优雅的解决方案，但我花了30秒才找到匹配的速度。

次要更新：
我改进了眼球法并进行了速度校正，它可能会导致轻微的闪烁/滑动(最多1-2个像素跳过(，但应该在"所有">设备。

更改只是添加了一个小计算let speedCorrection = (1000/60)/delta;