How to properly use tween for alpha?

#1

Hi. I need to linearly tween an object’s alpha to 0. When I try to do this I get errors such as

Cannot read property 'tween' of undefined

This is my code:

 var screen4 = app.root.findByName('Screen4');
        var tween = new TWEEN.Tween(this.screen4);
    
        app.on('game:start', function () {
            setTimeout(function () {
            this.entity.tween(screen4).to({alpha: 0});
//            screen4.enabled = false;
            }, 1250);
        }, this);

what do I need to change to make it so this will work, I have tried debugging but I cannot figure this out :slight_smile: Thanks for any help

1 Like
#2

So, first step is to add the tween.js library to your project. Make sure you get the latest version from the github page:

Then to tween the alpha, you need to access the material of the model referenced by this entity. As alpha isn’t a property of the pc.Entity class.

Something like this would work:

// some object with a property called 'value'
var data = {
    opacity: 0
};
var material = this.entity.model.material;

this.app
.tween(data)
.to({opacity: 1.0}, 1.0, pc.Linear)
.on('update', function () {

    // alpha is called opacity in Playcanvas
    material.opacity = data.opacity;
    material.update();
})
.start();
1 Like
#3

Using that code gives me an error that says
'Cannot read property 'tween' of undefined'
:confused:

#4

That sounds like you haven’t added the playcanvas tween library to your project.

If you did that, and it doesn’t work, try sharing a project to take a look.

#5

https://playcanvas.com/editor/scene/636264

for some reason it also won’t let me add it to Screen4…?

#6

That project uses an outdated version of the tween library, you won’t be able to use it as it is.

Try creating a new empty project to experiment with tweening, that way you can isolate each problem and work your way around it, ultimately learning.

#7

The new one that I added is called ‘tweening.js’

#8

Sorry, can’t help you more in regards to the dependencies on that project. I would still propose creating an empty project to try and learn how to tween an objects alpha.

#9

Okay, I have to go to sleep in a few minutes, I will try doing the new project tomorrow

1 Like