How do you fade things in and out?

Help & Support
#1

I’ve been looking for something along the lines of alpha or opacity, but can’t seem to find it.

It feels like it should be something as simple as entity.opacity or entity.alpha or something along those lines doesn’t it?..and then that would also affect it’s children on the hierarchy. Is there something available like this?

This is what I’m trying to accomplish…

The “Ship Focal Point” is the object I’d like to fade on (instead of toggling “enabled”). Changing the parent’s opacity/alpha/whatever would fade up the child particles and halo image (using Plane).

Thank you!

#2

this.entity.model.model.meshInstances[0].material.opacity = number between 0 and 1;
this.entity.model.model.meshInstances[0].material.update();

Answer

1 Like
#3

Thanks el-pepi!

To me this really screams “build a convenience function in to this immediately before everyone’s heads blow up” :smile:

2 Likes
#4

createjs framework seems to have this built in:

http://createjs.com/docs/easeljs/classes/Sprite.html#property_alpha

Would be nice to have for all entity objects on PlayCanvas!

#5

This is different, each entity could have a different number of meshes, and each mesh have a different material with different shaders.

#6

This is my test code…

        var tl = new TimelineMax();
        // TEST
        var erf = app.root.findByName('Earth Model').model.model.meshInstances[0].material;
        tl.fromTo(erf, 10, {opacity:0, onUpdate:erf.update}, {opacity:1});
        // TEST END

I’m getting the following error:

Looking in the playcanvas-stable.js:9913, it shows the following:

...
  }, update:function() {
this.clearParameters();
this.setParameter("material_ambient", this.ambientUniform);
if(!this.diffuseMap || this.diffuseMapTint) {
  this.setParameter("material_diffuse", this.diffuseUniform)
}
if(!this.useMetalness) {
  if(!this.specularMap || this.specularMapTint) {
    this.setParameter("material_specular", this.specularUniform)
  }
}else {
...

Anyone know how to fix this?

#7

Try erf.update.bind(erf)

#8

In your tween code you are setting the update function as erf.update but they you are using this in update as if it was called as a method of erf.

You should bind the this so that iit can be used correctly

onUpdate: erf.update.bind(erf)

or

onUpdate: function () {
    erf.update();
}
#9

Got it working. Here’s the final fade out script I used. I attached this to a plane with a black material on it, so it fades out when the scene is loaded.

pc.script.attribute('fadeTime', 'number', 1, {
    displayName: "Fade Time"
});

pc.script.create('fade_out', function (app) {
    var Fade_out = function (entity) {
        this.entity = entity;
    };

    Fade_out.prototype = {
        initialize: function(){
            this.opacity = 1;
            this.mat = this.entity.model.material;
        },
        update: function(dt){
            this.opacity -= dt / this.fadeTime;
            if(this.opacity <= 0){
                this.entity.enabled = false;
            }else{
                this.mat.opacity = this.opacity;
                this.mat.update();
            }
        }
    };

    return Fade_out;
});
#10

Thank you for your answer.

The answer tell me how to update the opacity.

I try it and success.

But now I want to give a tip that we should turn on the opacity of the model in the Editor or we can’t see the

animation of fade_out.