Can't get image centered correctly on radial menu

Unity Engine
1

Hi there,

I’ve been stuck on this for hours. I can’t seem to get the icons centered regardless of menu items. Below code works for 4 items but increased to 6 is goes weird. See image.

Can anyone assist?

 float ringThickness = 40f; // For ref
       
        for (int i = 0; i < menuItemCount; i++)
        {

            GameObject newButton = new GameObject();
            RectTransform rect = newButton.AddComponent<RectTransform>();
            Image img = newButton.AddComponent<Image>();
            newButton.name = i.ToString();
            newButton.transform.SetParent(this.transform);

            // Img
            img.sprite = menuSectionBG;
            img.type = Image.Type.Filled;
            img.fillMethod = Image.FillMethod.Radial360;
            img.fillOrigin = (int)Image.Origin360.Top;
            img.fillAmount = (float)1 / menuItemCount;

            img.color = NormalColor;

            rect.sizeDelta = new Vector2(250, 250);
            rect.localScale = Vector3.one;
            rect.localPosition = Vector3.zero;

            var slice = 360 / menuItemCount;
            var peice = (slice * i); //+ (slice / 2);

            newButton.transform.Rotate(0, 0, -peice);
            newButton.transform.position.Set(0, 0, 0);

            // Generate Icon
            GameObject icon = new GameObject();
            icon.name = "Icon";
            icon.transform.SetParent(img.transform);

            RectTransform iconRect = icon.AddComponent<RectTransform>();
            iconRect.sizeDelta = new Vector2(25, 25);
            iconRect.localScale = Vector3.one;

            // Problem area...
            float distX = (rect.sizeDelta.x / 2) - (iconRect.sizeDelta.x / 2) / menuItemCount;
            float distY = (rect.sizeDelta.y / 2) - (iconRect.sizeDelta.y / 2) / menuItemCount;
            iconRect.localPosition = new Vector3((rect.sizeDelta.x / menuItemCount) - (iconRect.sizeDelta.x / 2) / distX / (ringThickness / 2) + (iconRect.sizeDelta.x / 2) - 2, (rect.sizeDelta.y / menuItemCount) - (iconRect.sizeDelta.x / 2) / distY / (ringThickness / 2) + (iconRect.sizeDelta.y / 2) - 2, 0);
            // End
           
            Image iconImage = icon.AddComponent<Image>();
            iconImage.color = Color.red;

            menuButtons.Add(newButton);
        }

4767434--453473--iconsWeird.png

2

Line 42 and 43 you are dividing by menuItemCount. Is that reasonable?

Here is one approach for each icon:

  • create a blank game object at the center (we’ll call that a spinner)
  • parent the icon to that center spinner
  • offset the icon upwards by a known radius
  • rotate that inner spinner object a fixed ever-increasing amount (see below)
  • set the icon .rotation to Quaternion.identity.

If the variable i is the integer for sequencing, one term for rotation might be:

float rotationAmount = (i * 360.0f) / itemCount;