[SOLVED] Rotate entity from -17 to 17 onclick and repeat

Help & Support
1

How would I do this for a hand entity?
Here is the screenshot I took to give a visual.
As you can see the “Hands” entity needs to rotate on the y axis only.
Screenshot 2022-02-18 11.42.40 AM

the rotation should be from:
Screenshot 2022-02-18 11.42.57 AM

to:
Screenshot 2022-02-18 11.43.06 AM
As shown. Also, when the mouse is no longer clicking the rotation needs to stop.
the rotation needs to repeat when the mouse is held down.

2

Hi @Jacob_Mcbride! If I understand you correctly you can use something like below.

Mouse.prototype.initialize = function() {
    this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onMouseDown, this);
    this.app.mouse.on(pc.EVENT_MOUSEUP, this.onMouseUp, this);
};

Mouse.prototype.onMouseDown = function (event) {
    if (event.button === pc.MOUSEBUTTON_LEFT) {
        this.entity.setLocalEulerAngles(0, 17, 0);
    }
};

Mouse.prototype.onMouseUp = function (event) {
    this.entity.setLocalEulerAngles(0, -17, 0);
};

Unfortunately, it requires a lot more script work to repeat the action when the mouse is held.

2 Likes
3

Wait, but I need it to glide from -17 to 17 and repeat while the mouse is down. When the mouse is up, stop.

4

The easiest is to use a tween for that.

https://developer.playcanvas.com/en/tutorials/tweening/

1 Like
5

well can you please give me the full script the one you gave me did not work.

6

here is the editor maybe you could help me there?

7

It works if you use it the right way. It’s a sample how you can achieve something. Did you already checked the tween tutorial page?

1 Like
8

no, can you use the tween? I do not want a lot of playcanvas on my history for storage reasons.

9

It’s not working because you have to replace Mouse with PlayerAttack. (If I create an example for someone, I don’t know the actual script name so I have to use a temporary script name).

image

I will see If I can create a sample script for you.

I think free users have enough storage to do regular things like this.

10

I should but my chromebook is horrible, and thanks SO much.

11

Can you make it were the attack tween loops while the mouse is down, then when it is up can you make the hands y rotation go back to 0?

12

I think this works perfect. I wouldn’t allow the player to hold down the mouse button so that the player has to put in a little effort as well.

chrome_gtXQ2261GK

2 Likes
13

Can you make the player’s hands move a bit smother? I also need the hands to go back to y-axis rotation 0 so that the player does not look sideways all the time.

1 Like
14

Here you go.

chrome_dk9aAk4RsO

var PlayerAttack = pc.createScript('playerAttack');

PlayerAttack.prototype.initialize = function() {
    this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onMouseDown, this);
    this.app.mouse.on(pc.EVENT_MOUSEUP, this.onMouseUp, this);

    this.attackActive = false;
    this.tweenActive = false;
};

PlayerAttack.prototype.onMouseDown = function (event) {
    if (event.button === pc.MOUSEBUTTON_LEFT) {
        this.attackActive = true;
    }
};

PlayerAttack.prototype.onMouseUp = function (event) {
    this.attackActive = false;
};

PlayerAttack.prototype.update = function (dt) {
    if (this.attackActive) {
        if (!this.tweenActive) {
            this.tweenActive = true;
            this.entity.tween(this.entity.getLocalEulerAngles())
            .rotate(new pc.Vec3(0, 17, 0), 0.5, pc.Linear)
            .on('complete', function () {
                this.entity.tween(this.entity.getLocalEulerAngles())
                .rotate(new pc.Vec3(0, -17, 0), 0.5, pc.Linear)
                .on('complete', function () {
                    this.tweenActive = false;
                }.bind(this)).start();
            }.bind(this)).start();
        }
    }
    else {
        if (!this.tweenActive && this.entity.getEulerAngles().y != 0) {
            this.tweenActive = true;
            this.entity.tween(this.entity.getLocalEulerAngles())
            .rotate(new pc.Vec3(0, 0, 0), 0.5, pc.Linear)
            .on('complete', function () {
                this.tweenActive = false;
            }.bind(this)).start();
        }
    }
};

To make the code work you need to import tween.js from GitHub into your project.

1 Like