在 Phaser+P2 和 raw P2 中使身体以相同的速度移动答案

【问题标题】：Make body move at same speed in Phaser+P2 and raw P2在 Phaser+P2 和 raw P2 中使身体以相同的速度移动
【发布时间】：2015-02-19 14:39:20
【问题描述】：

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

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

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>

【问题讨论】：

标签： phaser-framework

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

改变

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

【讨论】：

即使我按照您的建议更改帧速率，球仍然不完全同步。我的解决方案只是将原始 P2 与 Phaser 分开运行。
很高兴你知道了。你是对的，我没有仔细观察他们，我稍微调整了数学，这种方式应该也可以。