UI transition Query

Hello, regarding the 2D screen element and 2D elements in playcanvas, how can I make a UI element easily dynamically appear?

For example:

How would I get the element to move from left (Off screen) to on screen? I was thinking of using the tweeny library but I don’t think it supports playcanvas 2D elements


Adam Burgess

Hi @adamburgess38,

Yes you can definitely use the tween library for that. Specifically you should be tweening the entity local position of your UI elements.

Focus on animating only X and Y, and leave Z at the same value and you will be good.

I’m thinking of, having the element off screen via coordinates, then bringing them to 0,0,0, therefore using the anchor and pivot to position correctly.

Yes, that’s what I do usually to calculate the tween. Move the entity off screen and tween it to it’s destination / final position.

Brilliant thank you, I’m using this engine for my degree’s dissertation so just wanted to be 100% sure


dont know if this exactly help but its something

MenuHandler.prototype.OnClick = function(){
    this.app.root.findByName('PlayButton').button.off('click', this.OnClick, this);
    var slide = this.entity.findByName('Slide Effect');
    var ent = this.entity;
    var self = this;
    slide.tween(slide.getLocalPosition()).to(new pc.Vec3(-450, 0, 1), 1, pc.QuadraticInOut).loop(false).yoyo(false).start();
        slide.tween(slide.getLocalPosition()).to(new pc.Vec3(-3600, 0, 1), 1, pc.QuadraticInOut).loop(false).yoyo(false).start();

        self.Canvas.script.playerHandler.enabled = true; 
        ent.findByName('Camera').script.cameraFollower.enabled = true;

                    ent.findByName('HUD').enabled = true;
                   // ent.script.menuHandler.enabled = false;
        // ent.script.menuHandler.enabled = false;

    }, 5000);

1 Like