Greetings! I’m creating a 2d grid based game which uses a Screen Space Overlay UI during game play to display information while the game is being played. In this UI, I’d like to create “cards” that will sit in the dock during the game but will be draggable to dialogs which I’ll present when game events occur.
I’m using a sprite to render the card graphics and then two TextMeshPro elements to represent the card title and description text. The card text is always rendered on top of all other elements in the game, even overlapped cards. I’ve seen other posts that say in Screen Space Overlay, this is the default behavior of Unity’s renderer but I’ve tried falling back to legacy UI “Text” and I notice it still does the same thing.
What is the best way to add text to a prefab which will render the text only on the element, not in front of all elements, like a game object?
The options I can think of are:
Move the cards into “World Space Camera” but then I will be constantly updating their transform position to simulate them being like UI elements. I don’t know if this is a good way to go.
Don’t add text to cards, instead make them part of the sprite graphic.
Redesign the game so that cards will never overlap.
Is there a better way to handle text on overlapping UI objects?
Three (3) primary ways that Unity draws / stacks / sorts / layers / overlays stuff:
In short, as far as the Standard Rendering Pipeline,
The default 3D Renderers draw stuff according to Z depth - distance from camera.
SpriteRenderers draw according to their Sorting Layer and Sorting Depth properties
UI Canvas Renderers draw in linear transform sequence, like a stack of papers
If you find that you need to mix and match items using these different ways of rendering, and have them appear in ways they are not initially designed for, you need to:
identify what you are using
search online for the combination of things you are doing and how to to achieve what you want.
There may be more than one solution to try.
For instance, you may even use multiple co-located cameras (along with different Layers and LayerMasks drawn to different-depth Cameras) to more-explicitly control apparent draw ordering.
Additional reading in the official docs:
And SortingGroups can also be extremely helpful in certain circumstances:
Other rendering pipelines may have other ways of layering (HDRP and URP). Go see the latest docs for details.
There’s lots of third party open source packages available as well, such as this:
I’m not sure that render ordering is the issue that I’m facing, although I might just not understand. The problem is that TextMeshPro seems to always render above all other objects regardless of z depth, order in layer, stack of papers method, or any other consideration. It really makes no difference, when using UI camera, what the “stack of papers” rendering order is, TextMeshPro always renders on top.
Meanwhile, I suspect the answer lies in the above links I already posted, or at least enough info is in there to guide you to the engineered solution you need for your card game.
NOTE: you may want to spend some time with a few card game tutorials.
Everything related to “flat things with information on them” in a game is EXTREMELY well-covered ground.
I’ve reviewed the links you provided, and I’m grateful for that. It does pertain to rendering, which wasn’t clear to me initially.
For my objects to occlude one another, the ‘order in layer’ must be explicitly set for the TMP object. Thus, for card 2 to overlap card 1, both the sprite renderer and the TMP ‘order in layer’ must be set higher on card 2. I hadn’t realized that TMP also had an ‘order in layer’ attribute.
You’re welcome! It’s definitely tricky because there’s ten billion ways to go about it.
Let me blow your mind one step further: there are actually TWO broad flavors of “how to get TMPro text onto the screen.”
One is TextMeshProUGUI and one is TextMeshPro
The former lives under a Canvas and is rendered by a CanvasRenderer, while the latter is a regular old 3D object that is rendered by a MeshRenderer
Of course within a Canvas it can be rendered as Screen Overlay, Camera Overlay, or World…
So yeah, that’s why I post the big stack of info and linkies and you kinda really have to live it and love it yourself, which it sounds like you have done.
