UI prefabs are instantiated below the canvas

Question

I am trying to copy the Zelda health system. The code looks really fine and works fine.

But the heart containers are placed wrong. They get instantiated below the c

Answer 1

I assume you are getting something like this:

You fix this by pass false to the second parameter of the SetParent function. By doing this, you will make the Transform keep its local orientation rather than its global orientation.

Simply replace :

newHealthContainerTransform.SetParent(healthBar);

with:

newHealthContainerTransform.SetParent(healthBar, false)

---

You can also set the parent Object and make the instantiated Object's Transform keep its local orientation in the Instantiate function. The only disadvantage of this is that you now have to set the position of object in another line of code instead of the Instantiate function like before.

Transform newHealthContainerTransform = Instantiate(healthWrapperObject, healthBar, false).transform;
newHealthContainerTransform.GetComponent<RectTransform>().anchoredPosition3D = new Vector2(x, y);

---

When moving a UI Object you should be modifying it's RectTransform variables instead of the Transform variables.

Below are other useful variables that determines where to position the UI:

These are anchoredPosition, anchoredPosition3D, anchorMax and anchorMin which can be modified with:

yourUIObj.GetComponent<RectTransform>().anchoredPosition = ...
yourUIObj.GetComponent<RectTransform>().anchoredPosition3D = ...
yourUIObj.GetComponent<RectTransform>().anchorMax = ...
yourUIObj.GetComponent<RectTransform>().anchorMin = ...