Fade Out UI element?

Help & Support
1

In my project I have an Image UI element. What I would like to achieve is that when for example I press a key the image fades out.

I have not find a way yet to easily do this.

I hope that someone can help me out with this.

Best,
Maarten

2

You can use the Tween library to fade out the opacity of the image:
https://developer.playcanvas.com/en/tutorials/tweening/

// Entity: Pass the image entity
// From: Opacity value to be changed from i.e 1
// To: Opacity value to be changed to i.e 0
// Time: Total time to complete the fade
// onComplete(optional): Function to trigger after fade out/in is complete

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

If you don’t like it this way, you can use dt in the update to control the opacity too.

2 Likes
3

Hi @Maarten_deVries,

Your best bet would probably be to tween the opacity: https://developer.playcanvas.com/en/tutorials/tweening/

Here is how I might approach it with ElementComponents:

var ExampleTween = pc.createScript('exampleTween');

ExampleTween.prototype.initialize = function() {
	this.opacity = {value: 1};

	this.opacityTween = this.entity.tween(this.opacity)
		.to({value: 0}, 2.5, pc.Linear)
		.on('update', this.onFade, this);

    this.app.keyboard.on(pc.EVENT_KEYDOWN, this.onKeyDown, this);

};

ExampleTween.prototype.onFade = function() {
	this.entity.element.opacity = this.opacity.value;
};

ExampleTween.prototype.onKeyDown = function (event) {
    
    if (event.key === pc.KEY_SPACE) {
    	this.opacity.value = 1;
        this.opacityTween.start();
    }

};

What is above is a very basic way of doing it, and you will have to tune how you want to tell the tween to start and stop in your scripts as well as when the opacity value updates.

Hope this is helpful.

1 Like
4

Thank you.

I have created a script called: “ExampleTween.js” and I also uploaded “tween.js” to my project (I read that I need to put that in my project for tweens to work).

Now I get these errors in my code.

626×558 55.1 KB

732×537 57.5 KB

I have experience with c# coding but not really much with javascript. What is going wrong in the code?

1 Like
5

Hi @Maarten_deVries,

Sorry about that. Fast fingers make for mistakes. I forgot a semicolon and accidentally put two equals signs in the example. I have updated the previous post to correct these issues.

7

I am aware this is an old topic, but I would like to build upon it for my specific use case. I tried your code in my script file for my text in a 2D interface, but for my use case I would like to have it start on initialization (which I have already accomplished) and have it become transparent at a faster rate, but once opacity hits 0 I would like it to turn the opacity back up at the same rate but in reverse. As I am relatively new to the space of Playcanvas scripting, I was not able to figure this out on my own. Thank you!!