title: Make body move at same speed in Phaser+P2 and raw P2
body: <p>I have a client-server game that uses P2 for some basic physics stuff.  I want to run Phaser with P2 on the client and raw P2 on the server.  The client will use the local P2 to predict the results from the server.  But I'm having trouble getting bodies to move at the same speed in phaser+p2 and raw p2.</p>
  
  <p>Below is a demo of both running at the same time.  Any idea what's going on here?</p>
  
  <p><a href="http://jsfiddle.net/ovcrn6bd/2/" rel="nofollow">http://jsfiddle.net/ovcrn6bd/2/</a></p>
  
  <pre><code>&lt;script src='https://cdn.rawgit.com/photonstorm/phaser/master/build/phaser.js'&gt;&lt;/script&gt;
  &lt;script src="https://cdn.rawgit.com/schteppe/p2.js/master/build/p2.js"&gt;&lt;/script&gt;
  
  &lt;canvas width="600" height="100" id="myCanvas" style='border:solid 1px'&gt;&lt;/canvas&gt;
  
  &lt;script&gt;
  
  // 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()
  &lt;/script&gt;
  </code></pre>