Using setTimeout to fade in objects

Help & Support
1

I want to make a fadeIn function in my game.

But it seems to have some problem.

So I make a new project to test this.

And then , I find something make me confused.

This is my test project:

It’s so simple.

I make the box entity with a new material which set opacity.

Then , I refer the t.js in the root.

In the t.js :

First , I set the opacity of box to 0

Then , I use FadeIn function

The FadeIn function is such as this

lALOdG34N80CCc0B5Q_485_521.png_620x10000q90.jpg485×521 43.2 KB

You can see that there is two version.

It’s important

The version 1 is normal and has no problem

However , the version 2 has some problem

In the chrome debug

You can see I debug in the 1000

But I find nothing in the window unless the opacity is higher than 0.4.

Yes , you can’t see wrong.

Only the opacity is higher than 0.4 I can see the box in the window when I debug in chrome.

So I am confused

Who can help me?

2

This is my project https://playcanvas.com/editor/scene/460574

Anybody could see my test project in this url.

3

I would definitely not use setTimeout or setInterval to implement this kind of thing. The main problem with these functions is that they execute even if the browser tab is deactivated/hidden. Instead, I’d do something like:

var Fade = pc.createScript('fade');

Fade.attributes.add('event', { type: 'string' });
Fade.attributes.add('duration', { type: 'number', default: 1 });
Fade.attributes.add('material', { type: 'asset', assetType: 'material', array: false });

Fade.prototype.setOpacity = function(opacity) {
    var material = this.material.resource;
    material.opacity = opacity;
    material.update();
};

// initialize code called once per entity
Fade.prototype.initialize = function() {
    this.fading = false;
    this.timer = 0;

    this.setOpacity(0);
    
    this.app.on(this.event, function () {
        this.fading = true;
    }, this);    
};

// update code called every frame
Fade.prototype.update = function(dt) {
    if (this.fading) {
        this.timer = Math.min(this.duration, this.timer + dt);
        if (this.timer === this.duration) {
            this.fading = false;
        }

        this.setOpacity(this.timer / this.duration);
    }    
};

// swap method called for script hot-reloading
// inherit your script state here
Fade.prototype.swap = function(old) {
    
};

Notice that I have created a script attribute called event. So from anywhere in your app, you can do this to trigger the fade in:

    if (this.app.keyboard.wasPressed(pc.KEY_SPACE)) {
        this.app.fire('fadeIn'); // Assuming you've entered 'fadeIn' into the script attribute
    }
4

Dear will,

According to your suggestion and your script,

I have some question:

I am so happy for your answer which remind me that I can set opacity in the update instead of setTimeout or setInterval.

But I am so confused when I try to use this method to set multiple entity’s opacity.

I found that I can use the update function to set an entity’s opacity.

But I want to know if I want to set multiple entity’s opacity not an entity how can I do in the update function?

ps: I only want to have one fade script instead of copying multiple fade script in multiple entity because I want to make it to a function.

Thank you!

5

It works fine for multiple entities. Imagine you have 10 entities with model components. Each model component points to a different (or the same) model, but all models share the same material. You just create a new entity called ‘Fade Manager’ or something, and you set the material on the script attribute. Then, when you do the fade, all models will fade out, because they share the same material.

6

Dear will,

Thank you for your answer.

I know what you are talking about.

But I am so sorry to tell you what I mean is that the multiple entites have different materials,so they may be ten absolutely different individuals.

So I want to know if the multiple entites have different materials,how should I do to change the opacity with the update function in the same time?

I have a method is using the closure,such as

I want to change the setInterval to the update but I don’t know how to do this.

Could you help me?