The scrollable viewport

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

The scrollable viewport

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 its Scale parameter to {1, 1, 0} to enable X and Y scrolling.
  3. Attach a Drag Panel Contents component to it by navigating to Component | NGUI | Interaction.
  4. Attach a collider to it by navigating to NGUI | Attach a Collider, and set its Size to {3840, 2160, 1}.

Now that our Draggable Panel is set up, let's add a tiling background as shown in the following screenshot:

Draggable background
  1. Open the Widget Tool wizard by navigating to NGUI | Create a Widget. Then perform the following steps:
    1. If the Atlas field is set to None, drag the SciFi Atlas prefab in it by navigating to Assets | NGUI | Examples | Atlases.
    2. Select the Sprite template.
    3. Select the Honeycomb sprite.
    4. With our Viewport selected; click on the Add To button.
  2. Select the new Sprite (Honeycomb) GameObject and then perform the following steps:
    1. Rename it as Background.
    2. Set its Sprite Type to Tiled.
    3. Set its Color Tint value to {0, 40, 40, 255}.
    4. Set its Depth value to 0.
    5. Set its Dimensions to 3840 x 2160.

Click on the play button. That's it, we now have a scrollable viewport. You can drag the background by dragging your mouse while clicking.

Linking scroll bars

Let's add scroll bars to know where we are on the viewport. They must be on a separate panel rendered over our viewport, so that they won't move with the draggable background. Perform the following steps to add the scroll bars:

  1. Select our Anchor GameObject.
  2. Create a new child with Alt + Shift + N and rename it as UI.
  3. Add a Panel component to it by navigating to Component | NGUI | UI, and set its Depth to 1 so that it can be displayed over the viewport.
  4. Open the Widget tool wizard by navigating to NGUI | Create a Widget. Then perform the following steps:
    1. Select Scrollbar for the Template field.
    2. Select Dark sprite as Background.
    3. Select Highlight sprite as Foreground.
    4. Select Horizontal for Direction.
    5. With our UI GameObject selected, click on the Add To button.
  5. On our Widget Tool wizard window, select Vertical for Direction. With our UI GameObject selected, click on the Add To button.

    We have created both our horizontal and vertical scroll bars at the center of the scene as shown in the following screenshot:

    Linking scroll bars

    Now, we need to place them correctly and adjust their size to fit the entire screen.

  6. Select the vertical Scroll Bar GameObject and rename it as VerticalScrollbar.
  7. Attach an Anchor component to it by navigating to NGUI | Attach and perform the following steps:
    1. Drag our Viewport GameObject in the Container field.
    2. Set its Side parameter to TopRight.
    3. Set its Pixel Offset to {-11, 0}.
  8. Select our Background GameObject from VerticalScrollbar. Then perform the following steps:
    1. Set its Color Tint to {130, 255, 245, 110}.
    2. Set the Center coordinates of Box Collider to {0, -540, 0}.
    3. Set the Size of Box Collider to {22, 1080, 0}.
  9. Attach a Stretch component to it by navigating to Component | NGUI | UI.
    1. Set its Style parameter to Vertical.
    2. Set its Relative Size values to {1, 0.983} in order to leave space for our horizontal scroll bar at the bottom of the screen.
  10. Select the Foreground GameObject from VerticalScrollbar, and set its Color Tint to {0, 255, 128, 255}.

    Our vertical scroll bar is configured. Let's do the same for the horizontal scroll bar.

  11. Select the horizontal Scroll Bar GameObject, and rename it as HorizontalScrollbar.
  12. Attach an Anchor component to it by navigating to NGUI | Attach. Then perform the following steps:
    1. Drag our Viewport GameObject into the Container field.
    2. Set its Side parameter to BottomLeft.
    3. Set its Pixel Offset to {0, 11}.
  13. Select our Background GameObject from HorizontalScrollbar and perform these steps:
    1. Set its Color Tint to {130, 255, 245, 110}.
    2. Set the Center coordinates of Box Collider to {960, 0, 0}.
    3. Set the Size of Box Collider to {1920, 22, 0}.
  14. Attach a Stretch component to it by navigating to Component | NGUI | UI, and set its Style parameter to Horizontal.
  15. Select the Foreground GameObject from HorizontalScrollbar, and set its Color Tint to {0, 255, 128, 255}.

Good. Both our horizontal and vertical scroll bars are set up. Now, we need to assign them to our scrollable viewport by performing the following steps:

  1. Select our Viewport GameObject.
  2. Drag our HorizontalScrollbar GameObject from UI to the Horizontal Scroll Bar field in UIDraggable Panel.
  3. Drag our VerticalScrollbar GameObject from UI to the Vertical Scroll Bar field in UIDraggable Panel.
  4. Change the Show Scroll Bars parameter to Always.

Click on the play button. That's it. Our scroll bars can be used to scroll, and they indicate where we are on the viewport as we scroll. Your hierarchy should be as shown in the following screenshot:

Linking scroll bars

Now, let's add keyboard scrolling.

Keyboard scrolling

For this game, scrolling with the keyboard is important. In order to do so, we will create a custom script that will force our scroll bars to move depending on the pressed key. Select our Viewport GameObject, and attach a new KeyboardScroll.cs script to it. Open this new script, and declare the required variables and the Awake() method:

//We need the Scrollbars for keyboard scroll
UIScrollBar hScrollbar;
UIScrollBar vScrollbar;
public float keyboardSensitivity = 1;

void Awake()
{
  //Assign both scrollbars on Awake
  hScrollbar = GetComponent<UIDraggablePanel>().horizontalScrollBar;
  vScrollbar = GetComponent<UIDraggablePanel>().verticalScrollBar;
}

Okay, we have both of our scroll bars on Awake(), and a float value for sensitivity.

Now, let's check the horizontal and vertical input axes at each frame, and change our scroll bars' values consequently:

void Update()
{
  //Get keyboard input axes values
  Vector2 keyDelta = Vector2.zero;
  keyDelta.Set(Input.GetAxis("Horizontal"), Input.GetAxis("Vertical"));
  //If no keyboard arrow is pressed, leave
  if(keyDelta == Vector2.zero) return;
  //Make it framerate independent and multiply by sensitivity
  keyDelta *= Time.deltaTime * keyboardSensitivity;
  //Scroll by adjusting scrollbars' values
  hScrollbar.value += keyDelta.x;
  vScrollbar.value -= keyDelta.y;
}

Save the script and click on the play button. You can now scroll using the keyboard arrows. You may also adjust the Sensitivity parameter in the Inspector window as you see fit.

Now, it's time to create draggable barriers that we can drop inside our Viewport GameObject.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.227.72.212