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:
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 Source | Supports 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.
Here's what the radial menu configuration screen looks like:
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 Style | Description | Button Click | Highlighted action fires when you press the input |
Button Release | Highlighted action fires only after you press and then release the input |
Touch Release/Modeshift End | Highlighted 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. |
Always | Fires the action as long as it is highlighted |
Other Options
Option | Description | On-Screen Horizontal / Vertical Position | Where 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 Opacity | The radial menu has a black background and you can control its transparency. The action icons themselves will always appear with 100% opacity, however. |
Menu Size | How big is the menu? A scale factor between 0.0-1.0, from smallest to largest. |
Display Binding Label on Button | Radial 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 Action | This 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).
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:
When you select an icon, you may also change its colors:
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:
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.vdfAnd here it is in action:
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":
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:
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:
Here's how we set it up. First, we create a custom action set layer. We click "add action layer."
We'll call it "System Options."
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:
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 layer --> System Options" from the pop up menu:
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:
Then we select the left trackpad where the radial menu is bound in the underlying action set:
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:
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.vdfFurther Reading