Unaffiliated

Home Documentation & Help
Steamworks Documentation
Radial Menus
A radial menu is an on-screen overlay of game actions, displayed as a ring of choices selectable with a controller. These are very similar to Touch Menus, except that instead of selecting a specific location on the touch surface, the player must aim the virtual pointer at the option they want and then select it to fire the action.

You can use these to e.g. switch weapons in a first-person shooter, toggle hotkeys in a real-time-strategy game or MMO, or any other use you can think of. Radial menus can be configured in many different ways in both behavior and appearance, and can be adorned with custom labels and icons (provided by either Valve, the developer, or the player).

Here's an example of radial menus used for quick spell selection in Defender's Quest: Valley of the Forgotten:

dqdx_radial_menu.png

That radial menu in the center of the screen is not part of Defender's Quest's code. It's entirely driven by the Steam overlay and the Steam Input configurator. As far as the Defender's Quest application is concerned, it's simply receiving actions from the Steam Input API.

Radial menus are available in both native and legacy mode, but can only be driven by certain Input Sources:

Input SourceSupports Radial Menu
Trackpad
DPad
Button Pad
Joystick
Gyro
Switches
Triggers

To create a radial menu, simply select a compatible input source in your game's configuration (such as a joystick or trackpad), and select "Radial Menu" as the input style.

radial_menu_create.png

Here's what the radial menu configuration screen looks like:
radial_menu.png

Basic Options

Menu Activation Style


This determines how the radial menu works -- should the action fire when you point at it and let go, must you click something first, or should it continuously fire as long as it's highlighted?

The available options are:

Menu Activation StyleDescription
Button ClickHighlighted action fires when you press the input
Button ReleaseHighlighted action fires only after you press and then release the input
Touch Release/Modeshift EndHighlighted action fires when input stops (such as releasing a button or lifting your finger off a trackpad/joystick) or, if the radial menu is on a modeshift, whenever that modeshift ends.
AlwaysFires the action as long as it is highlighted

Other Options


OptionDescription
On-Screen Horizontal / Vertical PositionWhere should the radial menu appear on-screen? Values are 0.0-1.0, with zero representing the left/top edge of the screen, and one representing the right/bottom.
Menu OpacityThe radial menu has a black background and you can control its transparency. The action icons themselves will always appear with 100% opacity, however.
Menu SizeHow big is the menu? A scale factor between 0.0-1.0, from smallest to largest.
Display Binding Label on ButtonRadial menu buttons can show a text label of what is bound to them on the actual button. If an icon is used, this label will display in the upper left corner. If disabled, the icon or blank button will be used.
Click ActionThis is an action that is not bound to any particular input, but instead to the radial menu itself. This is particularly useful when combined with the "Always On" menu activation type. A natural example is binding this to "pause," so that whenever you bring up the radial menu, the game pauses and you have time to make your choice.

Menu Buttons


Each "Menu Button X" option can have an action (and/or legacy key binding) assigned to it. The basic configuration screen has five menu buttons, but you can assign up to twenty (select "Additional Settings" for bindings for menu buttons 6-20).

radial_menu_button.png

Center/Unselected Button


There is also an optional "center" button in the center position of the radial menu that is bindable just like any other radial menu button. Note that this button will grow in size as you add more regular menu buttons.

TIP: Default Center Cancel

Depending on your game, you might want the player to easily be able to back out of the radial menu without activating anything. If you are using the "Touch Release/Modeshift End" activation style, this can be tricky because whatever action you have selected last will immediately fire when you close the radial menu.

One particularly nice way to do this is to create a completely unused action in your game (call it "nevermind" or something), and bind it to the center button. Or, if you're the player and the developer hasn't provided such an action (or you're in legacy mode), bind the center button to some legacy key that the game ignores. Then, choose a nice "X" for this menu button.

Voila! Now whenever you want to dismiss this kind of radial menu without committing to an action, you just return to the central rest position and release the input.

Menu Button Icons


For each menu button, you can also assign an icon. Select the box next to the word "Icon" to assign one:

radial_menu_button_icon.png

When you select an icon, you may also change its colors:

radial_menu_button_icon_color.png

By default the icons are provided by Valve from the steam client itself. You can find these in <SteamInstallDirectory>\Steam\tenfoot\resource\images\library\controller\binding_icons (and if you add your own here, they will appear in this menu, though only on your own local computer). Developers can provide their own custom icons for use in radial menus (and touch menus) by placing *.png files in a directory named /TouchMenuIcons, relative to their game's root directory.

Here's an example of a developer shipping custom icons with their game:

dqdx_sc_radial_icons.png

Fun Fact

Animated GIFs can be used as custom menu icons!

Nested Radial Menus


You can use Action Set Layers to created Nested Radial Menus. We'll provide an example using the game Slime Rancher.

Here's a link to the configuration we're about to build:
steam://controllerconfig/433340/1360133345

And here's the finished IGA file for the configuration we'll be creating:
slime_rancher_nested_radial_menus.vdf

And here it is in action:

slime_rancher_0.png

This radial menu is bound to the left trackpad, and lets you select various in-game options such as "Open the Slimepedia", "Toggle radar", "Open the map", etc. But it also has a special option for opening a nested radial menu, "System Options":

slime_rancher_1.png

Selecting this will activate a player-defined "System Options" action set layer. The next time we open the radial menu, we will see this instead:

slime_rancher_2.png

Now we have options such as "Take screenshot", "Show keyboard", and volume controls. There is also an option to "Return", which will deactivate the "System Options" action set layer and cause the normal options to appear the next time we activate this radial menu:

slime_rancher_3.png

Here's how we set it up. First, we create a custom action set layer. We click "add action layer."

slime_rancher_add_layer_1.png

We'll call it "System Options."

slime_rancher_add_layer_2_1.png

Now that that's done, we return to our base configuration and "game controls" action set, then select the left trackpad and configure our basic radial menu:

slime_rancher_radial_menu_config_1.png

Everything is pretty normal except for Menu Button 5, which activates the action set layer. We set this by selecting the special "action set" button in the binding screen and selecting "Apply Action set --> System Options" from the pop up menu:

slime_rancher_radial_menu_config_3.png

Note that the special "action set" button will not appear in the binding menu if you don't have any custom action sets defined. This means that you must create your custom action set layer before you try to set up the activation toggle for it. See the Action Set Layers article for more info on creating action set layers.

Once we've got our base radial menu set up, we need to configure the radial menu in the overlaid action set layer, too. We go back to the base configuration screen and select the custom "System Options" action set layer:

slime_rancher_radial_menu_config_4.png

Then we select the left trackpad where the radial menu is bound in the underlying action set:

slime_rancher_radial_menu_config_5.png

Note how we can see the underyling action bindings in grey. We can override them here to create a nested radial menu. Any actions we do not change will "show through" in the second layer radial menu. We're going to override all of them here with various system option bindings (except for the central "nevermind" action). Note especially that we bind an action set layer command to the fifth menu button, which deactivates the action set layer:

slime_rancher_radial_menu_config_6.png

And there you have it! A double-layered radial menu.

Once again, here's the link to configuration:
steam://controllerconfig/433340/1360133345

And the IGA file:
slime_rancher_nested_radial_menus.vdf

Further Reading