Joystick- like Movement

Guys, i been working on a platformer game for android, currently having some problem for the movement controls. I want to be able to move the character smoothly left or right without releasing the touch on screen. How do i achieve something like this? Currently i am using 2 buttons and event of checking if cursor on sprite, then simulate movement to left and right. But when i want to move from left button(sprite) to right button(sprite), the movement stopped and i have to retouch the screen again to be able to move to other direction.

Just want to know how to do like as long as i am touching on the screen on phone, i will be able to move left or right without releasing the touch by just dragging my finger around with just 1 button(sprite) on screen?

I thought we have an example for that :confused:
Anyway I have just created one, you can find it at the bottom of the list:

The idea is, instead of moving the character on button press, get a center point and compare the position of touch to the center point. If the position of the touch is greater than the position of the center point move right if less move left.

hmm, first of all, thanks alot for your reply ddabrahim! Regarding the center point really is what need :slight_smile: but is it possible to achieve like the button move to right or left whenever touch is on the movement button?. What i mean is we have a big circle, inside theres a round button, so whenever finger touch, when comparing distance from center, the round button moves but still stay inside the circle.

Actually it doesn’t necessary to control character with a button movement.
Pick a base sprite, either an invisible or the circle for example.
Pick the center point of this base and move the character by taking in to account the position of the touch compared to the center position of this base as I explained.
End then, only as a visual effect, add the button and make it move left and right based on how much the user move the pointer left and right by taking in to account the distance between the center point of the base and the position of the touch.
So for example if the touch is 40 pixels from the center, move the button 40 pixels to the right but obviously use a variable that constantly store the current distance then apply It on the button…

You also want to implement some sort of limit too so the player can not drag the button all over the screen and stop at the edge of the circle for example.

I don’t have time right now to update the example if no one else come up with an example for you I’ll do it when I have time later.

Okay, thanks alot !! If possible, could you show me the example for the moving button when you free? It would be such a great help for me.

Updated the example. It has a proper joystick that move around with your thumb. It is also multy touch enabled so you can move and jump the same time. I have also tested on mobile and works nicely.
The joystick is hard coded for now, if you want to change the position of the joystick on the screen you also need to change the X and Y values in the events accordingly.

The Joystick could use some polish, but I hope it helps to get the basic idea how to implement one :slight_smile:

Thanks a lot! I think on mobile should be no issue :smiley: You had been a great help!

Guys, I tried to follow the example, and it works but after i open the gdevelop second time, it appears to be some problems with the control, wondering if this is a bug. Check the command below:

so if the touch location is > than the centre of joystickbgm, it should move right for player, but no matter where i touch, it will move left. Is there anything wrong with these code?

If it moves left, that means for some reason it returns 0 and so the touch always less <
Not sure what is going on, you say it did work the first time right?

If touch < center = left
if touch > center = right

Sounds good to me :confused:

I’ll have a look when I got some time if no one else figure out.

I noticed you are using a different object name called JoyStickBgm. In my example it called ButtonBg.
Just tried it and it still works on my end.
Download the example form itch again if you can’t fix it on your end :slight_smile:

Yes, it did work for first time, after that it becomes like that. always returning the position of touch < center of button background.

So i wondered and try to test on the example you made on mobile, it works exactly like this also. Always moving left when you click anywhere on button background. But weirdly if i preview on laptop, it works for your example. Although i copy the exact same code from yours, mine returns the same result, always going to the left

It works for me :confused:
Do you change anything at all? You name the object differently that’s for sure. As I mentioned I call it ButtonBg, on your screenshot I see JoyStickBgm.

I honestly don’t know. The example I made works on all my touch devices, if it works at first and then it doesn’t it must be something on your end but I have no idea what.

Could you upload the project so I can have look and compare to my project?

Maybe you are using an old version, I have updated like 3-4 times.
Download it again to make sure you got the latest.

There you go, i uploaded the file, i still could not figure out what happen, whether it is a bug or my side problem

You are checking the position of the touch on the base layer but the ArrowButtonsBg is on the “GUI” layer.
So make sure you check position of the touch on the GUI layer.

I was forget to mention this in the example, I’ll update the example with a comment mentioning this.

hmm yeah, but even if i change the layer of button to base layer, it still gives me the same result, always moving the character to the left side even if the touch is > than centre of button.

You don’t want the button to be on the base layer, because then if the character move to the right, you leave the button behind as you move the camera on the layer to follow the player.
You want to check touch on the GUI layer and keep the button on the GUI layer.

It works for me. It is maybe your device then.
All I do and did again just to be sure,

  1. unzip the archive you have uploaded.
  2. open the project in GD5
  3. in BOTH conditions to check position of touch, change layer to “GUI”
  4. save and export

Done. It works on my side on my touch devices :confused:

If you mean it doesn’t work with the mouse on PC that is because you are checking position of the touch and not the mouse.

If you are testing this on a Windows tablet maybe the multi touch events does not work on Windows? Could anyone confirm this with a Windows touch device please?

If you are testing this in the browser on an android or ios device, you may need to hard refresh the browser to make sure the game update in the cache.

In case you are exporting to APK and install on your device then I have no idea why it doesn’t work for you, hope someone can figure this out.
I would be curious what is going on, on your end :neutral_face:

hmm, ok let me try one more time on exporting the whole apk to an android phone and see if this problem still exist. It is very weird that it only works on your side and i have about 3 smart phone (both android and iphone), all of them gives me the same result, means that whenever i touch the button, whatever location it always return value < than the centre of the button, thus always walking to the left side.

Yeah it is weird. Would be nice if a 3rd party could confirm if it doesn’t work. Since it works for me I can’t figure out what the problem is. :frowning:


I’m glad to join the forum :slight_smile:
The solution works. If not used a multitouch. If you first touch the screen elsewhere after that, the second touch is not treated separately. The JoysticktouchID alwways 0. Now I’m making an 360° analog joystick control and I couldn’t fix this error. That’s why I use draggable object behavior. And it works like a dream. I’ll try to upload the working version to the forum in 1-2 days. :smiley:
Sorry for my bad English. :wink: