How to make a dynamic circular menu with rotations.

[lavizp]

I am trying to make a menu like this this. (skip to 0:17 for the menu).
Is it possible to create it using this asset?
I tried the position and scale curves and ended with something like this:

This has a staircase like effect. I was looking for more of a circular one.

Please let me know if it is possible and how can I approach this problem. Thank you.

[LanKuDot]

It seems that you have to make the ui be able to rotated in the perspective way.
I tried to rotate the ui object, but it still looks the same.

[lavizp]

IS there a setting in the asset that rotates the object with the graph like the position. It seems to work after setting the camera in perspective and rotating the buttons manually, now I want to rotate it using the script.

[lavizp]

I tried rotating towards the camera in the ListBox.cs Update Method.
transform.LookAt(camera.main.transform)

It rotates the buttons, and I can rotate the menu once, but after that the menu dose not rotate, nor throws an error message.

[LanKuDot]

Nice. Once you could rotate the button, then you have to provide the curve for the list to control the rotation.

1. In the CircularScrollingListSettings.cs, add a new curve for rotation:

[SerializeField]
private AnimationCurve _boxRotationCurve;

public AnimationCurve boxRotationCurve => _boxRotationCurve;

2. In the LinearBoxTransformCtrl.cs, add a new variable for storing rotation curve (Line 39) and a new argument to the constructor (Line 66):

private RangeMappingCurve _rotationCurve;

public LinearBoxTransformCtrl(
    ListPositionCtrl positionCtrl,
    AnimationCurve boxPositionCurve,
    AnimationCurve boxScaleCurve,
    AnimationCurve boxRotationCurve,
    CircularScrollingList.Direction direction)
{
    ...
    _rorationCurve =
        new RangeMappingCurve(
            boxRotationCurve,
            -1, 1,
            _changeSideLowerBoundPos,
            _changeSideUpperBoundPos);
}

3. In the same file, create a function GetRotationValue() to calculate the rotation degree:

private float GetRotationValue(float majorPosition)
{
    return _rotationCurve.Evaluate(majorPosition);
}

4. In the SetInitalTransform() (Line 102) and SetLocalTransform() (Line 125), get the value for the rotation and set to the transform of the box:

var rotationValue = GetRotationValue(majorPosition);
var localRotation = boxTransform.localRotation.eularAngles;

localRotation.y = rotationValue;    // According to your demands
boxTransform.localRotation.eularAngles = localRotation;

5. In the ListBox.cs, pass the rotation curve in the setting to the LinearBoxTransformCtrl (Line 89):

_boxTransformCtrl =
    new LinearBoxTransformCtrl(
        _positionCtrl,
        _listSetting.boxPositionCurve,
        _listSetting.boxScaleCurve,
        _listSetting.boxRotationCurve,
        _listSetting.direction);

6. Finally, in the inspector, set up the rotation curve. The range of the x axis is [-1. 1], and the y axis is the rotation value in degree.

[lavizp]

Thank you so much. You saved my day.