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:

1. 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.

2. 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...