Click or drag to resize
Introduction to HyperTextStyles

In this section, you will learn the basics of creating HyperTextStyles to use with HyperText components.

This topic contains the following sections:

In addition to the ability to insert interactive links into text, HyperText components can also make use of powerful HyperTextStyles objects. While HyperTextStyles enable a multitude of features, this tutorial will familiarize you with the basics of creating and managing styles.

Tutorial

Prepare the Scene

  1. Follow steps 1-6 of the Prepare the Scene section of the HyperText Basics Tutorial to create a HyperText object in a new scene.

  2. In the inspector for the HyperText component, find the Styles field and press the Create New button to its right. Enter a file name in the dialog box that appears and press Save to save a new HyperTextStyles object in your project.

    Note Note

    Now that a HyperTextStyles object has been assigned to your HyperText component, notice that the inspector fields for Font Style, Font Size, Line Spacing, and Color each have a checkbox and appear to be faded out.

  3. Duplicate the selected HyperText object. Your hierarchy should now also have an object named HyperText (1)

  4. Set the Pos Y value on the Rect Transform for HyperText to 30 and set it to -30 on HyperText (1).

  5. Select both HyperText and HyperText (1) and set the value of the Horizontal Overflow and Vertical Overflow fields in the inspector to Overflow.

    Note Note

    Like the built-in Text component, HyperText components support multi-object editing.

Edit Styles

  1. Press the Select button that now appears to the right of the Styles field in the HyperText inspector to select the new style sheet.

  2. In the HyperTextStyles inspector, position your cursor over the label of the Font Size field and click and drag the Left Mouse Button left and right. Notice that the font size on both HyperText objects changes at the same time.

  3. The Font Size label should now be highlighted blue in the inspector to indicate it is the currently active control. Press the Tab key twice so the b (bold) button is highlighted next to the Default Font Style label. Press the Space key to toggle bold on and off. Notice that the font face on both HyperText objects stays in sync. Leave bold turned on.

    Note Note

    Like all of Unity's built-in components, all inspectors in the HyperText package support keyboard-based navigation.

  4. In the Default Link Style section of the inspector, press the i (italic) button and notice that the link text (Attack and Defend) on both HyperText objects inherits the default style (bold) and applies italics as well.

  5. In the Default Link Style section of the inspector, change the value of the Normal Color field and notice that the color of the links changes in real-time.

Override Styles

  1. Select the HyperText (1) object and click the checkbox next to the Font Style label. Notice that the control now becomes active, the default (bold) style is no longer applied to this instance, and a warning icon appears to the right of the field in the inspector.

    Note Note

    Move your mouse over the warning icon and notice the tooltip tells you that the font style is now overridden by the setting on this HyperText instance. Tooltips on labels and icons in the inspector convey useful information throughout the HyperText package!

  2. With HyperText (1) still selected, click the checkbox next to the Font Size label. As with the Font Style control, this control is now active and displays a warning icon. Click and drag left and right on the Font Size label to resize the font on this HyperText instance. Notice that the font size of the other object remains unaffected.

Set Up Default Styles

  1. In the Project Window, search for the HyperText.cs file and select it.

  2. At the top of the inspector for HyperText.cs is a field for Default Styles. Assign your custom HyperTextStyles asset to this field.

  3. Navigate to GameObject -> UI -> Candlelight -> HyperText in the main menu. Notice that the Styles property on the object's HyperText component has been automatically assigned to your custom style sheet.

  4. Select HyperText.cs again and clear the Default Styles field.

Discussion

General

HyperTextStyles objects give you centralized control over the appearance of your HyperText output in real-time. In addition to defining the default appearance of your text, as well as the default colors of your links, you can specify a default style sheet to automatically use with all new HyperText objects. Each of the base styles can then also be overridden on a per-property basis on individual HyperText instances.

Caution note Caution

In contrast to other overridable properties, you can override the Font property simply by assigning a Font object. If no Font is assigned on a HyperText instance, then the one defined on the style sheet is used. Using the Create New button in the HyperText inspector automatically clears the font assigned to the HyperText instance and assigns it to the new HyperTextStyles asset.

Note Note

Link colors can only be managed on a HyperTextStyles object. Otherwise all links will simply use the default blue color.

Link Color Formula

For links, the base color is the Default Text Color, unless a base color override is enabled and specified (labeled as Color Tags in the Default Link Style section of the HyperTextStyles inspector). Each state color (normal, highlighted, pressed, disabled) is then the specified state color value multiplied by the Color Multiplier scalar. The Color Tint Mode then specifies how this post-multiplied state color blends with the base color. In Constant mode, the state color replaces the base color, while in Additive and Multiplicative modes the state and base colors are added and multiplied, respectively.

The Fade Duration value determines how long the tween between colors is, while the Color Tween Mode describes what channel values to use when blending between state colors.

For example, if the base color override is enabled and set to (0, 1, 0, 1) (green), the tint mode is Multiplicative, and the tween mode is Alpha, only the alpha channel of each state color will be multiplied with that of the base green color.

See Also