Problem - you've got a material that looks good as a square, but you need it to be rectangular and stretching distorts it way too much.
 |  |
My initial solution was to add parameters the the material separated between x and y dimension and tweak it until it looked ok-ish. Unfortunately this was a terrible way to do it. It was frustrating to tweak and even with really precise numbers it still didn't look quite the way I wanted.
A better solution was to use a small texture with the appropriate 9 slice ratios and apply the material over top of that (previously it was just rendering the material over an empty image). Note that the material doesn't need to do any sampling of the texture, we're just using it to manipulate the mesh's UVs - this maintains the 9 slice properties on the mesh and lets the material stretch!
For this example I used a 16x16 solid white png and sliced it to minimize the center area since the material is an outline only. You may need a slightly larger template depending on your use case but the basic idea is to make sure that the area covered by the border regions should match up with your material.
 |  |
This works reasonably well for a quick and dirty way to make it work. Ideally I'd like to have access to the proper UV coordinates of the rect transform (In unreal you can get this with the UV2 coordinate set by default) but so far I haven't been able to find a way to get this data in Unity without doing the calculations on the CPU and forcing it in.
Comments