UI 预制件在画布下方实例化

Question

我正在尝试复制 Zelda 健康系统。代码看起来非常好并且工作正常。

但是心脏容器放错了。它们在画布下方被实例化。

这是重要的代码，心脏容器是正确的，只是在错误的位置。

x 和 y 的计算是正确的，但在画布上却不是。

  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
        }
    }

我为 healthBar、healthContainer / backgroundImage 和 heart（“healthfill”）添加了转换设置。

在所有 3 个元素上，我按下了 Strg+Alt 和 Shift 来锚定它们。

heartcontainer 应该被添加到 healthbar 中，heart 是 heartcontainer 的子级并且被设置为可以拉伸（它应该和它的父级一样大小）

为什么 UI 预制对象在画布下方实例化？

Answer 1

我假设你得到的是这样的：

您可以通过将false 传递给SetParent 函数的第二个参数来解决此问题。通过这样做，您将使 Transform 保持其局部方向而不是全局方向。

只需替换：

newHealthContainerTransform.SetParent(healthBar);

与：

newHealthContainerTransform.SetParent(healthBar, false)

---

你也可以在Instantiate函数中设置父Object并使实例化Object的Transform保持其本地方向。唯一的缺点是您现在必须在另一行代码中设置对象的位置，而不是像以前那样使用 Instantiate 函数。

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

---

移动 UI 对象时，您应该修改它的 RectTransform 变量而不是 Transform 变量。

以下是确定 UI 位置的其他有用变量：

这些是 anchoredPosition、anchoredPosition3D、anchorMax 和 anchorMin，可以修改：

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