Arcade physics body of child lagging behind when accelerating its parent

[stwupton]

Version 2.9.1 (phaser-ce)

I'm seeing some unexpected behavior with the physics body of child sprites lagging behind when accelerating the parent. So when debugging the bodies, they appear slightly offset in the opposite direction of the movement:

This is the code for an example I made to illustrate my problem: 

var game = new Phaser.Game({
  state: {
    preload: function() {
      this.load.baseURL = 'https://examples.phaser.io/assets/';
      this.load.crossOrigin = 'anonymous';
      this.load.atlas('spritesheet', 'atlas/megasetHD-1.png', 'atlas/megasetHD-1.json');
    },
    create: function() {
      this.physics.startSystem(Phaser.Physics.ARCADE);
      this.createVegetables();
    },
    update: function() {
      this.vegContainer.body.acceleration.y = 50 * this.time.physicsElapsedMS;
    },
    render: function() {
      this.game.debug.physicsGroup(this.melons);
      this.game.debug.physicsGroup(this.mushrooms);
    },
    createVegetables: function() {
      // Create veg groups.
      this.melons = this.add.group();
      this.mushrooms = this.add.group();
      
      // Container.
      this.vegContainer = this.add.graphics();
      this.vegContainer.addChild(this.melons);
      this.vegContainer.addChild(this.mushrooms);
      
      const height = 120;
      const x = 350;
      for (let y = 0; y > -1000; y--) {
        let sprite;
        let isMelon = Math.random() > .5;
        if (isMelon) {
          sprite = this.melons.create(x, height * y, 'spritesheet', 'melon');
        } else {
          sprite = this.mushrooms.create(x, height * y, 'spritesheet', 'mushroom');
        }
        sprite.scale.set(3);
      }
      
      // Enable physics on container and all children.
      this.physics.arcade.enable(this.vegContainer);
      this.vegContainer.body.maxVelocity.y = 800;
    }
  }
});

and this is the code pen link.

It will work as expected if I accelerate the groups individually but this is not ideal as there are quite a lot of groups in the game. Is this a bug or is it working as expected?

 

[samme]

Part of the difference is the WEBGL debug canvas, which can be one frame behind (I think). You can temporarily use CANVAS.

The other part is normal, because the children's physics bodies are repositioned only during preUpdate (using the sprites' positions during the last render). So at render time those physics bodies are slightly behind their sprite's positions. It doesn't really matter for rendering (where physics bodies are irrelevant), but it's a little confusing to look at.

I think you might have fewer surprises if you accelerate the food one by one though.

[stwupton]

Yeah I can definitely see the that the bodies are not as offset while rendering in canvas. 

I guess I will just accelerate each group individually then if that's the best way to do it while keeping the physics bodies in their correct positions.

Thank you for clarifying .

[samme]

Well, I can't say for sure you'll run into trouble with the original approach, because the children's body positions should still be correct during all the relevant phases.