Issue with Positioning and Movement in Cocos Creator 3.8

Cocos Creator
1

I’ve encountered an issue in version 3.8. Previously, we could set the x position without changing the whole vector in v2, but that’s no longer possible. Now, we have to use something like this:

this.node.setPosition(new Vec3(this.xSpeed, 0, 0).add(this.node.getPosition()));

I was checking out this Cocos Creator tutorial and tried to add movement using the update method and jumping using tween. However, due to the issue mentioned above, I couldn’t get it to work. Here’s the code I used:

For Jumping

let nodePos = this.node.position;
let jumpUp = tween(this.node).by(this.jumpDuration, { position: new Vec3(nodePos.x, this.jumpHeight, nodePos.z) }, { easing: 'sineOut' });
let jumpDown = tween(this.node).by(this.jumpDuration, { position: new Vec3(nodePos.x, -this.jumpHeight, nodePos.z) }, { easing: 'sineIn' });

let jumpTween = tween(this.node).sequence(jumpUp, jumpDown);
var jumpAction = tween(this.node).repeatForever(jumpTween);
tween(this.node).then(jumpAction).start();

For Moving Left and Right

update(dt: number) {
    if (this.accLeft)
        this.xSpeed -= this.accel * dt;
    else if (this.accRight)
        this.xSpeed += this.accel * dt;
    
    if (Math.abs(this.xSpeed) > this.maxMoveSpeed)
        this.xSpeed = this.maxMoveSpeed;

    this.node.setPosition(new Vec3(this.xSpeed, 0, 0).add(this.node.getPosition()));
}

The issue is that I can’t simply set the x position without updating the whole vector, which complicates the implementation. Any suggestions on how to handle this in the new version?

2

you change the node position x in Jumping and change it at the same time in Moving Left and Right. So it can not work out.

3

How do you think I should modify the code to fix this?

4

it is impossible. there is no way to make a node show two different position x at the same time.

5

This was possible previously, right? We could just tween in the y direction and move in the x direction. There must be an alternative for this. What I need is:

  1. Move the node continuously in the y direction for the jump action.
  2. Move the node along the x axis when a button is clicked.

How do you think I can achieve this?

6

from your description, you can make an animation up and down from animation clip. then use code to change x axis when a button is clicked. that is the way

7

Tried it, I added jump to animation and set it to play on load along with loop as wrap mode. Movement has been kept as same but it doesn’t work. It only starts moving if I remove animation.

8

Another method you can try:

this.nodePos = {y:1};
let jumpUp = tween(nodePos ).by(this.jumpDuration, { y:this.jumpHeight }, { easing: 'sineOut' });
let jumpDown = tween(nodePos).by(this.jumpDuration, { y: -this.jumpHeight }, { easing: 'sineIn' });

let jumpTween = tween(this.node).sequence(jumpUp, jumpDown);
var jumpAction = tween(this.node).repeatForever(jumpTween);
tween(this.node).then(jumpAction).start();

and then in the update Function you can use this.nodePos, to set node position Y.

9

Thank you. This solution appears to be working, but it seems overly complex. Is there a more efficient or streamlined approach?

10

I believe that what you want to achieve is a lerp logic inside the update cycle, but you are trying to use Tween to achieve this. The most streamlined way to achieve it would be indeed centralize the movement logic in the update cycle and add the jumping animation using AnimationClip or related.

You can take a look at this code here to get an idea. You probably need a simpler code than that for your logic.

        // Create a new movement vector based on the character's input
        Vec3.lerp(this.playerVelocity, this.playerVelocity, desiredVelocity, this.linearDamping * deltaTime);
        this.movement = Vec3.multiplyScalar(this.movement, this.playerVelocity, deltaTime);
        this.characterCtrl.move(this.movement);

And regarding the Tween API itself, you need to use parallel to update it, not sequence, in this specific case.