I’d like to have a control that works like a slider, but in 3 directions: up, bottom left, and bottom right. So the knob would be at the center, and could move in either 3 of the following directions:
Some extra details: it’s for a mobile only game (using touch screen), and the knob would return to the center once the player lets go.
Now I can think of a couple ways to build this, but I’m having doubts as to what would be the most elegant solution. I thought about using 3 separate sliders, and then using a script to bind them together. Another idea would be to extend UI.slider or UI.selectable and build a custom control, which would be elegant code-wise, but I’m not sure if this would work for UI. Finally, I guess I could dismiss UI altogether and just use a 2d sprite of a knob that moves on a 2d sprite of the multi-direction slider.
So… thoughts?
To be honest, none of the ideas I had seem particularly elegant, so a totally different idea for a solution would be most welcome!
Drawing some inspiration from the Slider implementation I would probably look into IBeginDragHandler and IDragHandler.
When the user touches down on the center of the control (within a certain threshold radius) you set a dragStartPos variable. After that you could use OnDrag(PointerEventData ped) to check the most prominent direction ((dragStartPos - ped.position).normalized) and then either slide the knob in that direction by the dragged distance*, or lock it into place if the dragged distance is bigger than a certain threshold.
At a glance, this seems like the most straight-forward and elegant solution to me. I would at least not inherit from an existing UI control (interfaces and higher level classes like Selectable are fine), as this constitutes an entirely new control type.
Just my $0.02, good luck!
EDIT: *It might actually feel nicer to drag the knob until it is aligned with the touch position. I.e.: if the drag direction is south-east with the drag happening in the trisection between the north and south-east axis, and the drag position’s x value is 0.6, drag the knob until the knob’s position’s x value is also 0.6.
Thank you, Senshi!
I ended up using an invisible button with a custom script attached to it for detecting taps/drags, so the scripting part was very easy. I had some trouble with the visual part, but in the end I managed to create some RectTransforms, and add an image with sprite to them, in order to create the 3D slider with knob.
Thanks again
The classic 3 point slider is a triangle. The ‘knob’ is free to be moved anywhere inside the triangle. The proximity to each corner indicates the strength of each point.
