Image Borders (Inventory Slot) not consistent in UI

I am on the section of beautifying the UI and trying to add my own custom images to the UI. I have an issue where the borders of my image are thick on end, while thinner on another end.

My intended final result is something like this for the inventory slots. A box/slot with a thin black border.
Screenshot_12

My first step was to create the image in photoshop.

After importing and changing it to a sprite in Unity, I went on to the sprite editor and sliced the image.

My final result though is somewhat odd and produces the following.

On the image properties I have toggled between Sliced and Simple. Simple option produced better results, with less thicker borders on some of the slots, but still no everybox has the same border thickness.

Hi Vladimir,

Make sure you use rounded pixel coordinates in the Rect Transform and everywhere where you use UI elements because your screen can display full pixels only.

2 Likes

I am not sure I understand what you mean Nina.
Am I looking for something in
the rect transform of my Inventory Slot prefab?
Screenshot_18

Set Pos X and Pos Y to -60 and -21 respectively.

1 Like

I still had the same issue when I changed to rounded figures in the Rect Transform.
But then I got more luck when I started tweaking / messing around with the Cell Size and Spacing values in the Parent object of the Inventory Slots (The Grid Layout Group)

Screenshot_19

This is producing a much cleaner look around the borders now.

I will make sure all mu UI elements have rounded figures Nina.
Thanks.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

Privacy & Terms