correct for the doc's Radial Menu (incomplete)

[cNori]

doc's are incomplite but better from what is now
ps. read it and run the auto correct on it
my dyslexic brein has some limits

Important

The Allow Change Selection When Inside gives out the math equation for a reason don't remove it

Preview

Radial Menu

Radial menus are useful when making a quick select menu, where normal menu types just do not fit.

Parameter	Description
Thickness	How thick the randial menu is
Edge Offset	Distance to the edge of the UI unform bounds size
Center As Button	Center is becoming a button
Allow Change Selection When Inside	By default is set to false changing it to true will allow mouse to swap selection when inside the region considered as a button if the Center As Button is set to true this regon is defined with Center = ((1.0 - EdgeOffset) - Thickness) * uniformSize * 0.5, keeping value false is useful when creating a stacked menus

Note

The radial menu has two modes

Mode	Active if
Layout Controller	Material is not set
Layout Controller and Material Controller,	Material is set

Note

Default background brush is not working, the draw function is overridden by Radial Menu.

background brush is coming from the base class Control and is not supported by Radial Menu, yes this is intentional.

Warning

Adding more than 127 elements as a child where child is parent of radial menu will cause int8 overflow.

This might have caused unintended behavior

Layout Controller

Any child control added to the radial menu will be automatically layout around its center.

Note

It's recommended to add children by a script in this mode,
index inside RadialMenu.Children array dictates the order of the UI elements,

Material Controller and Layout Controller

Child control added to the radial menu will be automatically layout around its center.

Important

Radial Menu supports only Image controls as children. do to mouse ray being blocked by mouse capturing UI events elements,
This is intentional and will not be changed

Radial Menu creates instance of the material with can't be accessed yet (this will be changed).

Sample script

Important

Provided Sample script doesn't apply to when mode (Material Controller and Layout Controller) is not active

public class RadialMenuUsageExample : Script
{
    public Actor ActorRadialMenu;
    private RadialMenu _radialMenu;

    public override void OnStart()
    {
        _radialMenu = ActorRadialMenu.As<UIControl>().Control as RadialMenu;
        _radialMenu.Selected += OnOptionSelected;
    }

    public override void OnDestroy()
    {
        _radialMenu.Selected -= OnOptionSelected;
    }

    private void OnOptionSelected(int selectedOption)
    {
        if (!Enabled)
            return;
        if (_radialMenu.CenterAsButton)
        {
            if (selectedOption == 0)
            {
                Debug.Log("[Radial Menu] Center has been clicked");
            }
            else
            {
                if (selectedOption == -1)
                {
                    Debug.Log("[Radial Menu] Selection has been lost");
                }
                else
                {
                    Debug.Log($"[Radial Menu] Option {selectedOption} has been selected");
                }
            }
        }
        else
        {
            if (selectedOption == -1)
            {
                Debug.Log("[Radial Menu] Selection has been lost");
            }
            else
            {
                Debug.Log($"[Radial Menu] Option {selectedOption} has been selected");
            }
        }
    }
}

Abaut Material's

Material assigned to the Radial Menu control can be used to draw the background to display selected and highlighted controls.

Default Material

Important

Radial menu Default material, expect min of 2 children.

Default Radial Menu is fully genereted out of math it is not using any textures

1. Gradient nodes used
   • Cone
   • Cycle
   • Linear
   • Radial
   • Ring
2. Utility nodes used
   • Falloff and offset
   • Rotate UV (exists inside the custom code node)

Custom Material

To create a custom UI style.

You can clone the default engine material can be found in Flax/Content/Engine/DefaultRadialMenu.flax used in Radial Menu by default,

or make youre own

1. Material parameters requaierd
   
   Ensure material is using following parameters, parameters are controlled by the radial menu

   [!IMPORTANT]
   All paramiters are pefixed with "RadialMenu_"

   Parameter	Description	type	Range
   Angle	angle between cells and how big the selector is	float	0 to pi
   Rotation	how much to rotate the selector	float	0 to pi
   SegmentCount	how many segment the Radial Menu contents	int	0 to int8.max
   Thickness	how thick the randial menu is distance form the center to edge	float	0 to 1
   EdgeOffset	distance to the edge of the UI unform bounds size	float	0 to 1
   SelectionColor	color of the selector [it is swaped with highlighted on selection]	Color	-
   HighlightColor	primary use is as secondary color for selector highlighted	Color	-
   BackgroundColor	primary use is as the not selected color	Color	-
   ForegroundColor	primary use is as segment separator color	Color	-

If you Ensured material is using correct parameters you can go the same route as Default Material if u are Shader/Material Graph magician or use textures with masks

Adding Custom Material parameters

coming soon

Custom Material Tutorial

coming soon