Unity 5：如何将对象从网格布局缩放和平移到屏幕中心

Question

我正在尝试创建一个滚动网格视图，其中每个单元格对象都是可点击的。 当一个单元格对象被点击时，我想将其缩放并平移到屏幕的中心并将其渲染到其他单元格之上。 我能够使其可点击并将其缩放到其位置。现在我想将单元格对象移动到屏幕的中心并将其渲染到其他单元格上方。 我尝试了很多解决方案，但没有一个有效。

这是我的层次结构：

这是正常状态的网格：

这是点击单元格时的网格：

我正在从 C# 脚本动态填充网格。

void Populate()
{
    GameObject cardContainerInstance, cardInstance;

    foreach (var c in cardsCollection.GetAll())
    {
        if (c.IsOwned)
        {
            cardContainerInstance = Instantiate(cardContainer, transform);
            cardInstance = cardContainerInstance.transform.Find("Card").gameObject;

            var cardManager = cardInstance.GetComponent<CardManager>();
            cardManager.card = c;
            cardManager.AddListener(this);
        }
        else
        {
            Instantiate(cardSlot, transform);
        }
    }

}

public void OnCardClick(GameObject cardObject, Card card)
{
    Debug.Log("OnCardClick " + card.name);

    if (openedCard != null) {
        if (openedCard.Number == card.Number)
        {
            CloseCard(openedCardObject);
        }
        else
        {
            CloseCard(openedCardObject);
            OpenCard(cardObject, card);
        }
    }
    else
    {
        OpenCard(cardObject, card);
    }
}

void OpenCard(GameObject cardObject, Card card)
{
    //cardObject.GetComponent<Canvas>().sortingOrder = 1;

    var animator = cardObject.GetComponent<Animator>();
    animator.SetTrigger("Open");

    openedCard = card;
    openedCardObject = cardObject;
}

void CloseCard(GameObject cardObject)
{
    var animator = cardObject.GetComponent<Animator>();
    animator.SetTrigger("Close");

    openedCard = null;
    openedCardObject = null;
}

我不知道如何将单元格移动到中心并将其呈现在其他单元格之上。

请注意，所有内容都是使用附加到对象本身的动画器进行动画处理的。

谁能帮帮我？非常感谢！

编辑：更多细节

所有单元格对象都有以下层次结构：

地点：

• CardContainer 是一个空对象，添加以在 Card 子对象上使用动画器
• 卡片是具有脚本、画布渲染器和动画师的对象本身
• StatsImage 是点击卡片时滑出的对象
• Image 是一个带有 Image 脚本、Shadow 脚本和画布渲染器的 calssic UIImage
• 其他组件是简单的文本。

编辑：修复中

尝试应用this 建议我能够管理渲染顺序（如下图所示），但似乎阻止了在游戏对象上检测到触摸事件。 我也添加了 GraphicsRaycaster，现在底部水平滚动视图再次滚动，但前提是我单击并拖动卡片。 此外，使用GraphicsRaycaster，主网格卡仍然不可点击，只有在底部面板后面才能打开卡片（如果我点击面板后面的卡片下方图像中的红点会收到che click）

这是运行时的 CardContainer（请注意，我在 CardContainer 上附加了新的 Canvas 和 GraphicsRaycaster，这是“根”元素）：

Answer 1

您没有说明您是使用精灵渲染器还是其他方法，但这里是每个方法的答案。

Sprite 渲染器：

这是最简单的。在每个精灵渲染器中，脚本中有一个名为“sortingOrder”的变量，而检查器中有一个名为“Order in layer”的变量。首先渲染排序顺序较高的精灵渲染器。您需要做的就是调用：

cardObject.GetComponent<SpriteRenderer>().sortingOrder = 1;

当你点击卡片时，

cardObject.GetComponent<SpriteRenderer>().sortingOrder = 0;

当您取消单击它时。我希望这是有道理的！

其他方法：

这个有点难，我建议你切换到精灵渲染器，它会更容易和更稳定，但如果你已经写了很多脚本并且不想回去改变他们。 无论如何，您需要做的就是创建两个层：cardLower 和 cardUpper。然后创建一个新相机并将其命名为 topCamera。现在在检查器的顶部相机对象下，更改剔除遮罩（它靠近顶部）并确保选择了 cardUpper。然后将清除标志（第一个）更改为“不清除”，最后将深度更改为 0（如果这不起作用将其更改为 -2）。现在 cardUpper 中的对象将始终呈现在其他所有内容之上。您可以使用

通过脚本更改图层

cardObject.layer = "cardUpper"

或

cardObject.layer = "cardLower"

希望对你有帮助！

Answer 2

好的，这很简单。因此，您将要向游戏对象添加另一个画布组件，并检查覆盖排序是否为 true。然后使用

cardObject.GetComponent<Canvas>().sortingOrder = 1;

把它放在前面和

cardObject.GetComponent<Canvas>().sortingOrder = 0;

把它放在后面。

您还需要在每个 cardObjects 上放置一个 GraphicsRaycaster

忽略我关于精灵渲染器的其他回答，这里不需要它们