SFML community forums

Help => Graphics => Topic started by: Jan666 on June 18, 2022, 12:37:12 pm

Title: Touch joystick border radius
Post by: Jan666 on June 18, 2022, 12:37:12 pm

Hello,
I wanna create a touch controller, a small circle i can move around with a finger inside a bigger circle. But i have no idea, how i set a  border radius, that the smaller circle still movable just inside it, any help?

Title: Re: Touch joystick border radius
Post by: Jan666 on June 20, 2022, 02:10:21 pm

Can samone give me an advise

                sf::Vector2i currPos = sf::Touch::getPosition(0, window);
                        sf::Vector2f mapPos = window.mapPixelToCoords(currPos);
                       
float distance = sqrt((circIn.getPosition().x * circIn.getPosition().x) + (circIn.getPosition().y * circIn.getPosition().y));



angle = atan2(circIn.getPosition().x, circIn.getPosition().y);


angle = angle * 180 / 3.141592654f;
 



plr = circIn.getGlobalBounds();

if(plr.contains(mapPos)){

sf::Vector2i touch = sf::Touch::getPosition(0, window);


touch.x = Origin.x + 150 * cos(angle);
touch.y = Origin.y + 150 * sin(angle);
circIn.setPosition(touch.x , touch.y);
 

It doenst work anyway

Title: Re: Touch joystick border radius
Post by: eXpl0it3r on June 20, 2022, 03:59:20 pm

Are you on Android or iOS?

sf::Touch isn't implemented for other OSs right now.
If you have a Joystick controller, you'll need to use the Joystick API instead

Title: Re: Touch joystick border radius
Post by: Jan666 on June 20, 2022, 04:08:03 pm

I have android, i wanna build the touch controll by myself just with a circle, but iam not fit in math, sin, cos etc. I just need to know how i can rotate/ move a circle in a radius

Title: Re: Touch joystick border radius
Post by: eXpl0it3r on June 20, 2022, 04:25:28 pm

You take the center of the circle and the center of the joystick position and subtract the two positions, then you can calculate the distance (= sqrt((a - b)^2)) and if that gets too large, you stop moving the circle, or rather you need to move it to the minimum distance from the center.

Title: Re: Touch joystick border radius
Post by: Jan666 on June 20, 2022, 11:22:48 pm

Yes i know the theory but i cant get fix it with the code, but thsnks for your reply

Title: Re: Touch joystick border radius
Post by: Jan666 on June 22, 2022, 12:04:52 am

Okay i got it, can you give me an advise how to stop the joytsick circle when it reach the distance?

if(plr.contains(mapPos)){

diff.x =circOutRectPos.x - circIn.getPosition().x;
diff.y =circOutRectPos.y - circIn.getPosition().y;
distance = sqrt(diff.x * diff.x + diff.y * diff.y);

circIn.setPosition(circIn.getPosition().x, mapPos.x);
circIn.setPosition(circIn.getPosition().y, mapPos.y);

 if(distance < 175)
????????
 

How i can stop the circIn (Circle for touch ), it should slidly move along the radius border (distance),

Title: Re: Touch joystick border radius
Post by: fallahn on June 22, 2022, 10:40:21 am

Regular circle-circle collision detection will work (there are plenty of tutorials out there), but instead of making sure the minimum distance between centres is always >= the sum of the radii, you make sure the *maximum* distance is <= large radius minus the small radius

Title: Re: Touch joystick border radius
Post by: Jan666 on June 22, 2022, 12:29:21 pm

I dont understand, can you explain it in a code example ?

Title: Re: Touch joystick border radius
Post by: Hapax on June 23, 2022, 10:30:29 pm

Another option is to instead use a polar vector (or a polar form of one). This defines a vector by angle/direction and length rather than horizontal and vertical distances.

e.g.

• Take the vector (you can still use SFML's Vector2f here) from the centre of the "range" circle to the current location of the "touch" point (by taking the difference: touchPoint - rangeCircle)
• Then, convert that vector to its polar form, giving you a direction and length.
• Clamp the maximum length i.e. if the length is greater than the maximum allowed length, set it to that maximum length.
• Then, convert the vector back from its polar form.

This approach will allow you to drag past the outer circle's border and continue dragging around the outside and the inner circle will keep updating, always pointing towards where the finger is but clamped by the range.

You need to know a little maths for this. Try this wiki: Polar coordinates (https://en.wikipedia.org/wiki/Polar_coordinate_system)

If you want to see some code converting to and from polar co-ordinates - or just use these vectors to do it for you - see my library, Plinth's, Vector class implementation (https://github.com/Hapaxia/Plinth/blob/master/Plinth/Vector2.inl).