UI transition Query

Help & Support
1

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

Regards,

Adam Burgess

2

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.

3

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.

4

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.

5

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

2 Likes
6

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();
    
    setTimeout(function(){
        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;

             setTimeout(function(){
                 self.hide();
                    ent.findByName('HUD').enabled = true;
              setTimeout(function(){
                   // ent.script.menuHandler.enabled = false;
                },600);   
             },300);        
        // ent.script.menuHandler.enabled = false;

    }, 5000);

};
1 Like