Game Development Reference
In-Depth Information
For this example, we create the following:
1.
An empty GameObject for the boundaries of the
Scrollable
area. I also
added an
Image
control (using one of the backgrounds from the UI Pack
we used earlier) to have a border around the image area for effect. Name
this GameObject
Scroll Border
and set its dimensions to 400x200.
2.
Add an
Image
and a child
Text
control for the header positioned above
the main
Scroll Border
(yes, you can place UI GameObjects outside of
their parents').
3.
Then add two
Scrollbar
controls to the right and bottom of the
Scroll
Border
. Resize the
Scrollbars
to fit, don't rotate them! Then set the
Scrollbar
Direction
appropriately for the Vertical or Horizontal nature of the bar.
For example, I set the Vertical bar to
BottomToTop
and the Horizontal to
the default
LeftToRight
.
4.
Add an Empty GameObject called
Scroll Rect
as a child to the
Scroll Border
and resize it to the inner dimensions of the
Scroll Border
. (Since my border
has a border image, I set it slightly smaller to the parent so the border will be
visible). This will be our
Scroll Rect
control but let's add its content child next.
5.
Add an
Image
as a child to the
Scroll Rect
GameObject; this is for the
content that you want to be scrollable. Make its Rect dimensions larger
than the parent (say 1024 x 448). I used the
Unity5 logo
image (provided in
the downloadable assets) as the
Source Image
for the
Image
component.
(The Unity Logo image is a 1024 x 448 image, far larger than the
Scroll Rect
dimensions of approximately 400 x 200).
6.
Now returning to the
Scroll Rect
GameObject, we add a
Scroll Rect
component, setting its
Content
property to the child
Image
GameObject we
created and also attaching the two
Scrollbars
to the
Scrollbar
properties of
the
Scroll Rect
(just drag them from the project hierarchy to the relevant
properties of the
Scroll Rect
component).
7.
Finally we add a UI
Mask
component and an UI
Image
component to
the
Scroll Rect
GameObject so we can only see the part of the image
underneath, that is within the boundaries of the
Scroll Rect
.
We have to add an
Image
for the
Mask
component to work as it works
with the
Graphics Raycaster
to only render the masked area.
The
Scrollbars
are completely optional of course as we can manipulate the
scrollable area either with the
Scrollbars
or just by touching and dragging within
the
Scroll Rect
area.