[SOLVED] Tweening Element Group not working?

Help & Support
1

I have this code, which should be quite simple:

    const pos = this.entity.getLocalPosition();
    const startY = pos.y;

    this.entity.setLocalPosition(pos.x, startY + 1500, pos.z);
    this.entity.enabled = true;

    if(this._moveTween) this._moveTween.stop();

    this._moveTween = this.app.tween(this.entity.getLocalPosition()).to({ x: pos.x, y: startY, z: pos.z }, 3.0, pc.SineOut);
    this._moveTween.start();

Basically it takes a dialog element (Element Group) and tweens its position to make it appear from the top of the screen.

But as soon as the tween starts, the element is hidden and never displayed again. I added a global reference to it so I could debug it in the JavaScript console and I see it’s localPosition object is being tweened properly, but it just won’t show anywhere.

Also, if after tweening I do entity.setLocalPosition(x, y, z) using the same values it already has in its localPosition, the object appears right where it should be.

I’ve been playing around with this for a while and I just can’t figure out what’s wrong. Any ideas?

2

I have created this sample project to isolate the issue:

https://playcanvas.com/project/881568/overview/tween-test

You can see the label is never displayed. If you go to the JavaScript console and do:

entity.getLocalPosition();
Vec3 {x: 0, y: 0, z: 0}
entity.setLocalPosition(0,0,0);

Then the label appears exactly where it should be.

3

Hi @mariogarranz,

Changing this.app.tween to this.entity.tween will fix your issue, to tween numbers like opacity, you can use app.tween but for entities, entity.tween will work.

2 Likes
4

Thanks Saad! I wasn’t aware that both functions were different.

Thanks a lot.

1 Like