Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

How to control and move an object with a virtual joystick

Recommended Posts


I want to control a rocket image with a virtual joystick. I was able to create the joystick and rotate the rocket when the joystick is dragged (thanks to gsap's draggable plugin). However I am not able to change the rocket's position when the joystick moves.

Basically, I want to make the rocket move as long as the user drags the joystick and change direction according to the joystick. I also want to increase the rocket's speed as the circle inside the joystick moves farther, but I suppose I can do that with timeScale() method.

I tried changing rocket's position but it simply stops after some distance even though I am still moving the joystick.

Any help would be very helpful since I am stuck on this since a long time.

See the Pen bGwZOrL by Narendra786 (@Narendra786) on CodePen

Link to comment
Share on other sites

Hey Narendra786 and welcome to the GreenSock forums.


Currently every single time the onDrag function fires (which is a lot while users are dragging) you're creating a new tween that plays for its entire duration. That's not good. You should either use overwrite: 'auto' on that tween to make sure that it kills old tweens affecting the same properties of the same object or use a different approach like a more manual setting of the rotation probably using quickSetter (but you'd have to handle the easing and such yourself). 


To get the position, you will need the max distance in the x and y directions from the center point. Then you can use the current x and y along with those maxes to create a proportion. Then you can apply that proportion to your max velocity (or acceleration if you'd prefer) in the x and y directions to get a current velocity (or acceleration). Then you should apply that to your rocket.

  • Like 1
Link to comment
Share on other sites

So the overwrite:'auto' worked perfectly. However, I haven't applied any bounds to the joystick because the outer container is circular and not rectangular. So, I just added some logic to end drag if it is a particular distance from center. Hence, maxX and maxY is simply undefined.

Link to comment
Share on other sites

I understand. But you'll have to implement that sort of logic to create this effect. 

Link to comment
Share on other sites

After some research I realised that the GSAP Physics2D plugin perfectly suits my needs. So I started trying it out on codepen and everything works nicely except for the fact that I am unable to apply easing to the rocket and also the rocket stops when I stop moving the joystick but haven’t released it yet. Any help on this line would be helpful.


See the Pen bGwZOrL by Narendra786 (@Narendra786) on CodePen

Link to comment
Share on other sites

The Physics2D plugin can be useful, but I really don't think it's a good fit for this sort of situation. I outlined the approach that I would take above. What, specifically, is stopping you from following it?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.