Narendra786 Posted January 25, 2021 Share Posted January 25, 2021 Hello, 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 More sharing options...
ZachSaucier Posted January 25, 2021 Share Posted January 25, 2021 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. 1 Link to comment Share on other sites More sharing options...
Narendra786 Posted January 26, 2021 Author Share Posted January 26, 2021 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 More sharing options...
ZachSaucier Posted January 26, 2021 Share Posted January 26, 2021 I understand. But you'll have to implement that sort of logic to create this effect. Link to comment Share on other sites More sharing options...
Narendra786 Posted January 27, 2021 Author Share Posted January 27, 2021 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 27, 2021 Share Posted January 27, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now