Changing tiling origin for tiled UI image

When tiling an UI image, it always starts from the bottom left and the image gets tiled from there. Is there any way to change this, so the tiling starts on the top or right?

86544-tiling.png

I have tried mirroring the y axis or rotating by 180 degrees, and it indeed makes the tiling towards the opposite direction, but it screws with the anchoring and resizing so it’s no good.

Also interested in this! Any updates?

You can put the image component on a child and set it to stretch on x and y. Then if you rotate it, you should be okay.

It’s surprisingly simple, you need to change the local scale of the image

BottomLeft => (1, 1, 1)
BottomRight => (-1, 1, 1)
TopLeft => (1, -1, 1)
TopRight => (-1, -1, 1)

One way of doing it is to use a RawImage component instead of the Image component, set the Texture value (texture) to the sprite you are using for your Image component, and change the x and y coordinates of the UV Rect value (uvRect) to set the offset.


Also, the sprite needs to have the Wrap Mode (wrapMode) set to Repeat.

If you need to use the Image component specifically then please let me know and I will update my answer.