Sprites not follow positions in update (Physics P2)

[olorin]

Hi,
 
I want to follow a sprite with another, but when the first sprite move quickly, the second is shifted. It is visible on the screen and in the logs (x/y position in each iteration of the update function).
 
When the first sprite slow down, the shift is reduced. When it stop, the sprite are at the same position (it’s normal).
 
How to do the positions of the two elements remain the same every time?
 
I have make a live example here : http://jsbin.com/kipayexoqadu/4/edit?js,output
Lose focus to do “pause” and watch positions and images.
 
Sorry for my bad english.
 
My example code :
 

var red_ball=null, green_ball=null;var MainState={    preload: function(){    this.load.image('red_ball', 'http://examples.phaser.io/assets/sprites/red_ball.png');        this.load.image('green_ball', 'http://examples.phaser.io/assets/sprites/green_ball.png');  },  create:function() {    this.time.advancedTiming = true;        this.physics.startSystem(Phaser.Physics.P2JS);    this.physics.p2.setImpactEvents(true);    this.physics.p2.defaultRestitution = 0.8;        red_ball = this.add.sprite(100, 100, 'red_ball');    this.physics.p2.enable(red_ball);    red_ball.enableBody = true;    red_ball.physicsBodyType = Phaser.Physics.P2JS;    red_ball.scale.set(2);    red_ball.body.setCircle(8);    red_ball.body.collideWorldBounds = true;    red_ball.body.fixedRotation = true;    red_ball.anchor.setTo(0.5, 0.5);    red_ball.body.angle = 90;        red_ball.body.moveForward(3000);        green_ball = this.add.sprite(100, 100, 'green_ball');    green_ball.scale.set(2);    green_ball.anchor.setTo(0.5, 0.5);      },  update: function(){    green_ball.x = red_ball.x;    green_ball.y = red_ball.y;      },  render: function() {    this.game.debug.text(this.game.time.fps || '--', 2, 14, "#00ff00");    this.game.debug.text('Green ball: x: ' + green_ball.x + ' - y: ' + green_ball.y, 2, 30, "#00ff00");    this.game.debug.text('Red ball:   x: ' + red_ball.x + ' - y: ' + red_ball.y, 2, 46, "#00ff00");      }};var game = new Phaser.Game(500, 500, Phaser.CANVAS, 'phaser-example', MainState);

 
Thanks !
 
Edit: i have update my jsbin link example + a new screenshot to see the shifted:

Edited September 9, 2014 by olorin

[wayfinder]

use sprite.addChild(secondsprite);

[olorin]

use sprite.addChild(secondsprite);

 

Thanks for your response ! 

Indeed it is better : http://jsbin.com/kipayexoqadu/5/edit?js,output

But it is possible to remove child after? I want to drag my second sprite and in this case it stops to follow the first sprite (and when I stop to drag, the sprite become again a child). Drag doesn't work with relative positions.

AddChild() is not in the Phaser.Sprite documentation…

[wayfinder]

addChild is pixi level functionality, so you will find the documentation there. To remove the child, you can probably just add it to the world - world.addChild(secondsprite);

[olorin]

ok thank you for the advice 

you solved my problem