[SOLVED] Tweening number values with reverse

Help & Support
1

Hi!

I’m trying to tween the SkyBoxIntensity. So far I got it to work in one way, but I cannot get it to actually reverse. I’m using a code section by @Leonidas where he interpolates an Alpha value.

var self = this;
    var target = 0.15;
    var data = {
        sIntensity: 1
    };
    
    
    this.tween = this.app.tween(data).to({sIntensity: target}, 5.0, pc.Linear).loop(false).yoyo(false).on('update', function (){
        self.app.scene.skyboxIntensity = data.sIntensity;
        
    }).on('complete', function () {
        self.tween.stop(); // or self.tween.reverse();
        target = 1;
    });

To be honest I’m not really getting the {sIntensity: target} section inside the to() function, which is probably causing my issues. Using the Reverse function on the tween does not do a thing.

Any ideas?

EDIT:

Turning on Loop and YoYo on this tween does not work either, so I’m screwing something up, big time.

1 Like
2

good job

3

Hi @at_3DigitStudio,

Mmm, loop and yoyo should work, can you try enabling them and then commenting out your ‘complete’ callback?

I imagine calling stop() maybe the issue, since after you need to explicitly call start() again.

I don’t see anything wrong in your code, let us know if it the issue persists.

5

Hey @tyler1, your kind words are appreciated but if you don’t have anything to contribute to a topic avoid posting! Discussion here involves around helping users resolve their PlayCanvas related issues .

6

I have commented out the whole “completed” block, starting the tween manually from the developer console of the browser. Same happens, Sky gets dark, then stops at the requested value, and does not go back to bright.

7

So when the tween is running, I get

DEPRECATED: pc.GraphNode#_dirtify is deprecated. Use pc.GraphNode#_diftifyLocal or _dirtifyWorld respectively instead.

The tween completes once, even though YoYo and Loop is on, and the DEPRECATED message is no longer printed. So the tween stops completely.

8

Don’t know if it makes it any different, but the tween script is attached to the scene root.

9

Hmm, care to share a sample project? I would like to try to solve this.

10

I’ll send you the link in DM

1 Like
11

Posting the resulting script:

var TweenSky = pc.createScript("tweenSky");

TweenSky.prototype.initialize = function () {
  this.tween = undefined;
  this.dayIntensity = 1.0;
  this.nightIntensity = 0.15;

  // --- examples on how to use this method to animate the scene intensity
  // --- animate to night
  this.animateTo(this.nightIntensity);

  // --- or animate to day
  // this.animateTo(this.dayIntensity);
};

TweenSky.prototype.animateTo = function (intensityToAniamte) {
  if (this.tween) this.tween.stop();

  var self = this;
  var data = { sIntensity: this.app.scene.skyboxIntensity };

  this.tween = this.app
    .tween(data)
    .to({ sIntensity: intensityToAniamte }, 1.0, pc.Linear)
    .on("update", function () {
      self.app.scene.skyboxIntensity = data.sIntensity;
    })
    .start();
};
2 Likes
12

One tiny thing:

Inside the “update” function, this.app.scene is undefined. Putting a

var self = this;

next to the

var data = {};

and calling

self.app.scene....

works perfectly fine!

1 Like
13

Nice! Updating the script.

2 Likes