0
\$\begingroup\$

I have a small refresh arrow circle that I wanted to use for an indicator in which direction the tile gets rotated on click. After I rotated it by 180 under the rect Transform rotation Y to spin the opposite direction, it does not react anymore for OnClick events. Probably since we are technically clicking on the backside of the image. The non rotated version works, changing the rotation from 180 to 0 works as well.

Is there any way to get a flipped image working without duplicating the source image and flip it before assigning it to the button?

The scene is a simple screen space camera, one canvas with 2 buttons (having the same image source), one button has 180 under Y Rotation and the default EventSystem.

\$\endgroup\$
0

2 Answers 2

1
\$\begingroup\$

The canvas event system does not detect clicks on the backside of UI elements. So rotating by 180° on the Y-axis makes the button unresponsive.

But you can achieve the same effect by setting the Y-Scale of the RectTransform of the button to -1 (or -whatever its regular scaling is). The click detection will then still work as normal.

The drawback is that if you want to animate the flip and want it to look like a rotation and not like shrinking and growing, you might need to put a bit of effort into tweaking the animation curve to look more like a sine curve.

\$\endgroup\$
1
\$\begingroup\$

If I understand correctly you want to flip an image like this

Clockwise

Into one like this:

Counterclockwise

And you want to flip it, not to create an actual animation.

If my understanding is correct, all you have to do is to set the image scale multiplying X by -1. In my example, the first image has a scale of 1,1,1, while the second image has the scale set at -1,1,1. In case you want to flip in Y, then you go from scale 1,1,1 to scale 1,-1,1. Quite simple.

EDIT: I forgot to mention that this applies to the Button Rect Transform as well as any other image.

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .