Los prefabricados de IU se crean instancias debajo del lienzo

Estoy tratando de copiar el sistema de salud Zelda. El código se ve muy bien y funciona bien.

Pero los contenedores del corazón están mal colocados. Se instancian debajo del lienzo.

Este es el código importante, los contenedores del corazón son correctos, justo en la posición incorrecta.

El cálculo de x e y es correcto, pero en el lienzo no lo es.

  private Transform healthBar = GameObject.FindGameObjectWithTag("HealthController").transform; // container for the heartContainers

    private GameObject healthWrapperObject = Resources.Load("HealthContainer") as GameObject; // the backgroundImage and parent of the heart

    private List<Image> healthContainers = new List<Image>(); // list of hearts for later usages

    private int maxHealth = 6;
    private int currentHealth;

    private int healthPerHealthContainer = 4; // 4 lifepoints per heart
    private int healthContainersPerRow = 5; // 5 hearts per row

    private int healthContainerStartPositionX = 0; // Healthbar starts at 0 on x
    private int healthContainerStartPositionY = 0; // Healthbar starts at 0 on y

    private int healthContainerSpacingX = 10; // horizontal spacing
    private int healthContainerSpacingY = -10; // vertical spacing

    private void Start()
    {
        currentHealth = maxHealth;
        InitializeHealthBar();
    }

    public void InitializeHealthBar()
    {
        int neededHealthContainers = maxHealth % healthPerHealthContainer == 0 ? maxHealth / healthPerHealthContainer : maxHealth / healthPerHealthContainer + 1; // Calculate the needed container count
        int counter = 0; // counts the hearts per row 
        int x = healthContainerStartPositionX; // horizontal position of the heartContainer
        int y = healthContainerStartPositionY; // vertical position of the heartContainer

        for (int i = 0; i < neededHealthContainers; i++)
        {
            counter++;

            if (counter >= healthContainersPerRow) // start a new line after 5 hearts per row
            {
                x = healthContainerStartPositionX; // move back to the left
                y += healthContainerSpacingY; // go for the next line
                counter = 0; // reset the counter
            }
            else
                x += healthContainerSpacingX; // place the new container right next to the previous

            Transform newHealthContainerTransform = Instantiate(healthWrapperObject, new Vector2(x, y), healthWrapperObject.transform.rotation).transform; // create the healthContainer parent / backgroundImage
            newHealthContainerTransform.SetParent(healthBar); // take the container and make it a child of the healthBar
            healthContainers.Add(newHealthContainerTransform.GetChild(0).GetComponent<Image>()); // get the heart of the heartContainer and add it to the heartList
        }
    }

Agregué la configuración de transformación para el healthBar, el healthContainer / backgroundImage y el corazón ("healthfill").

En los 3 elementos presioné Strg + Alt y Shift para anclarlos.

El contenedor de corazón debe agregarse a la barra de salud, el corazón es hijo del contenedor de corazón y está configurado para estirarse (debe ser del mismo tamaño que su padre)

¿Por qué los objetos prefabricados de la interfaz de usuario se instancian debajo del lienzo?

Respuestas a la pregunta(1)

Su respuesta a la pregunta