Game Development Reference
In-Depth Information
Stretch it, bend it
Now that we have mastered pinning our UI in place, how about some dynamic
resizing? Time to set our course straight and true,
Warp factor 5, Mr. Sulu
.
(Darn it! That's Star Trek, not very nautical is it?)
In a lot of UI designs, it is just not enough to have objects drawn in a particular
position; we want them to always fill a particular portion of the screen, say 50
percent of the width. In these cases, just having it in a fixed place is no good if the
screen resizes down below the width of the element we are trying to draw.
As an example, let's wipe out what we have done so far and build a health bar.
The requirements set down by our really critical graphics designer are as follows:
• It should always be centered at the top of the screen.
• It should have a 20-pixel space between the top of the screen and the
health bar.
• It should take up approximately 50 percent of the width of the screen on
all devices. (But I'm targeting Android; that's impossible! Far too many
resolutions to handle with any UI
)
• It should be 25 pixels high.
• It should fill from the left, with left being 0 and right being 100 health.
A simple request from our designer, but how do we achieve this in the new UI
without a lot of complicated scripting? Easy, with our Anchors.
Let's start by adding a
Slider
to a new scene; in the example code, I called it
Resizing
UI.
We'll add a
Slider
and then configure its properties to give it a health bar look and
feel (with my poor UX skills and lack of color coordination):
1. Add a new
Slider
to the Scene.
2. Expand the
Slider
control in the hierarchy and delete the
Handle Slide Area
(which will also delete its child
Handle
GameObject).
3.
Select the
Slider
and click on the
Handle Rect
property; if it says Missing
Rect Transform
, then hit
delete
(to clear the property as we have no handle).
