0
\$\begingroup\$

I found this script on a tutorial that I want to implement into my game, but I first want to understand what it does and how it does it. The script is attached to a Joystick UI, which has the inner ring/button of the joystick as its child. The script makes the inner button of the joystick move within a certain confine, when the player uses the joystick. "joystickButton" is the child object.

public class Joystick : MonoBehaviour, IDragHandler, IPointerUpHandler, IPointerDownHandler
{

public Image joystickButton;

public Vector3 inputDirection;

void Start()
{
    inputDirection = Vector3.zero;
}

public void OnDrag(PointerEventData drag)
{
    Vector2 position = Vector2.zero;

    RectTransformUtility.ScreenPointToLocalPointInRectangle (joystickButton.rectTransform, drag.position, drag.pressEventCamera, out position);

    position.x = (position.x / joystickButton.rectTransform.sizeDelta.x);
    position.y = (position.y / joystickButton.rectTransform.sizeDelta.y);

    float x = position.x * 2;
    float y = position.y * 2;

    inputDirection = new Vector3(x, y, 0);
    inputDirection = (inputDirection.magnitude > 1) ? inputDirection.normalized : inputDirection;

    joystickButton.rectTransform.anchoredPosition = new Vector3(inputDirection.x * (joystickButton.rectTransform.sizeDelta.x / 3), inputDirection.y * (joystickButton.rectTransform.sizeDelta.y) / 3);
}

public void OnPointerDown(PointerEventData drag)
{

    OnDrag(drag);
}

public void OnPointerUp(PointerEventData release)
{

    inputDirection = Vector3.zero;
    joystickButton.rectTransform.anchoredPosition = Vector3.zero;
}

}

I did some research and some tests, and from what I understand, if I tap a point within the Joystick UI's RectTransform, the point I tap, "drag", gets converted to a position in the RectTransform of joystickButton. The position is then converted to a vector, inputDirection, which represents the direction and location of my tap. The vector is then normalized, and the joystickButton is moved to

(inputDirection.x * (joystickButton.rectTransform.sizeDelta.x / 3), inputDirection.y * (joystickButton.rectTransform.sizeDelta.y) / 3),

where the vector is pointing to the direction of my tap, and has a magnitude that is 1/3 the length of the side of joystickButton's RectTransform, since all the anchors are centered, and the RectTransform is a square.

What I don't get is why I need these lines:

RectTransformUtility.ScreenPointToLocalPointInRectangle (joystickButton.rectTransform, drag.position, drag.pressEventCamera, out position);

and

float x = position.x * 2;
float y = position.y * 2;

Is there any purpose to these lines?

Converting the 1st one to

position = drag.position

and the 2nd one to

float x = position.x;
float y = position.y;

doesn't seem to mess anything up.

Also, I didn't notice at first, but not dividing on by sizeDelta on these lines

position.x = (position.x / joystickButton.rectTransform.sizeDelta.x);
position.y = (position.y / joystickButton.rectTransform.sizeDelta.y);

does change the result slightly, so if anyone can tell me what function dividing the values does, it would be greatly appreciated.

\$\endgroup\$
3
  • \$\begingroup\$ To elaborate a little, the joystick I am talking about is like the ones you see on mobile games, where there is a "outer ring", and an "inner ring", and dragging the joystick around makes the inner ring move within the confines of the outer ring. \$\endgroup\$
    – KI.
    Nov 25, 2020 at 3:47
  • 1
    \$\begingroup\$ If you delete the declaration of x and y, then the next line inputDirection = new Vector3(x, y, 0); will throw a compiler error since it's referencing undefined variables. So I assume you made more changes than simply deleting these lines? \$\endgroup\$
    – DMGregory
    Nov 25, 2020 at 3:52
  • \$\begingroup\$ Hint: try this on different window/screen sizes, or in canvases with different scaling modes set. \$\endgroup\$
    – DMGregory
    Nov 25, 2020 at 4:56

0

You must log in to answer this question.

Browse other questions tagged .