Borders of rotated images look weird

The following screenshot is from my Game window, but it applies the same within my Iphone 13. I’m trying to build a custom button such as this:

Screenshot 2024-08-27 at 20.31.24
:

When it comes to drawing diagonals, I do see a jagging effect within the lines which are rotated (borders left and right).

I’ve already tried the below (Using inkscape):

  • Creating the image with different resolutions
  • Trying to work with SVG (Vector Graphics Package)
  • Played around with the image settings (generating mip maps, compression, format, max size…)
  • Using Canvas Pixel Perfect setting
  • Imported from Inkscape with Antialiasing 0 and antialiasing 3
  • Even used UI Toolkit, but I do not manage to achieve this shape.

But nothing seems to work. If I skew back the image to a parallel orientation it looks fine.

How those games with fancy UI’s manage to draw those kind of shapes meanwhile at the same time, they look cool across different devices resolutions?

Add some transparent pixels around your image.
image

Left image will rotate nicely, the right one will not

1 Like