In this chapter, we will create a new scene and build a functional scrollable viewport in which we can drop objects that will stick to it. We will add interesting features such as scroll bars and keyboard scrolling with arrows.

This scrollable viewport will be the base of our game from the previous chapter. So, from here, the user will become the player. The idea is that the player can scroll and drag barriers on a viewport, which will take a few seconds to build. Enemies will come down from the top of the screen. If an enemy touches a barrier, he or she will be destroyed along with the barrier—but we will deal with enemies in Chapter 7, Creating a Game with NGUI.

The more barriers there are on the scene, the longer the building process will be for the future barriers— this is the same idea with the barriers' cooldown.

Preparing the Game scene

We will need to have our GameManager and Notification GameObjects as prefabs for this chapter.

From our Menu scene, create these two prefabs by dragging them separately in the folder of your choice in the Project view.

Now, let's create a new scene with Ctrl + N and perform the following steps:

1. Press Ctrl + S to save it, and enter Game as the scene's name.
2. In our new scene, delete the Main Camera GameObject. We won't need it for this scene.
3. Drag our GameManager prefab from the Project view into the Hierarchy view.
4. Open the UI Tool wizard by navigating to NGUI | Create a New UI.
5. Add a new Layer named Game.
6. Select this Game layer for the Layer parameter in our UI Tool wizard.
7. Click on the Create Your UI button.
8. Select our new Camera GameObject, and set its Background Color to R: 0, G: 0, B: 0, and A: 255.

   Note

   Make sure your Color selector popup is in the RGBA values and not HSVA. This can be done by using the button next to the Sliders option when you click on a Color parameter.

9. Select our UI Root (2D) GameObject and then perform the following steps:
   1. Set its Scaling Style parameter to FixedSize.
   2. Set its Manual Height to 1080.

Ok, our scene and UI are ready. Your UI Root (2D) script should be as shown in the following screenshot:

Let's start creating our scrollable viewport.