Virtual JoyStick getting a degrees

Hello guys, i need to know how to get current angle of my virtual joystick out of this code so i can apply rotation on my player character, here is the code using dragHelper

Hi @smokys,

What kind of input values your joystick returns? If it’s for example in the range of -1 to 1, you could multiple it by 180 for example to get rotational values from -180 to 180 on a single axes.

1 Like

Hello, thank you for answer.
Yes, it returns numbers you mentioned. So we get rotation angle by multiplying the number by 180? In both axis?

To clarify, what do you mean by rotation angle?

The virtual joystick returns two input numbers on two axis from -1 to 1. It’s up to you how to interpret it, as a position offset or as a translation angle and then use it on an entity.

1 Like


Here is console output, joystick returns 2 axis which is X and Y (x: -3 , y: 125) : but its also -1 and 125, 125 is the maximum number, when i change direction it is 125 and -1

By ‘rotation angle’ i mean Y axis rotation of the character, but what i need is the current rotation of the joystick draggable circle which I can then apply to the character

The joystick doesn’t have the notion of rotation, it provides you with input values. If you would like to get the direction vector of the joystick in relation to the center point of it you can do this:

var direction = new pc.Vec2(lastInputX, lastInputY);

Now if you would like to translate that direction to a 0 - 360 range angle to use in your game then do something like this:

var angle = (Math.PI + Math.atan2(-direction.x, direction.y)) * 180 / Math.PI;

Great! It shows degrees now, thank you.

Anyway, i created event which changes Y rotation of character,


and then fired it,


But the character is not rotating at all, i tried to console out the angle variable, it nicely shows deegre from 0 to 360.
However, i tried to console.log(this.entity.getLocalEulerAngles().y); in where im received different number than in angle variable

Your code seems correct, not sure why your event isn’t fired or received. Do you use events in other places? Do those work?

By the way no need to create a new pc.Vec3 just to set the angle, do this directly:

context.entity.setLocalEulerAngles(0, yaxis, 0);

Yes, Ive seen the docs little ago and changed it :slight_smile: No, this is my first event in this project. I tried to change a code a little bit and put the rotation in the Upate function instead of using event.

There are variable called force x and force y, those also use joystick directions to move, so i used them in declaring your angle variable to calculate degrees.

The result was kinda strange, when i tried to move my character he didnt rotate, however when i stopped using joystick then after few seconds he is being rotated to the good direction, but whenever i touch joystick his rotation is being reseted and then set back to its starting rotation.

I think this last part is because position of joystick resets when player start to drag draggable circle and as we are calculating rotation from the updated numbers then this is the result.

The reason for this behavior is because you are trying to set the angle of an entity that has a dynamic rigid body. You can’t do that since the position and rotation of that entity is fully controlled by the physics simulation. That’s why it kinda works when you stop moving the player.

You have to options the way I see it:

  1. Instead of using the angle to rotate the player entity, try to use the joystick input in your Move() method to get the physics sim to rotate the player (it may be hard if you aren’t strong in vector math).

  2. Add the player model as a child to the rigid body entity, and rotate that child entity instead.


Oh you are right! I totally forgot. And what if I used angular velocity instead?

Yes, you can do that, that’s what I meant on point 1.

Somehow try to either calculate a rotation force (torque) or an angular velocity (more precise).

Isnt there something for object with Dynamic rigidbody for setting the angle? something like setLocalEulerAngles() ?

EDIT: I have in the code linearVelocity.set(… - which works fine, why angularVelocity does not work? :thinking:

EDIT2: Would tween rotation work with dynamic rigidbody ? Answer: yes it will, although its not good way how to rotate dynamic rigidbody :smiley:

EDIT3: I wonder when i create new parent of my character and set his rigidbody to kinematic and then rotate it with eulerangles :thinking: , would that work ? (Tested, when rigidbody was set to dynamic it didnt work, once i changed to kinematic it worked, so it seem that when there is a child with dynamic rigidbody then its not working)

A dynamic rigidbody will be handled by the physics engine, which will make sure it follows the Newton’s laws of motion. Which basically means that the only proper way to move it is to apply some forces on it. There is a teleport method that allows to work around it, but teleporting is not suitable for motions and will cause collision issues if used as such. If you want to control the rigidbody by setting its position manually, then it must be set as kinematic. In this case gravity will not be applied on it, and it will have an infinite mass, so other dynamic bodies will collide with it as if they are colliding with a wall. You become in control of where the object should be and its rotations at each frame.

1 Like

Yes when i tried to make it with kinematic rigidbody there was no problem with rotating bacause i used setEulerAngles, but there is no such fuction for dynamic rigidbodies, and there has to be other way than just using teleport which has impact on performance and plus as you mentioned , collision problems… :confused: there is other way to use kinematic rigidbody and simulate gravity, but there will still be problem with walking on high grounds and so, i cant believe that play canvas team didnt count with implementing manual rotation for dynamic rigidbodies, its default thing but yet its too hard to achieve that.

I also tried to use applyTorque and when the angle of player was higher than calculated angle then stop rotation, but i could not figure out some things so it didnt work

I also noticed this project :

It uses teleport to rotate player, so i think this is the only way.

EDIT: no need to ready, i found out that it is because of camera as it uses camera entity to move, could you please help me to change it so it takes players as entity.

I did try to replace .camera to .entity (this.entity.forward) and .right as well but it screwed the movement more.
link to editor:
here is a code: image

@LeXXik, hello i used teleport to rotate player. Had to increase Angle by 180 to have good rotation, dunno why. Anyway, im in strange situation

when i try to move forward, the rotation is good, but there is something wrong with the player direction, he is not going straight but it looks like he is taking him a little away the forward direction, ive drawn a trajectory of the player. And when im going backward then he goes on the lower trajectory. When i try to walk in these directions:
-> \ /
-> / \
blique movement, these are fine