使 body 在 Phaser+P2 和原始 P2 中以相同的速度移动

Question

我有一个 client-server 游戏使用 P2 来处理一些基本的物理问题。我想运行 Phaser 在客户端上使用 P2，在服务器上使用原始 P2。客户端将使用本地 P2 来预测来自服务器的结果。但是我无法让身体在相位器+p2 和原始 p2 中以相同的速度移动。

下面是同时运行ning 的演示。知道这里发生了什么吗？

http://jsfiddle.net/ovcrn6bd/2/

<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>

Answer 1

您的 P2Controller 似乎比 PhaserController 更频繁地触发。不太清楚为什么会这样，但要解决这个问题，你只需要调整一条线。

改变

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

Answer 2

我通过简单地将 P2 与 Phaser 分开使用来解决了这个问题。我手动将我的精灵定位在 P2 身体的位置。

使 body 在 Phaser+P2 和原始 P2 中以相同的速度移动

Make body move at same speed in Phaser+P2 and raw P2

phaser-framework