Unity UI：文字在精灵上，在视口蒙版后面？答案

【问题标题】：Untiy UI: Text over sprite, behind Viewport mask?Unity UI：文字在精灵上，在视口蒙版后面？
【发布时间】：2020-05-26 08:54:44
【问题描述】：

我想要一堆看起来像这样的按钮：

它在一个网格布局组中。为了获得精灵顶部的文本，我使用了画布。这就是我的层次结构的样子：

1)Top Level UI (canvas)
  2)GridList (image)
    3)Viewport (image w/mask)
      4)Content (image w/grid layout group) 
        5)ButtonPrefab
          5.10)CanvasForText w/Sort Override
            5.11)Text1
            5.12)Text2
            5.13)Text3
          5.20)Sprite

但是，带有排序顺序覆盖的 dang 画布意味着文本绘制在视口蒙版之外！

任何提示将不胜感激！

【问题讨论】：

标签： unity3d user-interface

【解决方案1】：

如果您不限于这种层次结构，最简单的解决方案在于 UI 元素的顺序。

默认情况下，Canvas 中的 UI 元素从上到下呈现，因此如果您想在顶部绘制某些内容，只需将其移动低于层次结构中的其他元素即可。这似乎令人困惑，因为背景是层次结构中的第一个元素，但好吧..它就是这样;）

见UI.Canvas

元素的绘制顺序

画布中的 UI 元素的绘制顺序与它们在层次结构中出现的顺序相同。首先绘制第一个孩子，然后绘制第二个孩子，以此类推。如果两个 UI 元素重叠，则后面的元素将出现在前面的元素之上。

要更改显示在其他元素之上的元素，只需通过拖动来重新排列层次结构中的元素。也可以通过在 Transform 组件上使用以下方法从脚本中控制顺序：SetAsFirstSibling、SetAsLastSibling 和 SetSiblingIndex。

你的层次结构应该看起来像

Top Level UI (canvas)
|--GridList (image)
   |--Viewport (image w/mask)
      |--Content (image w/grid layout group) 
         |--ButtonPrefab
            |--Sprite
            |--Text1
            |--Text2
            |--Text3

【讨论】：

谢谢...我无法想象这是适合层次结构的顺序，而且我想我被覆盖读取旧 cmets 的内容所困扰。非常感谢您有时间回答！