GUIStyle border setting and scaled background textures

UI
1

I’ve been experimenting a bit with GUI.Label() in Unity 2.6 to render a background image with a border and text on top. The documentation says that the border values affect the number of pixels in the background image that won’t be scaled, but what I found in practice is that it will scale the background image to fit the Rect size first, then it will apply the border settings.

So if I had a 32x32 texture where I didn’t want the outer 4 pixels scaled, and I defined a GUIStyle named “customStyle” that contained this texture as the background image and all the border settings set to 4, it would look correct with this call:

GUI.Label( new Rect( 0, 0, 32, 32 ), “text”, “customStyle” );

But this call would scale everything except the outer pixel of the original image:

GUI.Label( new Rect( 0, 0, 128, 128 ), “text”, “customStyle” );

Is there something I’m doing wrong here? Or is this the way the border settings are supposed to work?

2

Okay, so the video quality is complete crap, but here’s a video I made showing that the background image scaling does work, and does respect the Border properties (Note that the background, while blurry, does scale) : http://www.youtube.com/watch?v=RNG4DIuxRqY

Having said that, I don’t know whether this behavior is different for Labels than for other elements, but surely there is a way to make it work.

.

3

Was that running in Unity 3.0? I saw Debug Utilities running in the Inspector, and have never seen that before.

But, yes, it is working correctly on your version. I’ll have to try some other types of GUI elements to see if I get different results.

4

No, that’s just an in-house tool we created to add watch variables and view and edit data while the game is running. It’s nice, but not Unity 3.0 nice :slight_smile:

I would suggest creating either a custom GUIStyle or trying the Box style to see if the behavior is as expected there. If that doesn’t point to an answer, I’ll see if I can duplicate the issue.

.

5

I haven’t completely verified it yet, but I think I know when I get the problem. It is when the Rect width and height are smaller than the image width and height. So my original example wasn’t correct, and I should have said when you have this Rect:

Rect( 0, 0, 16, 16 )

I’ll do some more experiments and see what I get.

6

OH! I ran into that before as well, and had completely forgotten about it. When I tried making a GUI skin for the first time, I ran into issues like that, and just started making the images bigger by default.

I never did any significant testing to find out the precise conditions that caused it, but I’d be willing to bet that you are on the right track.

.

7

I was able to confirm that border doesn’t work correctly when the Rect size is smaller than the image size. I exposed the Rect size as public variables in script and was able to see the problems start as soon as the Rect size became smaller than the image. It isn’t too bad in the beginning, but it will start to look like overlapping images if it becomes too small.

I guess the workaround is to just make different sized images, but it would be nice if Unity could handle it.

8

I agree. The workaround isn’t too painful, but at the very least this issue should be documented somewhere (forums don’t count).

.