How to create a "back" side of a canvas UI element

Question

I'm using the new 4.6 UI, and trying to create canvas UI elements that can be "flipped" to show a back side. I'm using the Canvas Render Mode "Screen Space - Camera" with a perspective camera.

Unfortunately, if I simply rotate an existing element 180 degrees, I just see an upside-down, mirrored rendering of the front side. The rendering order of the child elements is not reversed, so a child element at the "back" is still obscured by elements at the "front" (even though the entire parent has been flipped).

Is there any way to create this front/back effect using the Canvas UI?

Answer 1

Best Answer

Answer by AlwaysSunny · Nov 08, 2014 at 12:23 AM

You must want to see the flipping occur via animation, right? Otherwise you'd just swap the contents of your group-o-elements.

Well, at the exact moment all the elements are facing the camera edge-on, for all intents and purposes, the elements become invisible. During that frame, swap the contents of your group to an identically-sized "B-side" alternate version.

Add comment · Share

Answer 2

Answer by Umai · Nov 25, 2014 at 04:30 AM

I'm currently investigating this myself. In my case, I am implementing a "card" that can be flipped over, and then back. So the backside should have another surface. I will use an Image or Button for this. For now this seems to do the trick, but I don't know if it will work well down the line:

In the flip animation, add a keyframe at rotation of 90 degrees. There you can add another image. Also, set scale to -1 depending on what axis you rotate the image. I flip the card over on the Y axis, so I needed to invert the scale of the X axis to get the backside of the card to not be mirrored to the viewer.

Add comment · Show 2 · Share

huggaida · May 19, 2015 at 08:40 AM 0

Share

Solved this by adding a standart material (unity 5) to a material slot of the component of GUI button. At the top of the standart material settings in pulldown menu choose FADE mode. Supports .png with opacity. Back side of the element bacome invisile.

huggaida · May 19, 2015 at 08:41 AM 0

Share

Sorry for my English.

How to create a "back" side of a canvas UI element

2 Replies

Follow this Question

Related Questions