I have made a custom texture for a Button. I’ve set it to Box and set the margins, and now it nicely grows and shrinks with the button with a constant border thickness. However, that border is too thick. The only way I’ve found to make it thinner, is by saving the texture at a lower resolution, which makes the texture unsharp at higher resolutions. How can I change the thickness of the border of the Button without making the texture very small?
You’ll have to go back to the app you created the texture in and change the border width there. The point of the Box mode is that the regions outside of the margin always render at a constant size.
There is another way that I consider to be more of a nasty hack in your situation, but you can also change the button’s render transform (down at the bottom in the details panel). The transform is applied to the whole thing, so if you scale the button to 0.5 the original size and double the text size in the button to make up for reduction in size, the border will essentially be half as thick while the overall button size stays roughly the same.
How would I do that? The only way I’ve found to change the border width is by reducing the number of pixels in the border in Photoshop. But that means that the border becomes blurry on high resolutions.
That just means your textures are too low-res to begin with. Try to decide on the biggest screen resolution you plan to support and build your art assets to match that, taking into account how much screen space a given UI element is supposed to take up in typical scenarios.
But when I increase the resolution of the art assets, the borders become wider instead of sharper. How can I increase the resolution of the art assets without changing their size on screen?
Only if you scale the border with the resolution and then keep it like that, which you wouldn’t do because it defeats the purpose of what you’re trying to achieve. You just increase the size of the image so that you have more pixels to work with, and then you reduce the width of the border until you’re satisfied. Look at the two buttons in the image below.
Their borders are the same width even though the one on the bottom is 4 times as large on either side. On way to achieve that result is to scale the smaller one up 4x and then divide the border width by 4 so that you end up with a border the same width as before, but on a larger image.
As an aside, I would strongly suggest to author UI backgrounds and icons as vector graphics because it allows for a more non-destructive workflow and scaling things becomes trivial while quality always stays at 100%.
