0
\$\begingroup\$

I'm currently working on the credits of our game. For this I'm using multiple elements in a canvas:

enter image description here

I want the order that these elements are drawn in to be as follows, I gave them a z-value based on this:

 Z    Object                             Object type
=========================================================
 0    Text (The actual credits)          Text
---------------------------------------------------------
-1    Hider (Green for demonstration)    Sprite
---------------------------------------------------------
-2    Divider (The grey line)            Sprite
-2    Gametitle                          Text

The camera has a z-value of -10. The canvas is in "Screen Space - Camera" render mode.

But for some reason Unity is not drawing these items based on these Z-values:

enter image description here

As you can see, the Divider is drawn over Text, but Text is above Hider and Gametitle. Why is this happening and what can I do so the credits get properly drawn?

\$\endgroup\$
  • 1
    \$\begingroup\$ Usually the camera is on the negative z-axis, looking along the positive z direction, so higher z values are further away. That would put the text behind the divider. Did you change your camera position? \$\endgroup\$ – DMGregory Jan 7 '19 at 1:50
  • \$\begingroup\$ @DMGregory, No, I didn't change anything to the camera. It's z-value is -10. \$\endgroup\$ – Bassie-c Jan 7 '19 at 18:00
  • \$\begingroup\$ You should be using an image instead of a sprite shouldn’t you? \$\endgroup\$ – Ed Marty Jan 7 '19 at 23:46
  • \$\begingroup\$ @EdMarty, yeah, yeah, I shoud! This has solved the problem! Thank you \$\endgroup\$ – Bassie-c Jan 8 '19 at 13:54
1
\$\begingroup\$

Use the canvas as the whole screen GUI. Under the canvas use a panel, that cover your needs and place the texts in it, where the order of the elements goes bottom to top. The lower the element the later it will be rendered. Also keep in mind that your Canvas rendering mode is need to be in Screen Space - Overlay for this. If you still want to do Z ordering it won't work till you change Canvas rendering mode to Screen Space - Camera. I hope it helps.

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ thank you for your answer. Using this panel Gametitle will indeed be drawn over Text, but Text is still over Hider. \$\endgroup\$ – Bassie-c Jan 7 '19 at 18:14
  • \$\begingroup\$ Also, what do you mean exactly with using the canvas as whole screen GUI? \$\endgroup\$ – Bassie-c Jan 7 '19 at 19:16
  • \$\begingroup\$ So, i want to understand the problem fully. Isnt it has to shown over the hider, and not under? I find out that some people use separated canvases for separated UI elemnts sometimes, and forgot about the panels. It was just a suggestion, that use one canvas and place Panels on it. Sorry for the confusion! \$\endgroup\$ – steknika Jan 15 '19 at 8:03
  • \$\begingroup\$ A. No worries, you answer did help me in solving it, as I mentioned in my own answer. B. I also understand your confusion about what I wanted. Text scrolls up by script. I wanted it to move up till it reached Divider and then dissapeared. The idea was that Hider would hide Text (and actually be black), and Divider and Gametitle are both drawn over it. Didn't add that explicity to my question, because I was afraid it would obscure the actual question I was having, which was why this was happening. \$\endgroup\$ – Bassie-c Jan 15 '19 at 13:01
1
\$\begingroup\$

Credits for this idea go to @EdMarty, he placed a comment on the question.

Why exactly I'm not sure, but apparently the sprites (2D game-objects) don't work well together with texts (UI game-objects). As explained by @DMGregory in a comment:

The reason is that SpriteRenderers predate the UI system — they're rendered by the usual camera pipeline. Then the UI Canvas and its UI-specific renderers like Images draw as their own group.

I replaced the the sprites (Hider and Divider) with images (UI game-objects). I also modified the hierarchy of the objects in the order they need to be drawn (the lower the later rendered) as was described in @steknika's answer. (But I did not use a panel).

enter image description here

This has fixed the issue and the elements are now drawn in the right order.

enter image description here

| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.