Tween sprite opacity

Help & Support
1

I wanted to change the value of sprite.opacity via Tween but it doesn’t work?

    this.tween = this.entity.tween(this.entity.sprite.opacity)
        .to(1, 1.0, pc.Linear)
        .delay(1)
        .loop(true)
        .yoyo(false)
        .start();
2

Hi @flexlytech and welcome,

Yes, there isn’t an automatic tween for that property like there is for position or rotation.

You need to update the sprite opacity property manually on the tween update callback on each tick. Check the last example for the material color on how to do this, bottom of the page:

https://developer.playcanvas.com/en/tutorials/tweening/

3

Hi Leonidas

Thanks for reply, still not working? :wink:

Test.prototype.initialize = function() {
    var opacity = 0;
    var sprite = this.entity.sprite;
    this.app
        .tween(opacity)
        .to(1, 1.0, pc.Linear)
        .loop(true)
        .yoyo(true)
        .on('update', function () {
            sprite.opacity = opacity;
        })
        .start();
};
4

of course this code works;) it may be useful to someone;)

    var opacity = {alpha: 0};
    var sprite = this.entity.sprite;
    this.app
        .tween(opacity)
        .to({alpha: 1}, 2, pc.Linear)
        .loop(false)
        .yoyo(false)
        .on('update', function () {
            sprite.opacity = opacity.alpha;
        })
        .start();
2 Likes
5

Thanks for sharing it @flexlytech!

6

Useful for repeatDelay () function - is in the official Tween version, you wouldn’t have to use setinterval to get Tween every n seconds.

    var _this = this;
    var intId = setInterval(function(_this){
        var opacity = {alpha: _this.entity.sprite.opacity};
        var sprite = _this.entity.sprite;

        _this.app
            .tween(opacity)
            .to({alpha: 0}, 0.3, pc.Linear)
            .delay(2)
            .loop(false)
            .yoyo(true)
            .reverse()
            .on('update', function () {
                sprite.opacity = opacity.alpha;
            })
            .start();
    }, 1000, _this);
1 Like
7

Good idea! You can submit a feature request or even better a PR to the playcanvas-tween repo if you like :innocent: