How to Camera Follow the right way

Cocos Creator
#1

I’m trying to make the camera follow the player and have jittering problem. I’m using physic, updating player on update method (changing velocity) and updating camera to player node position and lateUpdate . I’m not using delta in update for simplicity. I’ve tried executionOrder on Player to -1 with no success. Any idea ?

The code is simple as that.

lateUpdate(deltaTime: number) {
        const desiredPosition = v3(this.target.position.x, this.target.position.y, this.target.position.z);
        this.node.position = desiredPosition;

 }
1 Like
#2

Hi, for this problem you can try to pre-calculate the position of the next move in the current frame. You can refer to this demo to see how to do it.

#3

Thank you for you answer! Can you please elaborate where the part of pre-calculation is made ? Beside the rotation the example is pretty much the same with a getPosition of the target and a setPosition of the camera node, am I missing something ?

#4

Can you print out the value of the target to see? Is it also floating up and down

#5

Here is the repository if you wanna take a look GitHub - theRenard/2D_Platformer: 2D Platformer in Cocos Creator, I can surely print out the value of the target, I can try to compare them to the camera ones

#6

Ok this start to look interesting. When I print them (console.log) they are the same and there’s no jittering (with or without chrome console open). I guess is a problem of loop-event not being in sync, what are your thoughts ?

#7

This is because the time frame is not necessarily fixed. So it is possible to update the position of the character at each update using a fixed distance of movement.

#8

I’ve tried to passively update the camera position in the player update loop but it’s the same thing, it jitters. You talk about a “fixed distance”, that means don’t modify the velocity of the player and move both camera and player at the same time ? The project you showed contains an answer to this issue ? If so I’ll try to get more into its logic

#9

What I mean is that by moving a fixed distance each time I mean moving, say, 20 pixels at each update.
Also, my example is not relevant to this issue, anymore.

#10

A possible simple workaround. Try making the camera as a child of the character node. It should in theory follow the node of the character if you are moving the entire node for the controls.

Otherwise, I’m sure there’s a reason to use setPosition instead of editing the position var. I can’t remember what the reason was but setPosition() might help.

#11

You can try to use lerp for smooth camera movement:
here is my component for follow camera:

ratio is how quickly the position of the camera will be sinking to the target position.

import { _decorator, Component, Node, Vec3 } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('FollowTargetComponent')
export class FollowTargetComponent extends Component {
    @property(Node)
    public target: Node = null;

    @property
    public ratio: number = 0.05;

    // start() {}

    update(deltaTime: number) {
        const { target, node, ratio } = this;

        if (target) {
            node.position = Vec3.lerp(
                node.position,
                node.position,
                target.position,
                ratio
            );
        }
    }
}
1 Like
#12

Very good example. I’ll need this myself later on. Thanks for sharing!

Will need to be changed to vec2 for OP but should hopefully work the same.

#13

I think setPosition and position.x do the same thing, but just to be sure I’ve used both, and the result is the same. Your workaround works but I would like to have more separation between components, that said if no other solution is proposed I think I’ll go for it. Thank you also @Horchynskyi, I’ll test your script, but at a first sight looks like the old implementation I had. One thing I’ve noticed is that on my 100hz screen I have the issue, but on a 60hz everything is ok.