Using tween for camera movement

Hello guys, im not really sure how tween-position works, im trying to make my camera follow my players Z position so it is coming along with our player by side. And so i used tween this way: I created object which is following my players Z position from a distance and i want my tweened camera make follow this object in smooth way, the smooth tween movement is only being fired once. Here is code for object following my player, which works good:


And here is a code for tweening the position.

  1. I found and defined the object im tweening to in initialize function
  2. Im trying to get updated position of that object so my camera knows where to go
  3. Here im moving my camera to the position of object, and from there should only follow Z position as our “Position_1” objects only follows Z position.
  • Summary: my camera only moved once, and never more. does anyone know what the issue is ? Thank you

EDIT: Im adding second picture in bigger scale:

here is the original size: https://forum-files-playcanvas-com.s3.dualstack.eu-west-1.amazonaws.com/original/2X/a/ad37219c46f9ebbccd3ac894259be1199fe75538.png

Hi @smokys! I don’t know if this would work in your case, but I am using a tween in the update function. With a boolean I prevent the tween from being started consecutively. I am using .onComplete in the tween to reset the boolean when the tween is ready, so the tween can be restarted.

1 Like

Hello @Albertos, could you please show me a code so i better understand what do you mean? And maybe i could rework it somehow so it works for me

@smokys, I think tween is not suitable for your use case. It is good to use for situations, when you have some fixed points around your scene that you wish to transition your camera between.

When you have a dynamic object that is contantly moving, then you can interpolate the camera position directly. For example:

/* jshint esversion: 6 */

class Script extends pc.ScriptType {
    
    initialize() {
        // for example some player entity you want to look at
        this.player = this.app.root.findByName('Player');
        
        // as from your example, an entity that is used as camera pivot that it shoudl follow
        this.pivot = this.app.root.findByName('Position_1');

        // well, the camera itself
        this.camera = this.app.root.findByName('Camera');

        // a temporary vector that we can re-use each frame
        this.inter = new pc.Vec3();
    }
    
    update(dt) {
        // find intermediate position for camera, based on where the pivot and camera currently are
        const speed = 0.3; // from 0 to 1, controls how tightly the camera sticks to pivot entity
        const current = this.camera.getPosition();
        const target = this.pivot.getPosition();
        const inter = this.inter.lerp(current, target, 1 - Math.pow(speed, dt));
        
        // set camera position to that intermediate location
        this.camera.setPosition(inter);
        
        // also, make the camera look at the player
        const playerPosition = this.player.getPosition();
        this.camera.lookAt(playerPosition);
    }
    
}

pc.registerScript(Script, 'script');
3 Likes

Wow, this is the code i was looking for my entire time spent on play canvas haha! Thank you, this is good one, although it doesnt work in second level but i will find the issue myself, thank you guys :slight_smile:

Can I do the same with Rotation anyway?
I mean instead of using lookAt just use interpolated rotation

Yes, you can smoothen the rotation by lerping a quaternion. Same way, but with rotation.

1 Like