#Joystick Explanation

1 messages · Page 1 of 1 (latest)

feral moat
#

lets do a thread here

sick ruin
#

ok thank you

feral moat
#

So, your joystick on your UI is the same as a controller joystick, you know those right?

sick ruin
#

yea

#

on the left

#

do you want a video of the joystick?

feral moat
#

nah, just trying to clarify

sick ruin
#

ok

feral moat
#

Okay, so that white thing is your background. Imagine this white circle as the bounds you clamp your range to, the user can drag the thumbstick graphic. YOu got that, right?

sick ruin
#

so the white circle is the limit for the red aiming thing

feral moat
#

yes

sick ruin
#

ok understood 😄

feral moat
#

It does not matter if its a circle or what not, but your background.sizeDelta is the size of the RectTransform component on that gameobject. You can see that in your inspector,r ight?

sick ruin
#

yes your right so the size delta is the size of the white circle and were dividing it by 2 becouse the rect Transform is appearing bigger than the circle?

feral moat
#

and because we want to start from center. Imagine starting from center but clamping at full size, then the red thumbstick would go out for the 2nd half of the size, right?

sick ruin
#

yessss ur right we dont want that

#

then it would look weird

#

we only want the red thumbstick to stay in the white circle

#

so the white square is the range for the red thumbstick?

Screenshot_2023-03-28_171310.png
feral moat
# 
[SerializeField] RectTransform ThumbStickTransform;
    [SerializeField] RectTransform backgroundTransform;
    [SerializeField] RectTransform centerTransform;
    public void OnDrag(PointerEventData eventData)
    {
        Vector2 touchPos = eventData.position;
        Vector2 centerPos = backgroundTransform.position;

        Vector2 localOffset = Vector2.ClampMagnitude(touchPos - centerPos, backgroundTransform.sizeDelta.x / 2);
        ThumbStickTransform.position = centerPos + localOffset;
    }

    public void OnPointerDown(PointerEventData eventData)
    {
        backgroundTransform.position = eventData.position;
        ThumbStickTransform.position = eventData.position;
    }

    public void OnPointerUp(PointerEventData eventData)
    {
        backgroundTransform.position = centerTransform.position;
        ThumbStickTransform.position = backgroundTransform.position;
    }

Just copying this over here, so we dont lose track in the channel 😄

sick ruin
#

yess good idea 😄

feral moat
#

So, we got the line with touchPos understood. centerPos is also clear, right?Its the center of our white circle as a position we start our dragging from.

#

now to the localOffset line. do you undersatnd that?

sick ruin
#

i understand tochpos its where our thumb is dragging over becouse the event data is keeping track of the event which is triggerd. The local offset i havent understood

#

why (touchPos - centerPos)

#

thats the only thing i havent understood

feral moat
#

ah okay 🙂

#

If you would touchPos only, your position would be relative to the screen bottom left (0,0)

#

So imagine, your backgtround sizeDelta is 100, so you would have a clamped radius of 50. So if you touch your screen at lets say 500,500 , it would clamp that back to 50 and your thumbstick would always be on the bottom left of your screen

#

because it clamps the thumbstick to 0-50 instead of 0-50 AND the centerPos taken into account

sick ruin
#

yes but what does that have to do with - centerPos?

feral moat
#

Let me draw something 😄

sick ruin
#

ok (:

feral moat
#

So the localOffset is equal to the substract of touch and center, you get that?

#

But if you remove the center of the calculation, you just take the 0,0 as center and therefore the dotted circle would be your clamped area always

sick ruin
#

AHHHHHH

feral moat
#

Sorry for my handwriting, had to do it quick cause pen was empty 😄

sick ruin
#

broooo thanl you so much

feral moat
#

You are very welcome 🙂

sick ruin
#

but why are we adding center again in the ThumbStichTrasform.position

feral moat
#

Because we want the joystick to appear at the position we start touching, right?

sick ruin
#

what

feral moat
#

Oh wait, you mean the ThumbStickTransform, because we need to set this world position also with the centerpos into account

#

the local offset is just the offset within the range of centerPos + ourclamped radius. So if we want to show the thumstick image at the right place, we need to first take the center pos and then add our localOffset

sick ruin
#

i dont underdstand

#

AHHHHHHh

#

ok bro thank you so much you really helped me

#

appreciate it!

#

😄

feral moat
#

I hope it got a bit clearer. One tip, if you want toudnersatnd code, just modify it, see what happens, play around with it 🙂

sick ruin
#

Ok thank you

feral moat
#

Happy coding 🙂 I am out of this thread now and afk for a bit. see you next time

sick ruin
#

Thank you 😄

sick ruin
#

what do you mean by : offset without - center (not local offset)

feral moat