Phaser framework 使身体在移相器中以相同的速度移动+；P2和原始P2

我有一个客户端-服务器游戏，它使用P2进行一些基本的物理操作。我想在客户端上用P2运行Phaser，在服务器上用原始P2运行Phaser。客户端将使用本地P2来预测来自服务器的结果。但我很难让物体在相位器+p2和原始p2中以相同的速度移动

下面是两者同时运行的演示。知道这是怎么回事吗

//带圆形精灵的初始相位器。
相控器=功能（）{
var控制器=此
var game=this.game=new Phaser.game（600100，Phaser.AUTO，”{
创建：函数（）{
var半径=20
var bmd=game.make.bitmapData（半径*2，半径*2）
骨密度圆（半径，半径，半径，#ffffff'）
var sprite=this.sprite=game.add.sprite（30，30，bmd）
sprite.anchor.setTo（.5，.5）
game.physics.startSystem（Phaser.physics.P2JS）
游戏。物理。p2。启用（精灵，假，假）
game.physics.p2.frameRate=1/30
sprite.body.setCircle（半径0,0,0）
sprite.body.摩擦力=0
game.physics.p2.摩擦力=0
//使圆圈以恒定速度移动。
sprite.update=函数（）{
console.log（'sprite update'）
sprite.body.velocity.x=1
sprite.body.velocity.y=0
}
}
})
}
P2Controller=函数（）{
//创建p2圆并准备画布。
this.world=newp2.world（{gravity:[0,0]}）
var circleShape=新p2.圆（20）
var body=new p2.body（{mass:1，position:[30,30]}）
body.addShape（圆形）
this.world.addBody（body）
var画布，ctx，w，h；
canvas=document.getElementById（“myCanvas”）；
ctx=canvas.getContext（“2d”）；
ctx.lineWidth=1；
//设置圆在画布上移动的动画。
函数animate（）{
请求动画帧（动画）；
clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
var x=主体位置[0]，
y=主体位置[1]，
半径=主体。形状[0]。半径；
弧（x，y，半径，0，2*Math.PI）；
ctx.stroke（）；
}
制作动画（）；
此帧的速率=1/30
//开始踩油门。
var控制器=此
函数step_world（）{
console.log（'步骤p2'）
body.velocity=[1,0]
controller.world.step（controller.frame\u rate）
setTimeout（步进世界、控制器、帧速率）
}
step_world（）
}
新的相位控制器（）
新控制器（）

您的P2控制器似乎比您的相控器触发频率更高。不太清楚为什么会发生这种情况，但要解决问题，您只需调整一条线

改变

game.physics.p2.frameRate=1/30 到

---

game.physics.p2.frameRate=10/103

我只需将p2与相位器分开使用，就解决了这个问题。我手动将精灵定位在P2主体的位置。

即使我按照您的建议更改帧速率，球仍然不完全同步。我的解决方案是将原始P2与相位器分开运行。很高兴你能解决这个问题。你是对的，我没有足够仔细地观察他们，我稍微调整了一下数学，这种方法也应该有效。

<script src='https://cdn.rawgit.com/photonstorm/phaser/master/build/phaser.js'></script>
<script src="https://cdn.rawgit.com/schteppe/p2.js/master/build/p2.js"></script>

<canvas width="600" height="100" id="myCanvas" style='border:solid 1px'></canvas>

<script>

// Init phaser with a circle sprite.

PhaserController = function() {
  var controller = this
  var game = this.game = new Phaser.Game(600, 100, Phaser.AUTO, '', {
    create: function() {
      var radius = 20
      var bmd = game.make.bitmapData(radius * 2, radius * 2)
      bmd.circle(radius, radius, radius, '#ffffff')
      var sprite = this.sprite = game.add.sprite(30, 30, bmd)
      sprite.anchor.setTo(.5, .5)
      game.physics.startSystem(Phaser.Physics.P2JS)
      game.physics.p2.enable(sprite, false, false)
      game.physics.p2.frameRate = 1/30
      sprite.body.setCircle(radius, 0, 0, 0)
      sprite.body.friction = 0
      game.physics.p2.friction = 0

      // Make the circle move at a constant speed.

      sprite.update = function() {
        console.log('sprite update')
        sprite.body.velocity.x = 1
        sprite.body.velocity.y = 0
      }
    }
  })
}


P2Controller = function() {

  // Create a p2 circle and prepare a canvas.

  this.world = new p2.World({gravity:[0,0]})
  var circleShape = new p2.Circle(20)
  var body = new p2.Body({ mass:1, position:[30, 30] })
  body.addShape(circleShape)
  this.world.addBody(body)

  var canvas, ctx, w, h;
  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  ctx.lineWidth = 1;

  // Animate the circle moving across the canvas.

  function animate() {
    requestAnimationFrame(animate);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    var x = body.position[0],
        y = body.position[1],
        radius = body.shapes[0].radius;
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.stroke();
  }
  animate();

  this.frame_rate = 1/30

  // Start stepping the cicle.

  var controller = this
  function step_world() {
    console.log('step p2')
    body.velocity = [1, 0]
    controller.world.step(controller.frame_rate)
    setTimeout(step_world, controller.frame_rate)
  }
  step_world()
}

new PhaserController()
new P2Controller()
</script>