Skip to main content

Automatic Radial Menus

User Guide (V1.0)

Automatic Radial Menus is a UE4 plugin which can be used to generate a radial menu of any size. The plugin manages user interaction and events for use with either a mouse or gamepad. This plugin can be implemented with 100% blueprint code, however, it also can be used in C++ if desired.


Key Features

  • Generate radial menu segments of any size.
  • Controls user input for mice/keyboards and gamepads.
  • Vast customisation options.
  • Automatically apply text and images to segments.
  • Bind hover, unhover and click events to any action.
  • Blueprint and C++ compatible.

Sidebar Image

Creating a Radial Menu

To create a radial menu you must simply drag ‘Widget_RadialMenu’ blueprint onto your user widget. The radial menu can be anchored and have its size and position controlled by other panel widgets without issue. The radial menu should always be a 1:1 aspect ratio to ensure segments align correctly. From here there are several settings which can be used to define the look and content of the menu.

The ‘Generate Menu’ button can be clicked to show a preview of the menu. This preview will disappear when compiling the user widget however, it will still be visible within the game.

Segments Array

The segment array controls all the segments in the menu. Here you can define an image and text for each segment. Note there is no way to set the size of a segment as this action is performed automatically based on the number of segments in the list.

info

Important Note - You do not need to add segment blueprints manually. The radial object will automatically generate everything needed from the segment array.

Segments

Other Settings

Other properties can be set to adjust the animations when selecting and widget and the styling of the segment itself. To have no select animation simply set the ‘Move Distance’ to 0. Under the ‘Other Radial Menu Settings’ section, the image and style of the center arrow can be defined. If creating a custom arrow, ensure that the point is facing to the right of the image.

Segment StyleOther Style (Arrow and arrow base)

Creating a Segment Style

To create a segment style you must first create a material instance based on ‘RadialSegment_M’. From here all styling settings can be defined. You should create two materials, one for the selected and one for the unselected state. To access the material ensure that you have selected ‘Show editor content’ in the content browser.

Show Engine Content

note

The ‘PreviewSegments’ parameter is only used to preview the material at different sizes. The size will be dynamically set at runtime to match the number of segments in the list.

Material Instance

After you have created your materials you add these to the radial menu instance and they will be automatically used.

Material Instance


Interaction and Gamepad support

To interact with the radial menu certain functions will need to be called. These could be called from the PlayerController or PlayerCharacter The following blueprint code can be found in the ‘Examples’ folder.

Gamepad Interaction

You must pass in the X and Y values of a thumbstick when the gamepad is being used. An example of this can be seen below. You may also want to hide the mouse cursor here when using a controller. Material Instance

Click Events

Click events must be triggered in a similar fashion by calling 'interact' on a radial menu object. Material Instance


Binding Events

There are three events which can be used: OnHover, OnUnHover and OnClick. The two following functions can be used to get segments from a radial menu allowing events to be connected.

Loading Phase

The following example gets all segments in a menu and binds them to an event which prints their text when clicked. This could be used to hook up any game event e.g. equip a weapon, drop an item, select a building resource etc.

Binding Example

Loading Phase

Extra details and code samples: https://github.com/SamCarey99/Automatic-Radial-Menus-Code-Samples