Scrollable text

Let's add a welcome textbox with instructions for the user. This text will be scrollable using the mouse wheel or a simple click-and-drag. It will look as shown in the following screenshot:

Scrollable text

At the start, it will scroll automatically. Let's create it now:

  1. Select our Nickname container GameObject, duplicate it by pressing Ctrl + D.
  2. Rename this new duplicate as Help.
  3. Select this Help GameObject and perform the following steps:
    1. Drag our Title GameObject in the Container field in its UIAnchor.
    2. Set its Side parameter in UIAnchor to Bottom.
    3. Set its Pixel Offset in UIAnchor to {0, -50}.
  4. Attach a Panel component by navigating to Component | NGUI | UI:
    1. Set its Depth to 1.
    2. Set its Clipping parameter to Alpha Clip.
    3. Set its Clipping Size to 440 x 85.
  5. Attach a Collider object to it by navigating to NGUI | Attach and set its Size to {440, 85, 0}.
  6. Delete the Input GameObject from Help.
  7. Select our Label GameObject from Help and perform the following steps:
    1. Change its Font to SciFi Font – Normal.
    2. Remove its UIAnchor component.
    3. Set its text to:
      Welcome!
[HIT RETURN KEY]
[HIT RETURN KEY]
You can Select one of two [AAFFFF]Powers[FFFFFF]:
[AAFFAA]Bomb[FFFFFF]: Explodes all enemies at once
[AAFFAA]Time[FFFFFF]: Reduces Time speed for 10 seconds
  8. Attach a Tween Position component to it by navigating to Component | NGUI | Interaction. Then perform the following steps:
    1. Set its From parameter to {0, -50, 0}.
    2. Set its To parameter to {0, 20, 0}.
    3. Set its Duration value to 1.5.
    4. Set its Start Delay value to 3.
  9. Set its Transform position to {0, -50, 0}.
  10. Select the Background GameObject from Help and perform the following steps:
    1. Set its Dimensions to 440 x 85.
    2. Set its Color Tint to {150, 255, 255, 255}.

Click on the play button. We now have a welcome text that scrolls automatically by changing its Y coordinate inside a clipped Panel. Let's enable the scroll wheel and mouse drag on this scrollable text:

  1. Select our Help GameObject.
  2. Attach a Drag Object component to it by navigating to Component | NGUI | Interaction. Then perform the following steps:
    1. Drag our Label GameObject from Help to the Target field.
    2. Set the Scale to {0, 1, 0} to limit to vertical scrolling.
    3. Set the Scroll Wheel Factor value to 1.
    4. Check the Restrict Within Panel Boolean.

Click on play. You can now drag the text label manually with either a left-click and drag or the mouse wheel. The Box Collider component on the Help GameObject detects mouse events, and the UIDrag Object reacts accordingly by changing the Y position of our Label.

We had to add a UIPanel component to the Help GameObject in order to restrict movement within the clipping's bounds.

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

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