• TSO

Unity Tip: Improved UI Scaling

Something I see all too often in Unity games by small devs is poorly scaled UI, especially for border/background images. Below is an example from the inventory asset I've been working on. Note that all the images below are using the same sprite.

Here you can see a few problems with how the "Before" version is scaled. The most obvious of which is how the little shadowy bit in the corner is stretched out. Less obvious but still a problem is the light grey border; it's not only stretched so the top part is larger than the sides, but it's also inconsistent with the border on the smaller image on the left.

In the "After" version, you'll see that it's all scaled in a way to make both images look clean and consistent.

There's a very easy, but surprisingly under utilized solve. Open up the original sprite file in the Unity Inspector, then go into the Sprite Editor. Depending on your Unity version, you may have to download the Sprite Editor from the Package Manager. (Windows > Package Manager)

This is something you've probably seen but glossed over hundreds of times. The Border settings tells Unity how to tile your image when resizing it as a UI element. The corners remain as normal, middle edges are stretched/repeated (depending on what you pick later), and I'll be honest I'm not sure what happens to the center part. The point is we can use this to make our UI scale much cleaner than before.

Your corners can be as fancy as you want, but you'll want to keep the middle edges simple. Adjust the Border numbers to whatever you need, then let's head back to the UI Image element.

The last step is to change the Image Type to either Sliced or Tiled. The only difference is what Unity does to the middle edges. Oh, and make sure to change Width and Height, not Scale, otherwise it doesn't work.

Just for fun, here are some extra examples I made to give some more ideas of what can be done here.

582 views0 comments