Rotated parent GOs make sub GOs relative draw layer wrong?

Questions
#1

Not sure how to describe this and not sure how to solve this.

I’m making a card game example and using go.animate euler.y to flip the cards over. That works right, but as the cards rotate, the relative z distance of each layer seems to behave improperly. This is with an orthographic camera.

The card_root is being the one rotated. I’d expect each sub GO to still draw the same as if they were constantly pancaked but that appears to be naive thinking. What’s going wrong?

#2

Happens with just sprites on a single GO too? WTF? In this only the white background is at -1 everything else is at 0 Z.

#3

GUI nodes work as expected but need this to work for GOs.

#4

I realized that animating the scale.x instead would probably work, and it does. I’d still like to figure out the other issue as it would be necessary to make 3D card games like Hearthstone to work right.

#5

Hello!

I think the issue boils down to how draw order is calculated inside the engine; based on Z position for the component. I tried to draw an image to explain it as simple as I can for this situation:

rotated_draw_order
rotated_draw_order.png841×1365 27.2 KB

  1. First image shows a basic setup of 3 gameobjects+sprites, shown sideways here to illustrate how they “layer” on top of each other. (They all have a different Z position indicated by the spacing between them.)
  2. The second image show you the same setup from above, Z axis pointing towards the eye/camera. Here the draw order is as expected, back to front; A, B, C.
  3. In the third image, the parent object has been rotated by 45 degrees. This means each gameobject (indicated by the small red/black dot/cross) will have a different world position than before… Now focus just on the Z value, which is used by the engine to determine in what order the gameobjects/components should be drawn. As you can see the Z value for C is less than both A and B, meaning it will be drawn first.

Sorry for the quick and dirty image, but hopefully it clears up some confusion. :slight_smile:

But back to actually trying to solve your issue… We discussed a couple of different approaches , but I think the quickest way might be to do something similar to what I described in this post: The label component blink when rotation GO over Y axes (SOLVED)

It should work for orthographic projection as well, as far as I know.

3 Likes
#6

What I can see in that example is

  1. Enabling all render script features related to depth testing
  2. Drawing each “layer” of card elements on their own render predicate

I put my test card into that project, it seems like it doesn’t like multiple sprites being drawn together. Maybe putting each element into their own predicate would work to fix that?

Hmm, that didn’t work. I remember this problem before and I think the “solution” back then was to disable depth testing…

2018-07-26%2009_03_35-Window
2018-07-26 09_03_35-Window.png719×396 8.67 KB

Yeah it lets transparency work but also breaks z order obviously… what do?