#RadialMenu

RadialMenu in UIToolbox is a ring of wedges, as a weapon wheel or a quick menu of a game. Each RadialMenuItem has a wedge. The first item is at the top, and the others follow clockwise. The center shows the text of the highlighted item. An item can have sub-items, which fold out in a second ring. The RadialMenuDemo example scene has a weapon wheel, a build wheel and a command wheel.

<tb:RadialMenu name="wheel" inner-radius="0.45" cancel-text="Cancel">
    <tb:RadialMenuItem text="Sword" />
    <tb:RadialMenuItem text="Bow">
        <tb:RadialMenuItem text="Fire" />
        <tb:RadialMenuItem text="Ice" />
    </tb:RadialMenuItem>
</tb:RadialMenu>

var potion = wheel.AddItem("Potion");
potion.AddItem("Health", () => player.Drink(Potion.Health));
potion.AddItem("Mana", () => player.Drink(Potion.Mana));
wheel.ItemChosen += item => equip(item.Text);
wheel.Cancelled += closeWheel;
// A stick that points the wheel. A Value action is canceled, not performed, when the stick goes back.
stick.performed += context => wheel.Point(context.ReadValue<Vector2>());
stick.canceled += _ => wheel.Point(Vector2.zero);

Input:

• The pointer highlights the wedge in its direction, and a click chooses it. A click in the center hole cancels.
• Left and Right (and Tab) step counterclockwise and clockwise over the enabled items. Up and Down go to the enabled item nearest the top or the bottom. The menu keeps these moves, so the focus stays on it.
• Submit chooses. The cancel event cancels.
• A click on a disabled wedge does nothing.

Sub-items:

• An item with sub-items shows a thin band outside its wedge. It is open while it or one of its sub-items is highlighted: the sub-items then show outside its wedge, in wedges of the same shape.

• With the pointer: point at the item, then move out to a sub-item and click.

• With the keys or a gamepad: submit on the item goes to the sub-item in the middle. Left and Right step over the sub-items. Submit chooses, and cancel goes back to the item.

• With a stick: after the submit, Point highlights the sub-item in the direction of the stick. A direction out of the section of the sub-items goes back to the ring.

• When an item has sub-items, the ring is smaller: the menu keeps the space of the second ring free. A sub-wedge is as wide as a wedge, and 30 degrees at most.

• The menu shows one level of sub-items.

• The UI navigation also reads the sticks. While a Point direction is out of the dead zone, the menu ignores the navigation moves, so the same stick does not step the highlight away. Call Point(Vector2.zero) when the stick goes back, or the arrow keys stay ignored.

• The menu is square: the smaller side of the content sets the radius.

• The menu draws the wedges with Painter2D and places the items with left and top.

#Styling

The variables of tb-radial-menu:

To make a style of your own, set the variables in a class and add the class to the menu:

.ember-wheel {
    --tb-radial-menu-wedge: rgba(120, 40, 20, 0.85);
    --tb-radial-menu-sub-wedge: rgba(90, 30, 15, 0.85);
    --tb-radial-menu-highlight: #ffb020;
    --tb-radial-menu-center: rgba(40, 14, 8, 0.9);
    --tb-radial-menu-line: #ff7a30;
    --tb-radial-menu-gap: 3;
}