[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.

Help with translate local
Bobbing hand motion
#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?

[SOLVED] Out and Back
#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