So, I came across a UX problem in my game and after a lot of research I found I way to fix it but have no idea on how to do it. I have been trying to use the Scroll-Snap element (which basically is a scroll rect that locks in place when you scroll, link below) but it does not work in my case.
There are basically two things that you need to understand about the concept:
It is a vertical list that can have up to 20-30 items
When I release the finger, the element which is focused must activate something in my game
That being said, suppose that I am in item number 1 in my list and need to scroll all the way to item 25. There is no way of doing it without having to scroll a little bit, releasing the finger (because it reached the end of the device screen), and repeating this process over and over again until item 25 is reached and activating things that are not supposed to be activated in the meantime.
The solution I found was within an app called WRLD. It has a very intelligent mecanism, shown below.
[First Image][1]
[Second Image][2]
So, it is the same concept as I described above, but when it is reaching the top limit of the scroll (Image 1), it starts to readjust, showing the other levels that you can choose from (image 2).
Does anyone have any idea on how to simulate that behaviour?
I would appreciate any suggestions, because I am struggling with this solution.
I think that’s a custom control… I believe it would not be too hard to implement yourself.
The simple non-custom UI parts I see you need are:
the long container that is much longer than the view window
the view window (so far these things are just what a ScrollRect gives you)
another thumb control that moves up and down freely (the only thing that accepts input)
The only custom part I see is that based on the position of #3 above you would need to slide the position of #1 within its viewport. The .rect field of the RectTransform of each of those objects should tell you everything you need to do to get the math done right. I mean it’s work but you just gotta diagram it out on paper and understand the ratios of motion.
For your case it sounds like you want the scrolling to sorta “bubble” along, semi-snapping to each valid stop so that when you release your finger it is clear which one you’re on, so that’s just a simple scroll-detenting mechanism. I would defer work on the detent until you get the scrolling proportional correct.
Yes! your assumption in the end is correct. What would a simple scroll-detenting mecanism be? I did not follow what you mean there.
I liked a lot your suggestions and already am thinking about it. If you or anyone else have some insights that could help with the ratios of motions I am open to suggestions/additions!
To handle the input (#3) would you use a Slider, Scrollbar or something else?
Good question… I’ve not made finger-touchy sliding controls using the Unity family of UI objects: I’ve only rolled my own out of the old legacy system
I would begin by investigating what is involved in those systems, because they live in the UnityEngine.UI space, so they benefit from all of that, like they can be occluded, etc.
They are all open source on github: hit google for the precise link but you can learn a lot there.
I haven’t done one of those since the Nintendo Wii day but I’ve used a few that others wrote in Unity. Basically what you want to do is:
separate the presentation of the scrolling from the logical location of it.
to drive the presentations position each frame:
----------- the presentation keeps a persistent notion of where it is
----------- it computes a desired notion of where it wants to be from the logical location bar
----------- it forces the desired position to only be 0, 1, 2, 3, etc. (integer gaps of some size)
----------- every frame it slides the presentation slowly towards the desired value
This way as you move the logical marker slowly from n to n+1, at some point it will become n+1 and the presentation will suddenly “snap over” to that next point, and back of course.
Kurt, I am sorry to keep making questions, but I am kind of new to unity and don’t understand some things yet. I didn’t understand what you mean in these paragraphs, could you elaborate, please?
Yes, I was thinking about the same thing. I am going to be spending a lot of time with this element. By working on it I realised that it won’t be so easy to figure out exactly how to adapt the Unity family of UI objects.
I agree, it is a very complex structure of UI objects.
The main ones you’re going to want is the RectTransform. That’s sorta the be-all end-all master positioning object.
I recommend backing off your immediate problem and stepping back to do some experiments.
Make a new Scene with a simple UI with a slider on it.
Make a script that accepts that Slider as a public field and then uses that to get the RectTransform off it.
Also get the RectTransform off the base Canvas of your UI.
Now that you have those two RectTransform objects, put in your Update() loop something that prints the .rect property out from each RectTransform.
You could also dump that information to a Text object onscreen so you can do it “live” on one screen without referring to the console log in another window. Up to you.
That will very quickly begin to show you what you’re dealing with numerically, as well as give you insight into how to reason about the actual original slider input problem you have.
