We take so much for granted from our UIs... I didn't even realize I'd need scrollbars! I keep going back and forth thinking whether rolling my own UI system was a good idea, but seeing how I was able to a add scrollbar container in about an hour, I'm on team "good idea" today!
The biggest ux hurdle here was making sure this is both keyboard navigable and mouse navigable and to make no compromises on either of the navigation modes. For mouse mode, that means being able to use the scrollbar and hovering widgets freely, and for keyboard it means the scrollbar should follow the focused element so that you always see what you're selecting.
Coming up with a system to handle both was easy once I gave this some proper thought and made everything click. My UI interaction "manager" thing already keeps track of the current interaction mode, so we know whether we're on key mode (keyboard or gamepad) or pointer (i.e. mouse) mode. There are some actions that let you switch between the two.
The interesting challenge was in keyboard mode, where I had to detect if the currently focused element changed. I added a "justFocused " property just for that which gives me the UiRect and sense id for the widget that was focused. If the sense id for the widget is one that is inside the scrollbar container and the rectangle is inside thethe visible range, we adjust the scroll position doing some math. One thing I kept struggling with is how do I know what widgets are inside the scrollbar container. That is achieved with code that looks like this inside the scrollbar's draw code:
Code: Select all
uiInteraction.BeginRecording("some-unique-key");
foreach (var child in children) {
child.Draw(...);
}
var childInScrollbar = uiInteraction.EndRecording("some-unique-key");
One day I should write about my UI system in a more comprehensive way. Not sure if that made any sense
Anyway that's all for today!
Attachments
scrollbars.gif (1189.88 KiB)
We take so much for granted from our UIs... I didn't even realize I'd need scrollbars! I keep going back and forth thinking whether rolling my own UI system was a good idea, but seeing how I was able to a add scrollbar container in about an hour, I'm on team "good idea" today!
The biggest ux hurdle here was making sure this is both keyboard navigable and mouse navigable and to make no compromises on either of the navigation modes. For mouse mode, that means being able to use the scrollbar and hovering widgets freely, and for keyboard it means the scrollbar should follow the focused element so that you always see what you're selecting.
Coming up with a system to handle both was easy once I gave this some proper thought and made everything click. My UI interaction "manager" thing already keeps track of the current interaction mode, so we know whether we're on key mode (keyboard or gamepad) or pointer (i.e. mouse) mode. There are some actions that let you switch between the two.
The interesting challenge was in keyboard mode, where I had to detect if the currently focused element changed. I added a "justFocused " property just for that which gives me the UiRect and sense id for the widget that was focused. If the sense id for the widget is one that is inside the scrollbar container and the rectangle is inside thethe visible range, we adjust the scroll position doing some math. One thing I kept struggling with is how do I know what widgets are inside the scrollbar container. That is achieved with code that looks like this inside the scrollbar's draw code:
Code: Select all
uiInteraction.BeginRecording("some-unique-key");
foreach (var child in children) {
child.Draw(...);
}
var childInScrollbar = uiInteraction.EndRecording("some-unique-key");
One day I should write about my UI system in a more comprehensive way. Not sure if that made any sense
Anyway that's all for today!
Attachments
scrollbars.gif (1189.88 KiB)