Fade out UI element

Help & Support
1

Hi there,

There’s probably a really simple solution to this, but all the Fading examples I can find are for objects (PlayCanvas | HTML5 Game Engine).

I’m looking to fade out the instructions after a few seconds. I’m using tween.js but nothing’s showing at all.

My Project:
https://playcanvas.com/editor/scene/1151701

Thanks,
Kim

2

Hi @khmcneil,

Check this post, I think it will be of help:

3

Thanks @Leonidas! That’s a really clean way of doing it. I’ve not got it quite working yet. Are you able to have a look and let me know where I’ve gone wrong? Is the time in seconds?

4

I will try and take a look later on, if not for another forum member :wink:

Yes, the tween times are in seconds.

5

Hi @khmcneil,

I took a look at your project. I believe there are a couple of issues here:

Ui.prototype.initialize = function() {
    var div = document.createElement("div");
    div.id = "ui";
    div.innerHTML = this.html.resource;
    document.body.appendChild(div);

    style = pc.createStyle(this.css.resource);
    document.head.appendChild(style); 
};


// initialize code called once per entity

Ui.prototype.tweenOpacity = function(entity, from, to, time, onComplete) {
    var opacity = {value: 1};
    entity
        .tween(opacity)
        .to({value: 0}, 2, pc.SineOut)
        .on('update', function() { entity.element.opacity = opacity.value; }.bind(this))
        .start();
};

The first of which is that it doesn’t look like anything ever calls the tweenOpacity() function. At least not in the scripts I see.

I’m also not too sure about the setup here since it doesn’t seem like you’re using most of the arguments in your function setup.

I could make some recommendations, but first it would help to understand the intended behavior. What would be controlling/triggering the fade and when should it happen?

1 Like
6

Hi @eproasim,

Many thanks for taking a look. I’m looking at making the instructions disappear after a few seconds. These are currently set as an entity parented to the player and using the ui.js.

Screenshot 2021-05-20 at 13.33.20

Thanks,
Kim

7

Hi @khmcneil,

Ohhhhh ok. This is actually another problem entirely. I didn’t realize you were actually trying to fade a <div> instead of a Playcanvas element. That will change how your code has to be factored quite a bit. Here is how I made it work:


Ui.attributes.add('html', {
    type: 'asset',
    assetType: 'html'
});

Ui.attributes.add('css', {
    type: 'asset',
    assetType: 'css'
});


// initialize code called once per entity
Ui.prototype.initialize = function() {
	this.opacity = new pc.Color(1, 1, 1, 1);
    this.div = document.createElement("div");
    this.div.id = "ui";
    this.div.innerHTML = this.html.resource;
    document.body.appendChild(this.div);

    this.style = pc.createStyle(this.css.resource);
    document.head.appendChild(this.style);

    this.tweenOpacity();

};


// initialize code called once per entity

Ui.prototype.tweenOpacity = function() {
    
    this.entity.tween(this.opacity)
    	.to({r:1, g:1, b:1, a:0}, 2.0, pc.SineOut)
    	.on('update', this.onFade, this)
        .delay(3)
    	.start();
};

Ui.prototype.onFade = function() {
	
	this.div.style.color = this.opacity.toString(true);
    
};

You can see it in action here: https://playcanvas.com/editor/scene/1157638

Hope this helps!

1 Like
8

@eproasim Woohoo!!! That’s brilliant! Thank you SO much! :smiley:

If you can also help with the issue of the video continuing to play, that’d be incredible!

1 Like