0
\$\begingroup\$

Im basicly looking to create this image: enter image description here

I have all these parts and black background as a separate image so the ideal thing would be to place them with border between them but I could also probably make parts with border. The thing is I would need to turn these images on and off base on input ( think of them a some kind of health bar). Also if there is any other way to do this pleas let me know like some custom fill or something. I could probably arrange them by hand but I think that is kind a hacky solution and it would take forever.

Example of a part:

enter image description here

I try using this code that I found on similar post:

 private void arrangeImages()
{
    for (int i = 0; i < imgParts.Length; i++)
    {
        float angle = i * Mathf.PI / imgParts.Length;
        Vector3 newPos = new Vector2(Mathf.Cos(angle) * radius, Mathf.Sin(angle) * radius);

        imgParts[i].rectTransform.position = newPos;

    }
}

But the this is how it turns out:

enter image description here

\$\endgroup\$
9
  • \$\begingroup\$ Probably easiest to do that by code. Placing objects on a circle, rotation done by degree. There should be at least one example here already \$\endgroup\$
    – Zibelas
    Dec 15, 2021 at 9:04
  • \$\begingroup\$ Yeah I figure but I cant rely find a good example to place them with right spacing and orientation and I'm not rely good with math that is involved to write it my selfie. \$\endgroup\$
    – Ivan
    Dec 15, 2021 at 9:09
  • \$\begingroup\$ blog.unity.com/technology/… this might be another approach, using sprite shapes \$\endgroup\$
    – Zibelas
    Dec 15, 2021 at 9:15
  • \$\begingroup\$ But can you use sprite shapes in UI? \$\endgroup\$
    – Ivan
    Dec 15, 2021 at 9:16
  • 1
    \$\begingroup\$ This has been asked and answered before. \$\endgroup\$
    – Vaillancourt
    Dec 15, 2021 at 14:04

1 Answer 1

1
\$\begingroup\$

Ended creating a full circle and just did normal radial fill to half value. Here is a circle example:

enter image description here

And then I just fill it to specific value taking in consideration segments. Here is sample code I put together.

public static void FillHalfCircle(float value, int segments,Image fillImage)
    {
        if (value > segments)
            value = segments;

        float valueToFill = (0.5f/ segments) * value;

        fillImage.fillAmount = valueToFill;

    }
\$\endgroup\$
0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .