Gamepad Virtual Cursor - Studio Beta

User Interface (UI) designed and implemented for most Roblox games are generally built for mouse and touchscreen input. Working on custom gamepad controls for the UI might not always be a priority over working on your game mechanics and content.

We wanted to provide a solution that works for all types of UI layouts automatically. This led us to build a mouse-like cursor that provides easier UI navigation across all Roblox games. What’s amazing, is this also unlocks gamepad UI support for games that are menu-heavy, that did not previously work with gamepads at all!

What Is the Gamepad Virtual Cursor?

We are excited to bring you the Gamepad Virtual Cursor, which is a mouse-emulation cursor for gamepad input, for interaction with game UI that were not necessarily designed or customized for gamepad.

How It Works:

The Gamepad Virtual Cursor will work in any Roblox place, unless custom gamepad navigation controls have been set up. Use the left thumbstick to move the cursor around the screen to highlight UI buttons/menus. Triggering the UI button is the same as before - simply press the A Button to trigger or interact with the highlighted UI element.

The Virtual Cursor selects the closest GUI button (TextButton or ImageButton) with the highest ZIndex. Virtual Cursor will ignore objects with Selectable set to false or Active set to false. If the cursor is hovering over several UI objects, the object that is closest to the center of the cursor will be highlighted.

You may also notice that the cursor will automatically slow down when it hovers over an interactable UI element. We did this to reduce the chance of a player accidentally scrolling past the UI element. Once the cursor moves off of the UI element it will return to full scrolling speed.

The Virtual Cursor essentially acts like a mouse for certain events. You will be able to listen to MouseEnter, MouseMoved, and MouseLeave events as well as the mouse position using GetMouseLocation for the virtual cursor - just as if the player was using a mouse.

How can I try this in my game?

First, you must enable the feature as a Studio Beta feature.

To enable the beta feature:
  1. Launch Studio
  2. Select File, Beta Features .
  3. Check the box next to “Gamepad Virtual Cursor Beta” and click Save .
  4. When prompted, restart Studio.

In order to use it in the game, plug in a gamepad controller and run your game in Studio. Press the View button (or the equivalent button) to enter virtual cursor mode, at which point you can move around freely with the left thumbstick. Pressing the View button again will return back to full control of your character.

What if I already have custom gamepad UI support?

If you already set up custom gamepad menus and navigation, you are awesome! We suggest you review the functionality of the virtual cursor and decide whether you want to keep your custom controls or use the new system. After reviewing, if you would like to keep your custom solution, the virtual cursor can be disabled.

Setting AutoSelectGuiEnabled to false for all players will prevent the virtual cursor from running. In order to get UI selection, you will have to manually set the SelectedObject.

For example insert a LocalScript in StarterPlayer/StarterPlayerScripts with this code

-- Only use this if you do not want virtual cursor in your game!
local guiService = game:GetService("GuiService")
guiService.AutoSelectGuiEnabled = false

Common Problems:

If you are trying virtual cursor out in your game and it is not behaving correctly, here are a few things you can check:

If you hover over a GUI button that you expect to be highlighted but it is not, make sure the button property Selectable is set to true.

If you bind the view button (or equivalent button) to start UI mode but do not set AutoSelectGuiEnabled to false, you will get both the virtual cursor and the old UI selection system. Try not setting an initial SelectedObject and let virtual cursor handle the navigation! Or, if you want to keep your current navigation, simply set AutoSelectGuiEnabled to false.

In addition, you will need to disable the virtual cursor if you are using the view button for a custom bound special action or functionality. If you do not set AutoSelectGuiEnabled to false, the virtual cursor will be active.

Feedback:

We are releasing this as a Studio Beta first in order to give you a chance to send feedback and let us know about any problems you see in your game. We encourage you to post feedback and let us know what you think!

Known Issues:

  • BillboardGui or SurfaceGui or TextBox interaction is not currently supported
  • Clicking and dragging a UI element doesn’t currently work
  • Unable to scroll up or down in scrolling frames (we are considering the use of the d-pad for this, when a scrolling frame is highlighted)
  • The mouse cursor does not properly set its position to the virtual cursor center. This will be fixed shortly
255 Likes

This topic was automatically opened after 16 minutes.

Very good improvement for controller users, but of course I have to ask, will this be customizable? Can we change the icon and whatnot?

34 Likes

Wow! This looks very good.

I have one question though - would you be able to change the icon of the cursor? If so, does it use the same property from a normal mouse cursor?

For example, to set the current (mouse) cursor icon you use:

mouse.Icon = "http://www.roblox.com/asset?id=163023520"

Will this cursor also support that?

30 Likes

are you planning on supporting SurfaceGuis in neer future?

2 Likes

This is amazing! Will the cursor also act as a “mouse” for things like .Hit and all the properties that "mouse"s have?

5 Likes

Is there a way I can do testing with this without the use of a Xbox controller?
I have PS4 Controllers but I’m not sure if those are supported with roblox to replicate Xbox controller.

6 Likes

@Burgonet and @Dan_PanMan please send your use cases. We have some different appearances of the cursor depending on the state and the cursor is designed to line up with the area where it detects the UI underneath.

5 Likes

This was very overdue! Glad to see this added to the platform, it will be helpful to many.

4 Likes

Sure!

  • If you dislike the current appearance, you can change it quite easily. This would allow every game developer and player to be satisfied with the build.
  • If you are making a, for example, gun game, you can make a custom icon for it which is a crosshair, and another which is a reload icon.

This would just generally allow for more customizability overall.

4 Likes

As I don’t have a Xbox controller to do proper testing with that may we see all/most of the different appearances it has?

If you do support changes to the Icons it displays can you have it set up how the ACM menu was done?

local StarterGui = game:GetService("StarterGui")

StarterGui:SetCore("VirtualGamepadCursorTheme", {
	IconOne = "image",
	iconOneColor = Color3.fromRGB(rgbcolor),
	IconTwo = "image",
	iconTwoColor = Color3.fromRGB(rgbcolor),
	IcomThree = "image",
	iconThreeColor = Color3.fromRGB(rgbcolor),
})

-- As well a method to force open/close it
StarterGui:SetCore("VirtualGamepadCursor", nil) -- Forcefully disables it
StarterGui:SetCore("VirtualGamepadCursor", Frame) -- Forcefully enables it to desired frames location | center of frame 

or something similar to that effect.

4 Likes

Some reasons why I think it should be customizable:

  • Some developers might think the icon is too big and would like to change the size of it
  • Some developers like to have icons that match to the genre of their game (For example a western game, maybe the developer would like to make the icon a tumbleweed)
  • Maybe some developers just don’t like the current design of it

These are some reasons that I can think of off the top of my head. I hope you guys consider making it customizable.

13 Likes

Epic update, Roblox.
This in fact enables many developers to grow their game, because controller players have “mice,” and devs can make their games directed toward PCs, the default device of Roblox.
Questions: Can these controllers ”right click?” Also, does GetMouseClick work the same?

2 Likes

This is really cool! Will developers/players be able to control the size of the cursor size? Right now It’s too big for smaller viewports:

Also, does this virtual cursor support right click, scrolling, etc?

6 Likes

Hey! We’re glad you like the feature! You will be able to use .Hit with virtual cursor. We are still resolving an issue around the cursor position but this will be fixed during the beta period

6 Likes

Hi! Awesome to hear you like the virtual cursor! We are considering support for more customization. For now, scrolling and right click are not supported.

4 Likes

Thats amazing! Thank you, is there any chance the xbox emulator could be updated for people who dont have xbox controllers?

2 Likes

I’m in the progress of working on a game and I was about to begin working on gamepad support today. However, with the introduction of this beta, my plans have slightly changed. It works extremely well right out of the box, but there’s one main issue that I noticed. The issue is that the virtual cursor still slows down for gui objects that are children of ScreenGuis that are not enabled. You can see this happen after I close the daily reward gui in the gif below:

virtualgamepad

Other than this, once it supports scrolling and click dragging, I think that this feature is something that I would use for all of my new projects. Like some people have said, it would be nice to be able to modify the appearance of the cursor so it could fit in with the theme of a game (the same could be said about the gamepad cursor that is displayed when the virtual cursor is not enabled). That being said, I’m really excited for when this is no longer a beta feature.

8 Likes

Hello there! Thanks for bringing this up! We’ll definitely take a look at it.

4 Likes

Great find, thanks for reporting this!

3 Likes