How to add joystick in Unity UI Toolkit

[Mohak_dev]

So I recently made a switch to UI Toolkit but I am unable to figure out how would I go about making a joystick in UI Toolkit. Before I just used this joystick asset

Joystick Pack | Input Management | Unity Asset Store

If anyone knows any asset which works for UI Toolkit or how to go about making one yourself please help me out.

[ZeroKuru]

Hi there @Mohak_dev , did you manage to get this figured out? I’m contemplating making the switch to UI Toolkit myself for our upcoming mobile game since it’s a lot better than the classic Canvas system because it can scale much better to fit different screens and such.

I’d love to make a joystick myself and I haven’t found much info online yet.

Looking forward to hearing from you!

[uBenoitA]

Hi Mohak_dev,

I suggest you joystickElement.RegisterCallback<PointerDownEvent>(OnPointerDown) on your joystick element, then in OnPointerDown(PointerDownEvent e) you call joystickElement.CapturePointer(e.pointerId). Do the same thing with PointerUpEvent but with ReleasePointer instead. Then register a callback to PointerMoveEvent where you will calculate the delta between the center of your joystick element (you can use joystickElement.worldBound.center) and the pointer position. You will probably want to check if the delta is larger than a certain maximum and if so normalize it and multiply it by the maximum distance, to keep your input within some expected bounds.

Then you do what you wanted to do with the joystick delta you extracted. You will probably want to store it in a local variable and use it in an Update loop, etc. Be sure to reset your delta to 0 in your PointerUpEvent callback, too.

I haven’t written my description in proper code but if you’re used to UI Toolkit a bit, it’s relatively standard stuff. I hope this gives you a reasonable starting point!

[erhardsc]

@Mohak_dev any luck on a solution for this?

[theunsigned]

@uBenoitA

Hi Mohak_dev,

I suggest you joystickElement.RegisterCallback<PointerDownEvent>(OnPointerDown) on your joystick element, then in OnPointerDown(PointerDownEvent e) you call joystickElement.CapturePointer(e.pointerId). Do the same thing with PointerUpEvent but with ReleasePointer instead. Then register a callback to PointerMoveEvent where you will calculate the delta between the center of your joystick element (you can use joystickElement.worldBound.center) and the pointer position. You will probably want to check if the delta is larger than a certain maximum and if so normalize it and multiply it by the maximum distance, to keep your input within some expected bounds.

Then you do what you wanted to do with the joystick delta you extracted. You will probably want to store it in a local variable and use it in an Update loop, etc. Be sure to reset your delta to 0 in your PointerUpEvent callback, too.

I haven’t written my description in proper code but if you’re used to UI Toolkit a bit, it’s relatively standard stuff. I hope this gives you a reasonable starting point!

This is great and it would be a great example for a Unity tutorial. Kindly go into detail because it seems the most efficient option is to use a hybrid UI system and that seem counterintuitive.

[uBenoitA]

Hi theunsigned. I’ve attached a small project that implements what I had explained earlier. The art is extremely crude but you should get the right working principles. About making an official tutorial out of it, it’s a good idea, I’ll mention it to some colleagues and we’ll see.

9000274–1239946–UITKVirtualJoystickSample.zip (33.4 KB)

[restush96]

@uBenoitA Have your colleagues created tutorials?