Delay with reparenting

I have a simple game where boxes move around on conveyer belts. When you click a conveyor, it rotates 90 degrees. When a conveyor rotates, I’d like for any boxes sitting on top of it to rotate with it.

To make this work, I have the boxes reparenting to the individual conveyors on initial contact. This seems to work fine and the boxes correctly move with the conveyor as expected; however, I’m noticing that it takes ~2 seconds after calling reparent for the box (child) transform to be affected by the conveyor (parent) transform.

This is somewhat game-breaking. I suspected that maybe there was some recursion happening in the scene but am not seeing a difference when I delete everything aside from a single conveyor and a single box.

Any idea why the reparent call would takes so long? Or alternative ideas?

The code is quite simple:

Conveyor.prototype.OnCollisionStart = function(result)
{ 
    result.reparent(this.entity, 0);
};

I also tried (same result):

Conveyor.prototype.OnCollisionStart = function(result)
{ 
    this.app.root.removeChild(result);
    this.entity.addChild(result);
};

Reparenting is an expensive operation, as the engine marks the scene hierarchy dirty and has to update it. The delay will get bigger the more entities you have in the scene. You want to do it once or as few times as possible at run time.

Instead of reparenting, your belt section could have an empty entity child, used as a pivot point. When your belt section is moving, its child will move with it. Now, when you want to place your item on that section, you simply read the world position of the pivot point and place your item to it. This way your item will ride on a belt without reparenting.

const pos = pivot.getPosition();
item.setPosition(pos);
1 Like