The introduction of the new mobile thumbstick UI by Roblox has brought some new issues for developers. About 20-25% of the lefthand side of the screen is covered by a DynamicThumbstick button UI, as displayed below. Many, if not most, games have important UI buttons on the left-hand side of the screen. The new thumbstick is overlapping my important buttons.
I can only image about 1-2 solutions to this problem.
My UI should not be on the left-hand side in the first place and should be programmed to detect mobile devices and move the UIs to the right-hand side of the screen.
Some sort of UI Z-Index property to make the UI go over the thumbstick
This is a bug?
(This is on the iPhone 6 Emulator in the studio to replicate the issue and many players have come to me saying they cannot press the buttons, who are of course mobile players.)
the red above displays the Thumbstick box where the thumb is used to drag movement. Any UIs in this box appears to be put under the thumbstick, resulting in non-clickable buttons.
On mobile, if your game uses thumbsticks, then you shouldn’t have any UI in any of the bottom corners. You’ll have to either code your buttons to move to a different position (and size, because they’re pretty small), or move their default positions somewhere else. It’s definitely not a bug, because the same issue would apply for any mobile game that has thumbsticks.
I’d suggest taking a look at the RDC talk on designing UI across platforms for some better insight on how to design for mobile:
There’s one problem with your solution. In my perspective, UI should be the same and built to work for every device. Creating a custom UI for individual devices is a waste of time, and checks like TouchEnabled also return touch screen computers. If I move the UI in accordance to the device, some computers with touchscreen will have that nasty mobile UI, not preferred by computer users.
So, do I just move the buttons a bit upward so that it moves a little out of the thumbstick zone, yet still be clickable? I believe this is the correct option, but I just want to verify with your opinion.
(P.S. I just tested the issue above again and it appears that for some reason the issue is now resolved so now clicking UIs in this area works??)
It’s hard to make UI work for every device, especially on Roblox when you have to worry about your UI elements overlapping the chat box, or the thumb areas on mobile devices. You don’t necessarily have to create a custom UI for each device, it’s just one option. The ideal solution would be to design your UI with mobile in mind when you first start designing it. I find that looking at examples of existing mobile games for inspiration is a good way to go (not Roblox ones bc there aren’t many good examples of games that design UI for mobile nicely :P).
But yeah, to solve your exact problem, you don’t actually have to program them to move if it’s a touch device, it’s just one solution. You could also just move them to a better position that works on all platforms: slightly upwards, to the top of the screen, etc, but keep in mind that the top left has the chatbox which might also get in the way.
In response to your P.S., I wouldn’t recommend keeping your buttons around the thumbstick because the player might accidentally push the buttons and have menus pop up in their face, which doesn’t offer a great user experience.
one issue that wasn’t covered in this is that it also sinks world input, so if the user tries to interact with things in the world that are in the bottom left of their screen, they can’t do it. i feel like that is bad user experience in general?
in my game sometimes some of the menus are obscured partially by the dynamic thumbstick range (because it’s nearly half the screen on most phones) and, because the user wouldn’t be moving when this UI is open, I would expect that behavior not to occur
the same goes for any clickable billboardguis in the world that occupy the bottom left quadrant, they become altogether unusable because the dynamic thumbstick sinks every tap
Sorry for bumping this, but for the case of anyone dealing with this, a quick fix I found was that you should change the DisplayOrder of a ScreenGui to be greater than the Dynamic Thumbstick’s UI.
