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

Question

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.
Below is a demo of both running at the same time. Any idea what's going on here?
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

I solved this problem by simply using P2 separately from Phaser. I manually positioned my sprites at the location of the P2 bodies.

Answer 2

Your P2Controller seems to firing more frequently than your PhaserController. Not quite sure why this happening, but to fix the problem you just have to adjust one line.
Change
game.physics.p2.frameRate = 1/30
to
game.physics.p2.frameRate = 10/103