Triggering a tweened light animation via collision

Hihi
I’m really new to this so forgive me if its really basic. I’m trying to use collision to
trigger a tweened animation for another entity’s Light intensity. Ideally I’ll like this to
be set to the same trigger i’m using to trigger audio so it has to refer to this other entity’s intensity not
the trigger itself.
Any tips I could start from?
Many thanks in advance.

Hi @Brandon_Tay and welcome,

Since you mentioned an audio trigger, does this mean you already have triggers working? I assume you’ve been through this tutorial:

https://developer.playcanvas.com/en/tutorials/collision-and-triggers/

There are several ways to get a reference to another entity, here is an example by name:

const entity = this.app.root.findByName("My Name");
entity.light.intensity = 2.0;

Hi Leonidas, thanks for the tip. Yep I got the audio trigger going but was trying to figure out a way to get the light component working with the tween. Will try out your approach and post code to share once I get it working.

Hmm, I got the lights to switch on, but can’t seem to get the tween library working properly within the same script. To maybe give some context to what I’m attempting.-The goal is to fade in lights as the audio clip (‘animism’) is activated via a collision. Could I also attempt this with Delta time for the fade instead of tween? Any suggestions welcome.
Code below:

var Collider = pc.createScript('collider');
var brightness1 =2.6;
var brightness2 =4.0;
var blackout =0;


// initialize code called once per entity
Collider.prototype.initialize = function () {
    //this.reset();
    this.entity.collision.on('collisionstart', this.onCollisionStart, this);
    

};

Collider.prototype.onCollisionStart = function (result) {
    //if (this.tween) {
        //this.tween.stop();
    //}

    var light1 = this.app.root.findByName("orficelight");
    var light2 = this.app.root.findByName("pink-insect_tunnel");
    var light3 = this.app.root.findByName("redbg");
    var light4 = this.app.root.findByName("greentoptunnel");
    var light5 = this.app.root.findByName("redbase");
    var light6 = this.app.root.findByName("TowerLight");
    var light7 = this.app.root.findByName("CentralLight");
    var light8 = this.app.root.findByName("AnimismLight");

    if (result.other.rigidbody) {
        this.entity.sound.play("animism");
        light1.light.intensity = brightness2;
        //light1.tween (light.intensity()).to(4.0, 1.0, pc.Linear);
        //app.tween(data).to({value: 1}, 1.0, pc.Linear);
        light2.light.intensity = brightness1;
        light3.light.intensity = brightness2;
        light4.light.intensity = brightness2;
        light5.light.intensity = brightness2;
        light6.light.intensity = blackout;
        light7.light.intensity = blackout;
        light8.light.intensity = blackout;
        //tween.start;

    }
};

If I call the reset for tween during the initialize it throws out an error, essentially I’m not sure where to put tween in an existing script. The sample files in the tutorial/example all work- so would it better if I adapted the Tweenscale.js in that project to incorporate Oncollider functionality instead?

So for tweening a numeric property like that, you can do this:

// some object with a property called 'value'
const data = {
    intensity: light1.light.intensity
};

this.app
   .tween(data)
   .to({intensity: 1.0}, 1.0, pc.Linear)
   .on('update', () => light1.light.intensity = data.intensity)
   .start();
1 Like

Thanks Leonidas, that really helped a lot. I’ll post code here when I clean it up.

1 Like