• Create Account

Banner advertising on our site currently available from just \$5!

### #ActualDonaldHays

Posted 02 July 2013 - 08:56 AM

You can get the behavior you want using basic vector math. I'll be using pseudocode in this reply because I'm not familiar with what vector types Cocos2d-x has built-in.

The idea is that your joystick can be represented as a circle, and the touch as a point that's offset from the center of that circle. If the touch is further away from the center of the circle than the radius of the circle, then clamp the touch to the edge of the circle.

// First, you have the vector that represents the center of the joystick
vec2 centerJoystick = { centerXCoordinate, centerYCoordinate };

// Then, you have the radius of the joystick

// Then you have the current touch location
vec2 touchLocation = { touchLocationX, touchLocationY };

// Then you compute the offset of the touch location from the center of the joystick
vec2 touchRelativeToJoystickCenter = Vector2Subtract(touchLocation, centerJoystick);

// Then you take the magnitude of the relative touch offset vector. That represents the distance of the touch from the center of the joystick
float magnitudeOfTouchRelativeToJoystickCenter = Vector2Magnitude(touchRelativeToJoystickCenter);

// If that magnitude is greater than the radius of the joystick, then the touch is outside the joystick, so we need to clamp it
// We clamp by multiplying the relative touch offset vector by a scalar. The vector will be clamped when its magnitude is equal to the radius of the joystick. So we want to multiply the vector by a scalar that reduced its magnitude to that of the joystick
float scalar = radiusJoystick / magnitudeOfTouchRelativeToJoystickCenter;
touchRelativeToJoystickCenter = Vector2Scale(touchRelativeToJoystickCenter, scalar);
}


And that's about all there is to it. After this code is done, the magnitude of touchRelativeToJoystickCenter will not be greater than the radius of the circle.

### #1DonaldHays

Posted 02 July 2013 - 08:53 AM

You can get the behavior you want using basic vector math. I'll be using pseudocode in this reply because I'm not familiar with what vector types Cocos2d-x has built-in.

The idea is that your joystick can be represented as a circle, and the touch as a point that's offset from the center of that circle. If the touch is further away from the center of the circle than the radius of the circle, then clamp the touch to the edge of the circle.

// First, you have the vector that represents the center of the joystick

vec2 centerJoystick = { centerXCoordinate, centerYCoordinate };

// Then, you have the radius of the joystick

// Then you have the current touch location

vec2 touchLocation = { touchLocationX, touchLocationY };

// Then you compute the offset of the touch location from the center of the joystick

vec2 touchRelativeToJoystickCenter = Vector2Subtract(touchLocation, centerJoystick);

// Then you take the magnitude of the relative touch offset vector. That represents the distance of the touch from the center of the joystick

float magnitudeOfTouchRelativeToJoystickCenter = Vector2Magnitude(touchRelativeToJoystickCenter);

// If that magnitude is greater than the radius of the joystick, then the touch is outside the joystick, so we need to clamp it

// We clamp by multiplying the relative touch offset vector by a scalar. The vector will be clamped when its magnitude is equal to the radius of the joystick. So we want to multiply the vector by a scalar that reduced its magnitude to that of the joystick

float scalar = radiusJoystick / magnitudeOfTouchRelativeToJoystickCenter;

touchRelativeToJoystickCenter = Vector2Scale(touchRelativeToJoystickCenter, scalar);

}

And that's about all there is to it. After this code is done, the magnitude of touchRelativeToJoystickCenter will not be greater than the radius of the circle.

PARTNERS