Game Development Reference
In-Depth Information
4. Set the
Width
of the
ScrollRectArea
to
300
, this will form the area of the
screen the user can interact with.
5. With the
ScrollRectArea
selected and add a
Scroll Rect
component to it by
navigating to
Add Component
|
UI
|
Scroll Rect
.
6. Add another
Empty
GameObject as a child to the
ScrollRectArea
and
rename it to
Content
.
7. Set the
Width
of the
Content
GameObject to
1000
, which is several times
larger than the
ScrollRectArea
and larger than the screen width (make it
bigger if you wish).
8. Select the
Content
GameObject and add a
Horizontal Layout Group
by
navigating to
Add Component
|
Layout
|
Horizontal Layout Group
.
9. Add several
Images
as children of the
Content
GameObject and set them to
different colors or apply different source images to tell them apart.
10. Finally, select the
ScrollRectArea
GameObject and drag the newly created
Content
GameObject from the hierarchy to the
Content
property of the
Scroll Rect
(or select it using the discovery button to the right of the
Content
property of the
Scroll Rect
component).
This should result in the following display:
When run, the user can swipe or click and drag within the
ScrollRectArea
(identified with the
Rect Tool
selection area), which will move the
Content
area
in the direction of the user's movement but not beyond the viewable area of the
Scroll Rect control's
Rect Transform
.
We'll make a bigger example with the Scroll Rect in
Chapter 3
,
Control, Control, You Must Learn Control
