Understanding GUISkin/GUIStyle BackgroundImage and Border

Questions & Answers
1

Hello All,

I am trying to start customizing the GUI in my Proof of Concept, and I’m having a hard time understanding exactly how the BackgroundImage works with a GUISkin/GUIStyle.

The border values for a particular GUIStyle indicate how much of the background image isn’t stretched, right? So you can do corner art? For instance, a value of 10 on the top and 20 on the left and right would mean that you can have 20x10 corner art pieces on the top-left and top-right?

So then, what happens to the middle? Does it just get stretched?

If I were to want some “woven” pattern that repeats every few pixels, would it simply get stretched?

Setting everything up is pretty well documented but I can’t find anything that explains this thoroughly enough for me – especially given that the documentation likens it to CSS (since the Background Image property in CSS behaves in no way like this, nor do the border properties).

Just looking for guidance! Thanks!

Edit: from some manual image manipulation / testing, it looks like my assumption about the middle (and the spaces between the corner-art) being stretched was correct.

I’m curious, if I did have a knot or chain tilable pattern for the spaces between the corner-art, would I be able to tell the GUIStyle to tile my image in any way? Could I do something similar for the center area, if I had a checker or paper pattern? I’m looking at the Necromancer GUI in the Asset store, and wondering if its nice paper BG gets stretched if the user creates an unusually horizontal Window?

2

Found this link which is some documentation confirming my suspicions as well, but I’m still seeing some weird behavior when setting my “Border” values. It seems I need to make them twice as large as I would think I’d have to…

It’d be great if we could get the actual images that went into making that example!

3

It appears to me that the middle does just get stretched – I know of no way to make it tile instead (short of drawing it in pieces yourself, of course).

The borders, like everything else, are affected by the GUI scale. I find I generally don’t need to worry about that, though; the border units are the same as pixels in the texture itself, so if you have 10x20 corner/border art in your image, then border values of 10 and 20 ought to do the trick.

What I do have to watch out for, though, is the case where my destination rect is actually smaller than the source image. In this case you can end up with the borders overlapping, and Unity doesn’t handle this very well.