Game Development Reference
In-Depth Information
First, we set the parameters for the
Border
attribute. These parameters will offset the
pixels of the current UI graphics from
0
to the number that we will assign. For example, if
we want to draw a rectangular window, which is 320 pixels in width and 240 pixels in
height, and we set the borders,
Left
to
27
,
Right
to
27
,
Top
to
55
, and
Bottom
to
96
,
this will tell Unity
GUIStyle
to always draw the graphics from pixel
0
to pixel
27
on the
left-hand side with the same scale as the source texture. What will happen from pixel 28?
Basically, it will repeat pixel 27 until it hits the right-hand side border, which is also set to
27 pixels from the right-hand side. So, this means that we tell
GUIStyle
to draw graphics
from the source texture, that is from pixel 0 to pixel 27, and then repeat the texture from
pixel 28 to pixel 293, then switch back and draw pixel 294 to pixel 320 from the source
texture, which is the offset of 27 pixels from the right-hand side. This also applies to the
top and bottom borders, as we can see on the left-hand side of the preceding figure.
From this concept, we can save a lot of memory because instead of using a 320 x 240
pixel image, we just use 54 x 151 pixels. However, in some cases, we don't want any re-
peating pixels for our UI such as fixed button graphics—for example, our
Exit Button
style—or any fixed texture, and so on, as we can see in the following figure:
We can also set the
Fixed Width
and
Fixed Height
properties in
GUIStyle
to match our
image size. For instance, we have the
Exit Image
button, which is 26 pixels wide and 22
pixels high. So, we just set the
Fixed Width
value to
26
and
Fixed Height
to
22
. On the
other hand, we can also set either
Fixed Width
or
Fixed Height
in
GUIStyle
—as we
already did in our
Tab Button
of
Custom Styles
—as we can see in the following figure:
