Building a Scrollable Viewport

The scrollable viewport

We will start by creating a clipped, draggable background, and then add linked scroll bars as shown in the following screenshot:

Draggable background

We want the player to be able to scroll on both axes. That means we need a background both larger and taller than the screen size. For this game, we will need quite a large environment to force him or her to scroll regularly. Let's create one that is twice the screen's size.

Perform the following steps to create the environment:

Select our Panel GameObject and perform the following steps:
1. Rename it as Viewport.
2. Set its Clipping parameter to Alpha Clip.
3. Set its Clipping Size to 1920 x 1080.
Add a Draggable Panel component to it by navigating to Component | NGUI | Interaction and perform the following steps:
1. Set its Drag Effect parameter to Momentum. We don't want the player to scroll out of bounds with the spring effect.
2. Set its Momentum Amount value to 10. Over 10, the background will continue scrolling too much on release.
3. Set...

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

NGUI for Unity

By : Charles Bernardoff (EURO)

NGUI for Unity

By: Charles Bernardoff (EURO)

Overview of this book

The scrollable viewport

Draggable background

NGUI for Unity

By : Charles Bernardoff (EURO)

NGUI for Unity

By: Charles Bernardoff (EURO)

Overview of this book

The scrollable viewport

Draggable background

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access