Custom Mobile Controls (Directional Pad and Simple Backpack)

Help and Feedback Creations Feedback
#1

In the ever-continuing quest to make ROBLOX more available on all platforms, I made a custom movement and backpack GUI designed for touch. Here’s a simulation of the GUI in a 640x328 ScreenGui. This is the dimensions of a ScreenGui on my Samsung Galaxy S5 which I designed it with.

Some notable differences to the default controls of ROBLOX and details about the controls in general:
[ul]
[li]Backpack tools are on the right (not the bottom) because this spot feels more accessible to the thumb. There’s room for about 4 tools on my phone’s screen, which should be plenty for combat games where you won’t have many weapons.[/li]
[li]The touch-joystick has been replaced with a directional pad. I modeled this off of Minecraft Pocket Edition’s directional pad. There are invisible diagonal buttons (you just can’t see them in the screenshot). They become visible when you touch the respective direction. They are touchable even when not visible.[/li]
[li]The buttons are a subtle 50% opaque black instead of the grey in the default controls. I used Open Iconic’s images for the buttons, then ImageColor3’d them.[/li]
[li]I used Crazyman32’s Nine-patch plugin to create the buttons (and their outlines) for the tool buttons on the right. [/li]
[li]Touching any button makes it white 50% opaque. Touching a directional button will make the diagonal buttons visible.[/li]
[li]The controls scale squarely with vertical screen size. They are 40% the height of the screen. They are also 25 pixels from the respective sides of the screen.
[li]The backpack buttons make a nice satisfying click sound when you select or deselect a tool. This is changeable in a Sound object inside the ScreenGui template. I wanted this feedback to the player to be very clear.[/li]
[li]The Guis are disabled unless UserInputService.TouchEnabled is true. In other words, you don’t have to worry about desktop users seeing it.[/li]
[li]Currently, there is no way to reorder or remove buttons for Backpack items. I think I want to add long-tap options to the buttons in the future.[/li]
[li]ROBLOX will auto-rotate the camera when calling Humanoid:Move() to set Humanoid.MoveDirection. As a result, the left or right directional buttons sometimes move the camera, which I believe can be fixed by setting the CameraType to Track. Not sure, though.[/li]
[/ul]

Try it out:
[ul]
[li]… on your mobile device here: http://www.roblox.com/games/265069157/Labs. DOES NOT SHOW ON DESKTOP.[/li]
[li]…with a model on ROBLOX.com: This includes the Backpack LocalScript (for StarterPlayerScripts) and the Control GUI (for StarterGui). http://www.roblox.com/item.aspx?id=269649577[/li]
[li]…with an .rbxm file. Attached to this post is MobileGui.rbxm to this post in case you like those instead.
[/ul]

Let me know what you think. I wanted to make some definite feel improvements to controlling your character in games and i think it’s turned out nice. In my opinion, it feels way smoother than the default controls and not as annoying as the moving virtual joystick.

3 Likes
#2

Moving your finger from a diagonal slanted arrow to a straight arrow often doesnt work. (Happens when you quickly slide from one slanted arrow to another slanted arrow)

The backpack feels great. I love how you can slide your finger across the items to select them.
But where is the expand backpack option for when you have more than 5 tools?

#3

I’m aware of some issues with moving from a diagonal button to the other buttons; i plan on ironing them out tonight.

There isn’t any expanded backpack view right now, but I would like to add one. You would access it by sliding your finger in to the screen from the right.

To be honest, I was originally designing this for a combat game where you wouldn’t have more than 4 tools at a time anyway. I’ll expand its functionality later.

1 Like
#4

Have you put any more work into this? And, sorry if this is a basic question, how do you disable the default Roblox joystick and jump button?

1 Like
#5

I’ve probably done one minor change on this for my current project, but outside of that nothing has been changed.

Pretty sure this code is what disables ROBLOX’s default screen joystick/jump button:

	userInputService.ModalEnabled = true
	spawn(function ()
		wait(1)
		userInputService.ModalEnabled = false
		userInputService.ModalEnabled = true
	end)
#6

[quote] I’ve probably done one minor change on this for my current project, but outside of that nothing has been changed.

Pretty sure this code is what disables ROBLOX’s default screen joystick/jump button:

userInputService.ModalEnabled = true spawn(function () wait(1) userInputService.ModalEnabled = false userInputService.ModalEnabled = true end) [/quote]

Thank you!

1 Like