Scrollable text

Let's now create some welcome text that scrolls horizontally like this:

Scrollable text

In order to achieve this, we will need clipping, which consists of displaying only a specific area of a panel. It can be set up using the Clipping parameter of UIPanel.

We'll be working on the main menu again, so let's show it in the editor: disable our UI Root | Options GameObject, and enable our UI Root | Options GameObject.

Before we configure the panel's clipping, we must create the welcome text box.

Textbox

Let's use our main menu's background as the base for this new welcome textbox:

  1. Select our Main | Background GameObject and duplicate it with Ctrl + D.
  2. Rename this new child to Welcome.
  3. Drag our new Welcome GameObject inside the UI Root GameObject.
  4. Change its Transform position to {0, 500, 0}.
  5. For its attached UISprite component:
    • Change Sprite to the Window sprite
    • Change Size to 800 x 100
    • Set Depth to 1
  6. Select the Welcome | Stripes GameObject and delete it.
  7. Select our Welcome | Border GameObject, and for its UISprite component:
    • Change Sprite to the Window sprite
    • Set Depth to 2

Now that we have our welcome textbox, let's add the scrolling text.

Welcome label

We can create the new label that will display the welcome message:

  1. Select our UI Root | Welcome GameObject.
  2. Hit Alt + Shift + N to create a new empty child GameObject.
  3. Rename this new empty child to Text. It will be our label container.
  4. With Text selected, hit Alt + Shift + L to create a new label.

So, we have our label. Let's set up its attached UILabel component:

  1. Change Text to the following:

    Welcome! You can change language, subtitles, volume, and enter your name on the Options page.

  2. Set Color Tint to {R: 255, G: 230, B: 140, A: 255}.
  3. Set the following values for its other parameters:
    Welcome label

Now, set our Text | Label GameObject's Transform position to {400, 0, 0}. Your welcome text should now be displayed on the right-hand side of the textbox:

Welcome label

Let's animate it to move towards the left until it is completely out of the textbox. Positioning the tween towards {-2400, 0, 0} will do the trick:

  1. Select our Text | Label GameObject.
  2. In the Inspector view, click on the Add Component button.
  3. Type position to search for components with that word.
  4. Select Tween Position and hit Enter or click on it with your mouse.

Now, configure TweenPosition like this:

Welcome label

Hit Unity's play button. Our text scrolls towards the left-hand side and does that indefinitely. No clipping is set up, so it is visible even outside our textbox. Let's correct that.

Clipping

For now, our scrollable text is visible even outside the message box. We'll use clipping to make sure the text outside the box's bounds is hidden. The clipping option is available on panels, thus we need to add the UIPanel component to our T ext container:

  1. Select our Welcome | Text GameObject.
  2. In the Inspector view, click on the Add Component button.
  3. Type panel to search for components with that word.
  4. Select the NGUI Panel and hit Enter or click on it with your mouse.

We've added the UIPanel component to our Label container. Configure it like this:

Clipping

With this configuration, the panel will only display its content within a box of 760 x 100 pixels. Since we have set Clipping to Soft Clip, there will be a fade out of the content over 4 pixels. We have set Depth to 1 to make sure it is displayed over both our main menu and options window.

Hit Unity's play button. That's it! The text seems like it's contained inside the box!

Now, we can see how we can easily add a close button on each window.

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

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