How to know when an UI Element is ready?

Help & Support
#1

Hello,

I’ve a menu with a 2D Screen, an image with a layout group and finally several buttons in children of this group. They are centered on the middle of the screen.

I want to create a tween animation, from the left screen border to their final position :

HomeManager.prototype.postInitialize = function()
{    
    const startPosition = this.play.getLocalPosition().clone();
    this.play.setLocalPosition(new pc.Vec3(-500, startPosition.y, startPosition.z));
    
    this.play.tween(this.play.getLocalPosition()).to(startPosition, 1, pc.BackOut).start();
};

The tween works, however the final position is not correct. It’s certainly because the layout group calculations wasn’t finished, and we have to wait a frame? If I put a setTimeout, no problem.
How to know when calculations is done? I tried with postInitialize but same issue. Can we force calculation or have an event when ready?

#2

I haven’t looked at the engine code but I suspect that the layout is done on the layout group system update.

Your ‘best’ bet here is to listen for the app update event which is fired after the component systems update or use setTimeout as you’ve previously have done.

HomeManager.prototype.postInitialize = function()
{    
    this.app.once('update', function() {
        const startPosition = this.play.getLocalPosition().clone();
        this.play.setLocalPosition(new pc.Vec3(-500, startPosition.y, startPosition.z));
        
        this.play.tween(this.play.getLocalPosition()).to(startPosition, 1, pc.BackOut).start();
    }, this);
};
2 Likes
#3

Thanks, it works fine.

It would be nice to have a method to force/refresh validation and perhaps an event fired?

#4

Maybe a reflow event could be fired? I suspect this would be the case every time the window changes size as well?

Can you added a feature request to the engine repo please for this?

#5

done LayoutGroup force validation and fire event · Issue #3368 · playcanvas/engine · GitHub :wink:

1 Like