Tween Rotation Making Object Go to Camera In a 2D Project

Help & Support
1

I’m currently developing an engine for a new game I’m making. In it, the player will be able to use the arrow keys or WASD to change the direction of the gravity as desired. I also want the avatar to rotate to be standing “upright” according to the direction of the gravity. For this I was going to use Tween and use the SineInOut method to make a nice, fluid animation. Here’s an example of what the code looks like (this is inside of the script update function) for one of the arrow keys (I won’t bother showing all of them; they’re all the same except for the direction of the gravity and rotations):

    if (this.app.keyboard.wasPressed(pc.KEY_LEFT) | this.app.keyboard.wasPressed(pc.KEY_A)) {
        //change the gravity
        this.app.systems.rigidbody.setGravity(-50, 0, 0);
        //rotate the avatar using tween
        this.entity
        .tween(this.entity.getLocalRotation())
        .to(new pc.Vec3(0, 0, -90), 0.5, pc.SineInOut)
        .loop(false)
        .yoyo(false)
        .start();
        
        return;
    }

However, when hitting any of the arrow keys or WASD keys, the avatar immediately zooms towards the camera (or at least seems to), although it does visibly rotate if you look closely. The exception is when you hit Down or S, which fixes it, but I’m pretty sure it does this since the rotation is set back to the original rotation. I further attempted to debug this by created a perspective camera. Even when I zoomed out all the way to 999z, the avatar still covered the screen. Also keep in mind that the linear factor for the parent entity of the sprite, which is the one which is simulated by the physics (I did this so that the camera wouldn’t rotate with the avatar) is set to 0 for Z. So it SHOULD NOT zoom towards the camera like that.

Any help is greatly appreciated. Here’s the link to my editor. The code can be found in Controller.js which is inside of the Scripts folder.

https://playcanvas.com/editor/scene/737670

2

I would check this just to be sure. Change the rotation and gravity to be different to start with. This way, you can check to see if it really does have something to do with the original rotation/gravity.

1 Like
3

You were using .to instead of .rotate

//change the gravity with the arrow keys
    if (this.app.keyboard.wasPressed(pc.KEY_LEFT) | this.app.keyboard.wasPressed(pc.KEY_A)) {
        //change the gravity
        this.app.systems.rigidbody.setGravity(-50, 0, 0);
        //rotate the avatar using tween
        this.entity
        .tween(this.entity.getLocalRotation())
        .to(new pc.Vec3(0, 0, -90), 0.5, pc.SineInOut) // This line
        .loop(false)
        .yoyo(false)
        .start();
        
        return;
    }

Change to

//change the gravity with the arrow keys
    if (this.app.keyboard.wasPressed(pc.KEY_LEFT) | this.app.keyboard.wasPressed(pc.KEY_A)) {
        //change the gravity
        this.app.systems.rigidbody.setGravity(-50, 0, 0);
        //rotate the avatar using tween
        this.entity
        .tween(this.entity.getLocalRotation())
        .rotate(new pc.Vec3(0, 0, -90), 0.5, pc.SineInOut) // This line
        .loop(false)
        .yoyo(false)
        .start();
        
        return;
    }
1 Like
4

There is also a mistake in the Tween documentation which I fixed in the a fork of your project:
https://playcanvas.com/editor/scene/739774

1 Like
5

OK, thanks. I was about to say that the docs is wrong, and that’s what I used as a refference, so that makes sense. Thanks!

6

Just fixed it in my own project. Thanks for the help.

7

There is also a mistake in the Tween documentation

What is the mistake?

8 
.tween(this.entity.getLocalRotation())

Should have been

.tween(this.entity.getLocalEularAngles())
1 Like
9

so thats whats been wrong? i used the same doc for something in my own project but it never seemed to move correctly :thinking: maybe now i can get it to work :slight_smile:

10

Doesn’t

.to(new pc.Vec3(0, 0, -90), 0.5, pc.SineInOut)

need to be changed to

.rotate(new pc.Vec3(0, 0, -90), 0.5, pc.SineInOut)

as well?

11

The documentation already shows to use .rotate :slight_smile:

EDIT: wait, no it doesn’t. The project example does but not the documentation. My bad. Yes, that does need updating

1 Like