Initial commit
This commit is contained in:
@@ -0,0 +1,37 @@
|
||||
# Event System
|
||||
|
||||
The Event System is a way of sending events to objects in the application based on input, be it keyboard, mouse, touch, or custom input. The Event System consists of a few components that work together to send events.
|
||||
|
||||
When you add an Event System component to a GameObject you will notice that it does not have much functionality exposed, this is because the Event System itself is designed as a manager and facilitator of communication between Event System modules.
|
||||
|
||||
The primary roles of the Event System are as follows:
|
||||
|
||||
- Manage which GameObject is considered selected
|
||||
- Manage which Input Module is in use
|
||||
- Manage Raycasting (if required)
|
||||
- Updating all Input Modules as required
|
||||
|
||||
## Input Modules
|
||||
|
||||
An Input Module is where the main logic of how you want the Event System to behave lives, they are used for:
|
||||
|
||||
- Handling Input
|
||||
- Managing event state
|
||||
- Sending events to scene objects.
|
||||
|
||||
Only one Input Module can be active in the Event System at a time, and they must be components on the same GameObject as the Event System component.
|
||||
|
||||
If you want to write a custom Input Module, send events supported by existing UI components in Unity. To extend and write your own events, see the [Messaging System](MessagingSystem.md) documentation.
|
||||
|
||||
## Raycasters
|
||||
|
||||
Raycasters are used for figuring out what the pointer is over. It is common for Input Modules to use the Raycasters configured in the Scene to calculate what the pointing device is over.
|
||||
|
||||
There are 3 provided Raycasters that exist by default:
|
||||
|
||||
|
||||
- [Graphic Raycaster](script-GraphicRaycaster.md) - Used for UI elements
|
||||
- [Physics 2D Raycaster](script-Physics2DRaycaster.md) - Used for 2D physics elements
|
||||
- [Physics Raycaster](script-PhysicsRaycaster.md) - Used for 3D physics elements
|
||||
|
||||
If you have a 2d / 3d Raycaster configured in your Scene, it is easy to make non-UI elements receive messages from the Input Module. Simply attach a script that implements one of the event interfaces. For examples of this, see the [IPointerEnterHandler](xref:UnityEngine.EventSystems.IPointerEnterHandler) and [IPointerClickHandler](xref:UnityEngine.EventSystems.IPointerClickHandler) Scripting Reference pages.
|
||||
@@ -0,0 +1,11 @@
|
||||
# Event System Reference
|
||||
|
||||
This section provides details about the following parts of the event system:
|
||||
|
||||
- [Event System Manager](script-EventSystem.md)
|
||||
- [Graphic Raycaster](script-GraphicRaycaster.md)
|
||||
- [Physics Raycaster](script-PhysicsRaycaster.md)
|
||||
- [Physics2D Raycaster](script-Physics2DRaycaster.md)
|
||||
- [Standalone Input Module](script-StandaloneInputModule.md)
|
||||
- [Touch Input Module](script-TouchInputModule.md)
|
||||
- [Event Trigger](script-EventTrigger.md)
|
||||
@@ -0,0 +1,128 @@
|
||||
# Create Custom UI Effects With Shader Graph
|
||||
|
||||
Shader Graph can help you create customized UI effects, including animated backgrounds and unique UI elements. With Shader Graph, you can transform Image elements from static to dynamic and easily define your own button state appearances. Shader Graph can also provide you with more control over the appearance of your UI and help you optimize performance and texture memory.
|
||||
|
||||
Here are some examples of what you can achieve with Shader Graph in Unity UI:
|
||||
* Create custom backgrounds for your user interfaces that subtly swirl, flow, or drift.
|
||||
* Define visual button states, such as mouse hover and mouse press, or unfocused with just a single grayscale image.
|
||||
* Design animated HUD elements that indicate the passage of time.
|
||||
|
||||
## The Basics
|
||||
To create a Shader Graph shader for a Canvas UI element, use one of the following methods:
|
||||
|
||||
* Modify an existing Shader Graph:
|
||||
1. Open the Shader Graph in the Shader Editor.
|
||||
2. In **Graph Settings**, select the **HDRP** Target. If there isn't one, go to **Active Targets** > **Plus**, and select **HDRP**.
|
||||
3. In the **Material** drop-down, select **Canvas**.
|
||||
* Create a new Shader Graph. Go to **Assets** > **Create** > **Shader Graph** > **HDRP**, and select **Canvas Shader Graph**.
|
||||
|
||||
## Create animated backgrounds
|
||||
Follow these steps to create a simple animated background for a user interface.
|
||||
|
||||
1. Add two Sample Texture 2D nodes to the graph and set them to use a tiling clouds texture. We will scroll these in different directions speeds.
|
||||
<br/>
|
||||
|
||||
2. For each of the Sample Texture 2D nodes, add a Tiling and Offset node and connect it to the UV input port of the Sample Texture 2D node. We will use the Offset input ports to add the scrolling.
|
||||
<br/>
|
||||
|
||||
3. For each of the Tiling and Offset nodes, create a multiply node and connect it to the Offset input port.
|
||||
<br/>
|
||||
|
||||
4. For the first Multiply node, create a Vector 2 node connected to the A input port and set it to `0.2` and `0.13`. For the second Multiply node, create a Vector 2 node connected to the B input port and set it to `-0.1` and `0.23`. These values control the scrolling directions.
|
||||
<br/>
|
||||
|
||||
5. Create a Time node and multiply the Time output value by `0.3`. This value is used to adjust the speed of the effect.
|
||||
<br/>
|
||||
|
||||
6. Connect the ouput port of the Time multiply node to the other two multiply nodes. Now our textures are scrolling.
|
||||
<br/>
|
||||
|
||||
7. Create a new Blend node and use it to blend the outputs of the two Sample Texture 2D nodes. This will combine the contributions of both textures together.
|
||||
<br/>
|
||||
|
||||
8. Add a Lerp node and wire the output of the Blend node to the T input of the Lerp. This uses the texture contributions as a mask for blending.
|
||||
<br/>
|
||||
|
||||
9. To blend the two colors using the animated mask, create two Color nodes and connect them to the A and B inputs of the Lerp. Set the colors according to your preference.
|
||||
<br/>
|
||||
|
||||
10. Finally, connect the output of the Lerp to the Base Color input on the Fragment Context Block.
|
||||
|
||||
You now have an animated background shader. You can customize it by changing the colors, changing the texture being used, or controlling the speed.
|
||||
|
||||
## Apply the shader to a Canvas element
|
||||
|
||||
Follow the steps below to apply the shader you created to a Canvas UI element.
|
||||
1. Right-click your Shader Graph asset in the Project window and select **Create** > **Material**. Give your material a name.
|
||||
<br/>
|
||||
|
||||
2. Ensure that your scene has a Canvas element. If it doesn't, right-click in the Hierarchy panel and select UI > Canvas.
|
||||
<br/>
|
||||
|
||||
3. Add a new Image element to your Canvas. Right-click the Canvas element and select **UI** > **Image**.
|
||||
<br/>
|
||||
|
||||
4. Select the Image element in the Hierarchy panel. In the Inspector window, select **Browse** on the Material slot.
|
||||
<br/>
|
||||
|
||||
5. Select the Material asset you created in step 1.
|
||||
|
||||
Now your Canvas element is using the shader you created.
|
||||
|
||||
## Pass custom data into the shader
|
||||
|
||||
It's possible to retrieve custom data in a Shader Graph shader, such as the width and height dimensions of Canvas Image elements. You can easily achieve this using a script by following the steps below:
|
||||
|
||||
1. Follow the steps in [Apply The Shader To A Canvas Element](#apply-the-shader-to-a-canvas-element) to create a material and apply it to a Canvas Image element.
|
||||
|
||||
2. To access the Blackboard window, open the Shader Graph asset and then select **Blackboard** on the top right.
|
||||
<br/>
|
||||
|
||||
3. In the Blackboard window, click **+** on the top right to add a new Blackboard parameter.
|
||||
|
||||
4. Select the data type that matches the type of data you want to bring in. In this example, add a Vector 2 parameter.
|
||||
|
||||
5. Name the new parameter "Size". You can then drag the Size parameter into the graph and use it based on your needs.
|
||||
<br/>
|
||||
|
||||
6. Create the following script to connect the Canvas Image's Width and Height values to the shader's Size parameter:
|
||||
```
|
||||
using UnityEngine;
|
||||
using UnityEngine.UI;
|
||||
|
||||
[RequireComponent(typeof(Graphic))]
|
||||
[ExecuteAlways]
|
||||
public class ImageSize : MonoBehaviour
|
||||
{
|
||||
private Image m_myCanvasImage;
|
||||
private void Start()
|
||||
{
|
||||
m_myCanvasImage = GetComponent<Image>();
|
||||
}
|
||||
|
||||
#if UNITY_EDITOR
|
||||
void OnValidate() { UpdateMaterial(); }
|
||||
#endif
|
||||
|
||||
private void FixedUpdate()
|
||||
{
|
||||
UpdateMaterial();
|
||||
}
|
||||
|
||||
void UpdateMaterial()
|
||||
{
|
||||
if (m_myCanvasImage != null && m_myCanvasImage.material != null)
|
||||
{
|
||||
var imageRect = m_myCanvasImage.rectTransform.rect;
|
||||
var widthHeight = new Vector2(x: imageRect.width, y: imageRect.height);
|
||||
m_myCanvasImage.material.SetVector(name: "_Size", widthHeight);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
7. Save the script as `ImageSize.cs` and add it to your project.
|
||||
8. Select the Image element in the Hierarchy panel of your scene.
|
||||
9. In the Inspector window, select **Add Component** and then choose **Scripts** > **Image Size**.
|
||||
<br/>
|
||||
|
||||
The Image element's Width and Height values from the Rect Transform are passed into the Material's Size parameter. You can now use them in the shader.
|
||||
@@ -0,0 +1,35 @@
|
||||
# Creating UI elements from scripting
|
||||
|
||||
If you are creating a dynamic UI where UI elements appear, disappear, or change based on user actions or other actions in the game, you may need to make a script that instantiates new UI elements based on custom logic.
|
||||
|
||||
|
||||
## Creating a prefab of the UI element
|
||||
|
||||
In order to be able to easily instantiate UI elements dynamically, the first step is to create a prefab for the type of UI element that you want to be able to instantiate. Set up the UI element the way you want it to look in the Scene, and then drag the element into the Project View to make it into a prefab.
|
||||
|
||||
For example, a prefab for a button could be a Game Object with a Image component and a Button component, and a child Game Object with a Text component. Your setup might be different depending on your needs.
|
||||
|
||||
You might wonder why we don't have a API methods to create the various types of controls, including visuals and everything. The reason is that there are an infinite number of way e.g. a button could be setup. Does it use an image, text, or both? Maybe even multiple images? What is the text font, color, font size, and alignment? What sprite or sprites should the image use? By letting you make a prefab and instantiate that, you can set it up exactly the way you want. And if you later want to change the look and feel of your UI you can just change the prefab and then it will be reflected in your UI, including the dynamically created UI.
|
||||
|
||||
|
||||
## Instantiating the UI element
|
||||
|
||||
Prefabs of UI elements are instantiated as normal using the Instantiate method. When setting the parent of the instantiated UI element, it's recommended to do it using the Transform.SetParent method with the worldPositionStays parameter set to false.
|
||||
|
||||
|
||||
## Positioning the UI element
|
||||
|
||||
A UI Element is normally positioned using its Rect Transform. If the UI Element is a child of a Layout Group it will be automatically positioned and the positioning step can be skipped.
|
||||
|
||||
When positioning a Rect Transform it's useful to first determine it has or should have any stretching behavior or not. Stretching behavior happens when the anchorMin and anchorMax properties are not identical.
|
||||
|
||||
For a non-stretching Rect Transform, the position is set most easily by setting the anchoredPosition and the sizeDelta properties. The anchoredPosition specifies the position of the pivot relative to the anchors. The sizeDelta is just the same as the size when there's no stretching.
|
||||
|
||||
For a stretching Rect Transform, it can be simpler to set the position using the offsetMin and offsetMax properties. The offsetMin property specifies the corner of the lower left corner of the rect relative to the lower left anchor. The offsetMax property specifies the corner of the upper right corner of the rect relative to the upper right anchor.
|
||||
|
||||
|
||||
## Customizing the UI Element
|
||||
|
||||
If you are instantiating multiple UI elements dynamically, it's unlikely that you'll want them all to look the same and do the same. Whether it's buttons in a menu, items in an inventory, or something else, you'll likely want the individual items to have different text or images and to do different things when interacted with.
|
||||
|
||||
This is done by getting the various components and changing their properties. See the scripting reference for the Image and Text components, and for how to work with UnityEvents from scripting.
|
||||
@@ -0,0 +1,63 @@
|
||||
# Making UI elements fit the size of their content
|
||||
|
||||
Normally when positioning a UI element with its Rect Transform, its position and size is specified manually (optionally including behavior to stretch with the parent Rect Transform).
|
||||
|
||||
However, sometimes you may want the rectangle to be automatically sized to fit the content of the UI element. This can be done by adding a component called Content Size Fitter.
|
||||
|
||||
|
||||
## Fit to size of Text
|
||||
|
||||
In order to make a Rect Transform with a Text component on it fit the text content, add a Content Size Fitter component to the same Game Object which has the Text component. Then set both the Horizontal Fit and Vertical Fit dropdowns to the Preferred setting.
|
||||
|
||||
|
||||
### How does it work?
|
||||
|
||||
What happens here is that the Text component functions as a Layout Element that can provide information about how big its minimum and preferred size is. In a manual layout this information is not used. A Content Size Fitter is a type of Layout Controller, which listens to layout information provided by Layout Elements and control the size of the Rect Transform according to this.
|
||||
|
||||
|
||||
### Remember the pivot
|
||||
|
||||
When UI elements are automatically resized to fit their content, you should pay extra attention to the pivot of the Rect Transform. The pivot will stay in place when the element is resized, so by setting the pivot position you can control in which direction the element will expand or shrink. For example, if the pivot is in the center, then the element will expand equally in all directions, and if the pivot is in the upper left corner, then the element will expand to the right and down.
|
||||
|
||||
|
||||
## Fit to size of UI element with child Text
|
||||
|
||||
If you have a UI element, such as a Button, that has a background image and a child Game Object with a Text component on it, you probably want the whole UI element to fit the size of the text - maybe with some padding.
|
||||
|
||||
In order to do this, first add a Horizontal Layout Group to the UI element, then add a Content Size Fitter too. Set the Horizontal Fit, the Vertical Fit, or both to the Preferred setting. You can add and tweak padding using the padding property in the Horizontal Layout Group.
|
||||
|
||||
Why use a Horizontal Layout Group? Well, it could have been a Vertical Layout Group as well - as long as there is only a single child, they produce the same result.
|
||||
|
||||
|
||||
### How does it work?
|
||||
|
||||
The Horizontal (or Vertical) Layout Group functions both as a Layout Controller and as a Layout Element. First it listens to the layout information provided by the children in the group - in this case the child Text. Then it determines how large the group must be (at minimum, and preferably) in order to be able to contain all the children, and it functions as a Layout Element that provides this information about its minimum and preferred size.
|
||||
|
||||
The Content Size Fitter listens to layout information provided by any Layout Element on the same Game Object - in this case provided by the Horizontal (or Vertical) Layout Group. Depending on its settings, it then controls the size of the Rect Transform based on this information.
|
||||
|
||||
Once the size of the Rect Transform has been set, the Horizontal (or Vertical) Layout Group makes sure to position and size its children according to the available space. See the page about the Horizontal Layout Group for more information about how it controls the positions and sizes of its children.
|
||||
|
||||
|
||||
## Make children of a Layout Group fit their respective sizes
|
||||
|
||||
If you have a Layout Group (horizontal or vertical) and want each of the UI elements in the group to fit their respective content, what do you do?
|
||||
|
||||
You can't put a Content Size Fitter on each child. The reason is that the Content Size Fitter wants control over its own Rect Transform, but the parent Layout Group also wants control over the child Rect Transform. This creates a conflict and the result is undefined behavior.
|
||||
|
||||
However, it isn't necessary either. The parent Layout Group can already make each child fit the size of the content. What you need to do is to disable the Child Force Expand toggles on the Layout Group. If the children are themselves Layout Groups too, you may need to disable the Child Force Expand toggles on those too.
|
||||
|
||||
Once the children no longer expand with flexible width, their alignment can be specified in the Layout Group using the Child Alignment setting.
|
||||
|
||||
What if you want some of the children to expand to fill additional available space, but not the other children? You can easily control this by adding a Layout Element component to the children you want to expand and enabling the Flexible Width or Flexible Height properties on those Layout Elements. The parent Layout Group should still have the Child Force Expand toggles disabled, otherwise all the children will expand flexibly.
|
||||
|
||||
|
||||
### How does it work?
|
||||
|
||||
A Game Object can have multiple components that each provide layout information about minimum, preferred and flexible sizes. A priority system determines which values take effect over others. The Layout Element component has a higher priority than the Text, Image, and Layout Group components, so it can be used to override any layout information values they provide.
|
||||
|
||||
When the Layout Group listens to the layout information provided by the children, it will take the overridden flexible sizes into account. Then, when controlling the sizes of the children, it will not make them any bigger than their preferred sizes. However, if the Layout Group has the Child Force Expand option enabled, it will always make the flexible sizes of all the children be at least 1.
|
||||
|
||||
|
||||
## More information
|
||||
|
||||
This page has explained solutions to a few common use cases. For a more in depth explanation of the auto layout system, see the [UI Auto Layout](UIAutoLayout.md) page.
|
||||
@@ -0,0 +1,57 @@
|
||||
# Designing UI for Multiple Resolutions
|
||||
|
||||
Modern games and applications often need to support a wide variety of different screen resolutions and particularly UI layouts need to be able to adapt to that. The UI System in Unity includes a variety of tools for this purpose that can be combined in various ways.
|
||||
|
||||
In this how-to we're going to use a simple case study and look at and compare the different tools in the context of that. In our case study we have three buttons in the corners of the screen as shown below, and the goal is to adapt this layout to various resolutions.
|
||||
|
||||

|
||||
|
||||
For this how-to we're going to consider four screen resolutions: Phone HD in portrait (640 x 960) and landscape (960 x 640) and Phone SD in portrait (320 x 480) and landscape (480 x 320). The layout is initially setup in the Phone HD Portrait resolution.
|
||||
|
||||
## Using anchors to adapt to different aspect ratios
|
||||
|
||||
UI elements are by default anchored to the center of the parent rectangle. This means that they keep a constant offset from the center.
|
||||
|
||||
If the resolution is changed to a landscape aspect ratio with this setup, the buttons may not even be inside the rectangle of the screen anymore.
|
||||
|
||||

|
||||
|
||||
One way to keep the buttons inside the screen is to change the layout such that the locations of the buttons are tied to their respective corners of the screen. The anchors of the top left button can be set to the upper left corner using the Anchors Preset drop down in the Inspector, or by dragging the triangular anchor handles in the Scene View. It's best to do this while the current screen resolution set in the Game View is the one the layout is initially designed for, where the button placement looks correct. (See the [UI Basic Layout](UIBasicLayout.md) page for more information on anchors.) Similarly, the anchors for the lower left and lower right buttons can be set to the lower left corner and lower right corner, respectively.
|
||||
|
||||
Once the buttons have been anchored to their respective corners, they stick to them when changing the resolution to a different aspect ratio.
|
||||
|
||||

|
||||
|
||||
When the screen size is changed to a larger or smaller resolution, the buttons will also remain anchored to their respective corners. However, since they keep their original size as specified in pixels, they may take up a larger or smaller proportion of the screen. This may or may not be desirable, depending on how you would like your layout to behave on screens of different resolutions.
|
||||
|
||||

|
||||
|
||||
In this how-to, we know that the smaller resolutions of Phone SD Portrait and Landscape don't correspond to screens that are physically smaller, but rather just screens with a lower pixel density. On these lower-density screens the buttons shouldn't appear larger than on the high-density screens - they should instead appear with the same size.
|
||||
|
||||
This means that the buttons should become smaller by the same percentage as the screen is smaller. In other words, the scale of the buttons should follow the screen size. This is where the **Canvas Scaler** component can help.
|
||||
|
||||
## Scaling with Screen Size
|
||||
|
||||
The **Canvas Scaler** component can be added to a root **Canvas** - a Game Object with a Canvas component on it, which all the UI elements are children of. It is also added by default when creating a new Canvas through the **GameObject** menu.
|
||||
|
||||
In the Canvas Scaler component, you can set its **UI Scale Mode** to **Scale With Screen Size**. With this scale mode you can specify a resolution to use as reference. If the current screen resolution is smaller or larger than this reference resolution, the scale factor of the Canvas is set accordingly, so all the UI elements are scaled up or down together with the screen resolution.
|
||||
|
||||
In our case, we set the **Canvas Scaler** to be the Phone HD portrait resolution of 640 x 960. Now, when setting the screen resolution to the Phone SD portrait resolution of 320 x 480, the entire layout is scaled down so it appears proportionally the same as in full resolution. Everything is scaled down: The button sizes, their distances to the edges of the screen, the button graphics, and the text elements. This means that the layout will appear the same in the Phone SD portrait resolution as in Phone HD portrait; only with a lower pixel density.
|
||||
|
||||

|
||||
|
||||
One thing to be aware of: After adding a Canvas Scaler component, it's important to also check how the layout looks at other aspect ratios. By setting the resolution back to Phone HD landscape, we can see that the buttons now appear bigger than they should (and used to).
|
||||
|
||||

|
||||
|
||||
The reason for the larger buttons in landscape aspect ratio comes down to how the Canvas Scaler setting works. By default it compares the width or the current resolution with the width of the Canvas Scaler and the result is used as the scale factor to scale everything with. Since the current landscape resolution of 960 x 640 has a 1.5 times larger width than the portrait Canvas Scaler of 640 x 960, the layout is scaled up by 1.5.
|
||||
|
||||
The component has a property called **Match** which can be 0 (Width), 1 (Height) or a value in between. By default it's set to 0, which compares the current screen width with the Canvas Scaler width as described.
|
||||
|
||||
If the **Match** property is set to 0.5 instead, it will compare both the current width to the reference width and the current height to the reference height, and choose a scale factor that's in between the two. Since in this case the landscape resolution is 1.5 times wider but also 1.5 times shorter, those two factor even out and produce a final scale factor of 1, which means the buttons keep their original size.
|
||||
|
||||
At this point the layout supports all the four screen resolutions using a combination of appropriate anchoring and the Canvas Scaler component on the Canvas.
|
||||
|
||||

|
||||
|
||||
See the [Canvas Scaler](script-CanvasScaler.md) reference page for more information on different ways to scale UI elements in relation to different screen sizes.
|
||||
@@ -0,0 +1,179 @@
|
||||
# Creating Screen Transitions
|
||||
|
||||
The need to transition between multiple UI screens is fairly common. In this page we will explore a simple way to create and manage those transitions using animation and State Machines to drive and control each screen.
|
||||
|
||||
## Overview
|
||||
|
||||
The high-level idea is that each of our screens will have an [Animator Controller](https://docs.unity3d.com/Manual/class-AnimatorController.html) with two [states](https://docs.unity3d.com/Manual/class-State.html) (Open and Closed) and a boolean [Parameter](https://docs.unity3d.com/Manual/AnimationParameters.html) (Open). To transition between screens you will only need to close the currently open Screen and open the desired one. To make this process easier we will create a small Class ScreenManager that will keep track and take care of closing any already open Screen for us. The button that triggers the transition will only have to ask the ScreenManager to open the desired screen.
|
||||
|
||||
### Thinking about Navigation
|
||||
|
||||
If you plan to support controller/keyboard navigation of UI elements, then it's important to have a few things in mind. It's important to avoid having Selectable elements outside the screen since that would enable players to select offscreen elements, we can do that by deactivating any off-screen hierarchy. We also need to make sure when a new screen is shown we set a element from it as selected, otherwise the player would not be able to navigate to the new screen. We will take care of all that in the ScreenManager class below.
|
||||
|
||||
## Setting up the Animator Controller
|
||||
|
||||
Let's take a look at the most common and minimal setup for the Animation Controller to do a Screen transition. The controller will need a boolean parameter (Open) and two states (Open and Closed), each state should have an animation with only one keyframe, this way we let the State Machine do the transition blending for us.
|
||||
|
||||

|
||||
|
||||

|
||||
|
||||
Now we need to create the [transition](https://docs.unity3d.com/Manual/class-Transition.html) between both states, let's start with the transition from Open to Closed and let's set the condition properly, we want to go from Open to Closed when the parameter Open is set to false. Now we create the transition from Closed to Open and set the condition to go from Closed to Open when the parameter Open is true.
|
||||
|
||||

|
||||
|
||||

|
||||
|
||||
## Managing the screens
|
||||
|
||||
With all the above set up, the only thing missing is for us to set the parameter Open to true on the screens Animator we want to transition to and Open to false on the currently open screens Animator. To do that, we will create a small script:
|
||||
|
||||
````
|
||||
using UnityEngine;
|
||||
using UnityEngine.UI;
|
||||
using UnityEngine.EventSystems;
|
||||
using System.Collections;
|
||||
using System.Collections.Generic;
|
||||
|
||||
public class ScreenManager : MonoBehaviour {
|
||||
|
||||
//Screen to open automatically at the start of the Scene
|
||||
public Animator initiallyOpen;
|
||||
|
||||
//Currently Open Screen
|
||||
private Animator m_Open;
|
||||
|
||||
//Hash of the parameter we use to control the transitions.
|
||||
private int m_OpenParameterId;
|
||||
|
||||
//The GameObject Selected before we opened the current Screen.
|
||||
//Used when closing a Screen, so we can go back to the button that opened it.
|
||||
private GameObject m_PreviouslySelected;
|
||||
|
||||
//Animator State and Transition names we need to check against.
|
||||
const string k_OpenTransitionName = "Open";
|
||||
const string k_ClosedStateName = "Closed";
|
||||
|
||||
public void OnEnable()
|
||||
{
|
||||
//We cache the Hash to the "Open" Parameter, so we can feed to Animator.SetBool.
|
||||
m_OpenParameterId = Animator.StringToHash (k_OpenTransitionName);
|
||||
|
||||
//If set, open the initial Screen now.
|
||||
if (initiallyOpen == null)
|
||||
return;
|
||||
OpenPanel(initiallyOpen);
|
||||
}
|
||||
|
||||
//Closes the currently open panel and opens the provided one.
|
||||
//It also takes care of handling the navigation, setting the new Selected element.
|
||||
public void OpenPanel (Animator anim)
|
||||
{
|
||||
if (m_Open == anim)
|
||||
return;
|
||||
|
||||
//Activate the new Screen hierarchy so we can animate it.
|
||||
anim.gameObject.SetActive(true);
|
||||
//Save the currently selected button that was used to open this Screen. (CloseCurrent will modify it)
|
||||
var newPreviouslySelected = EventSystem.current.currentSelectedGameObject;
|
||||
//Move the Screen to front.
|
||||
anim.transform.SetAsLastSibling();
|
||||
|
||||
CloseCurrent();
|
||||
|
||||
m_PreviouslySelected = newPreviouslySelected;
|
||||
|
||||
//Set the new Screen as then open one.
|
||||
m_Open = anim;
|
||||
//Start the open animation
|
||||
m_Open.SetBool(m_OpenParameterId, true);
|
||||
|
||||
//Set an element in the new screen as the new Selected one.
|
||||
GameObject go = FindFirstEnabledSelectable(anim.gameObject);
|
||||
SetSelected(go);
|
||||
}
|
||||
|
||||
//Finds the first Selectable element in the providade hierarchy.
|
||||
static GameObject FindFirstEnabledSelectable (GameObject gameObject)
|
||||
{
|
||||
GameObject go = null;
|
||||
var selectables = gameObject.GetComponentsInChildren<Selectable> (true);
|
||||
foreach (var selectable in selectables) {
|
||||
if (selectable.IsActive () && selectable.IsInteractable ()) {
|
||||
go = selectable.gameObject;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return go;
|
||||
}
|
||||
|
||||
//Closes the currently open Screen
|
||||
//It also takes care of navigation.
|
||||
//Reverting selection to the Selectable used before opening the current screen.
|
||||
public void CloseCurrent()
|
||||
{
|
||||
if (m_Open == null)
|
||||
return;
|
||||
|
||||
//Start the close animation.
|
||||
m_Open.SetBool(m_OpenParameterId, false);
|
||||
|
||||
//Reverting selection to the Selectable used before opening the current screen.
|
||||
SetSelected(m_PreviouslySelected);
|
||||
//Start Coroutine to disable the hierarchy when closing animation finishes.
|
||||
StartCoroutine(DisablePanelDeleyed(m_Open));
|
||||
//No screen open.
|
||||
m_Open = null;
|
||||
}
|
||||
|
||||
//Coroutine that will detect when the Closing animation is finished and it will deactivate the
|
||||
//hierarchy.
|
||||
IEnumerator DisablePanelDeleyed(Animator anim)
|
||||
{
|
||||
bool closedStateReached = false;
|
||||
bool wantToClose = true;
|
||||
while (!closedStateReached && wantToClose)
|
||||
{
|
||||
if (!anim.IsInTransition(0))
|
||||
closedStateReached = anim.GetCurrentAnimatorStateInfo(0).IsName(k_ClosedStateName);
|
||||
|
||||
wantToClose = !anim.GetBool(m_OpenParameterId);
|
||||
|
||||
yield return new WaitForEndOfFrame();
|
||||
}
|
||||
|
||||
if (wantToClose)
|
||||
anim.gameObject.SetActive(false);
|
||||
}
|
||||
|
||||
//Make the provided GameObject selected
|
||||
//When using the mouse/touch we actually want to set it as the previously selected and
|
||||
//set nothing as selected for now.
|
||||
private void SetSelected(GameObject go)
|
||||
{
|
||||
//Select the GameObject.
|
||||
EventSystem.current.SetSelectedGameObject(go);
|
||||
|
||||
//If we are using the keyboard right now, that's all we need to do.
|
||||
var standaloneInputModule = EventSystem.current.currentInputModule as StandaloneInputModule;
|
||||
if (standaloneInputModule != null)
|
||||
return;
|
||||
|
||||
//Since we are using a pointer device, we don't want anything selected.
|
||||
//But if the user switches to the keyboard, we want to start the navigation from the provided game object.
|
||||
//So here we set the current Selected to null, so the provided gameObject becomes the Last Selected in the EventSystem.
|
||||
EventSystem.current.SetSelectedGameObject(null);
|
||||
}
|
||||
}
|
||||
````
|
||||
|
||||
Let's hook up this script, we do this by creating a new GameObject, we can rename it "ScreenManager" for instance, and add the component above to it. You can assign an initial screen to it, this screen will be open at the start of your scene.
|
||||
|
||||
Now for the final part, let's make the [UI buttons](script-Button.md) work. Select the button that should trigger the screen transition and add a new action under the **On Click ()** list in the Inspector. Drag the ScreenManager GameObject we just created to the ObjectField, on the dropdown select **ScreenManager->OpenPanel (Animator)** and drag and drop the panel you want to open when the user clicks the button to the las ObjectField.
|
||||
|
||||

|
||||
|
||||
## Notes
|
||||
This technique only requires each screen to have an AnimatorController with an Open parameter and a Closed state to work - it doesn't matter how your screen or State Machine are constructed. This technique also works well with nested screens, meaning you only need one ScreenManager for each nested level.
|
||||
|
||||
The State Machine we set up above has the default state of Closed, so all of the screens that use this controller start as closed. The ScreenManager provides an initiallyOpen property so you can specify which screen is shown first.
|
||||
@@ -0,0 +1,35 @@
|
||||
# Creating a World Space UI
|
||||
|
||||
The UI system makes it easy to create UI that is positioned in the world among other 2D or 3D objects in the Scene.
|
||||
|
||||
Start by creating a UI element (such as an Image) if you don't already have one in your scene by using GameObject > UI > Image. This will also create a Canvas for you.
|
||||
|
||||
|
||||
## Set the Canvas to World Space
|
||||
|
||||
Select your Canvas and change the Render Mode to World Space.
|
||||
|
||||
Now your Canvas is already positioned in the World and can be seen by all cameras if they are pointed at it, but it is probably huge compared to other objects in your Scene. We'll get back to that.
|
||||
|
||||
|
||||
## Decide on a resolution
|
||||
|
||||
First you need to decide what the resolution of the Canvas should be. If it was an image, what should the pixel resolution of the image be? Something like 800x600 might be a good starting point. You enter the resolution in the Width and Height values of the Rect Transform of the Canvas. It's probably a good idea to set the position to 0,0 at the same time.
|
||||
|
||||
|
||||
## Specify the size of the Canvas in the world
|
||||
|
||||
Now you should consider how big the Canvas should be in the world. You can use the Scale tool to simply scale it down until it has a size that looks good, or you can decide how big it should be in meters.
|
||||
|
||||
If you want it to have a specific width in meters, you can can calculate the needed scale by using meter_size / canvas_width. For example, if you want it to be 2 meters wide and the Canvas width is 800, you would have 2 / 800 = 0.0025. You then set the Scale property of the Rect Transform on the Canvas to 0.0025 for both X, Y, and Z in order to ensure that it's uniformly scaled.
|
||||
|
||||
Another way to think of it is that you are controlling the size of one pixel in the Canvas. If the Canvas is scaled by 0.0025, then that is also the size in the world of each pixel in the Canvas.
|
||||
|
||||
## Position the Canvas
|
||||
|
||||
Unlike a Canvas set to Screen Space, a World Space Canvas can be freely positioned and rotated in the Scene. You can put a Canvas on any wall, floor, ceiling, or slanted surface (or hanging freely in the air of course). Just use the normal Translate and Rotate tools in the toolbar.
|
||||
|
||||
|
||||
## Create the UI
|
||||
|
||||
Now you can begin setting up your UI elements and layouts the same way you would with a Screen Space Canvas.
|
||||
@@ -0,0 +1,9 @@
|
||||
# Input Modules
|
||||
|
||||
An Input Module is where the main logic of an event system can be configured and customized. Out of the box there are two provided Input Modules, one designed for Standalone, and one designed for Touch input. Each module receives and dispatches events as you would expect on the given configuration.
|
||||
|
||||
Input modules are where the 'business logic' of the Event System take place. When the Event System is enabled it looks at what Input Modules are attached and passes update handling to the specific module.
|
||||
|
||||
Input modules are designed to be extended or modified based on the input systems that you wish to support. Their purpose is to map hardware specific input (such as touch, joystick, mouse, motion controller) into events that are sent via the messaging system.
|
||||
|
||||
The built in Input Modules are designed to support common game configurations such as touch input, controller input, keyboard input, and mouse input. They send a variety of events to controls in the application, if you implement the specific interfaces on your MonoBehaviours. All of the UI components implement the interfaces that make sense for the given component.
|
||||
@@ -0,0 +1,46 @@
|
||||
|
||||
# Messaging System
|
||||
|
||||
The new UI system uses a messaging system designed to replace SendMessage. The system is pure C# and aims to address some of the issues present with SendMessage. The system works using custom interfaces that can be implemented on a MonoBehaviour to indicate that the component is capable of receiving a callback from the messaging system. When the call is made a target GameObject is specified; the call will be issued on all components of the GameObject that implement the specified interface that the call is to be issued against. The messaging system allows for custom user data to be passed, as well as how far through the GameObject hierarchy the event should propagate; that is should it just execute for the specified GameObject, or should it also execute on children and parents. In addition to this the messaging framework provides helper functions to search for and find GameObjects that implement a given messaging interface.
|
||||
|
||||
The messaging system is generic and designed for use not just by the UI system but also by general game code. It is relatively trivial to add custom messaging events and they will work using the same framework that the UI system uses for all event handling.
|
||||
|
||||
## Defining A Custom Message
|
||||
|
||||
If you wish to define a custom message it is relatively simple. In the UnityEngine.EventSystems namespace there is a base interface called 'IEventSystemHandler'. Anything that extends from this can be considered as a target for receiving events via the messaging system.
|
||||
|
||||
````
|
||||
public interface ICustomMessageTarget : IEventSystemHandler
|
||||
{
|
||||
// functions that can be called via the messaging system
|
||||
void Message1();
|
||||
void Message2();
|
||||
}
|
||||
````
|
||||
|
||||
Once this interface is defined then it can be implemented by a MonoBehaviour. When implemented it defines the functions that will be executed if the given message is issued against this MonoBehaviours GameObject.
|
||||
|
||||
````
|
||||
public class CustomMessageTarget : MonoBehaviour, ICustomMessageTarget
|
||||
{
|
||||
public void Message1()
|
||||
{
|
||||
Debug.Log ("Message 1 received");
|
||||
}
|
||||
|
||||
public void Message2()
|
||||
{
|
||||
Debug.Log ("Message 2 received");
|
||||
}
|
||||
}
|
||||
````
|
||||
|
||||
Now that a script exists that can receive the message we need to issue the message. Normally this would be in response to some loosely coupled event that occurs. For example, in the UI system we issue events for such things as PointerEnter and PointerExit, as well as a variety of other things that can happen in response to user input into the application.
|
||||
|
||||
To send a message a static helper class exists to do this. As arguments it requires a target object for the message, some user specific data, and a functor that maps to the specific function in the message interface you wish to target.
|
||||
|
||||
````
|
||||
ExecuteEvents.Execute<ICustomMessageTarget>(target, null, (x,y)=>x.Message1());
|
||||
````
|
||||
|
||||
This code will execute the function Message1 on any components on the GameObject target that implement the ICustomMessageTarget interface. The scripting documentation for the ExecuteEvents class covers other forms of the Execute functions, such as Executing in children or in parents.
|
||||
@@ -0,0 +1,51 @@
|
||||
---
|
||||
uid: um-profiler-ui
|
||||
---
|
||||
|
||||
# UI and UI Details Profiler
|
||||
|
||||
The UI and UI Details Profiler modules provide information on how much time and resources Unity spends laying out and rendering the user interface within your application. You can use this module to understand how Unity handles UI batching for your application, including why and how it batches objects. You can also use this module to find out which part of the UI is responsible for slow performance, or to preview the UI while you scrub the timeline.
|
||||
|
||||
To open the Profiler window, go to **Window > Analysis > Profiler**. For more information on how to use the Profiler window, refer to [The Profiler window](ProfilerWindow).
|
||||
|
||||

|
||||
|
||||
## Chart categories
|
||||
The UI and UI Details Profiler modules’ charts are divided into five categories. To change the order of the categories in the chart, you can drag and drop them in the chart’s legend. You can also click a category’s colored legend to toggle its display.
|
||||
|
||||
|
||||
|**Chart**||**Description**|
|
||||
|---|---|---|
|
||||
|**UI Profiler module**|||
|
||||
||Layout|How much time Unity has spent performing the layout pass for the UI. This includes calculations done by [HorizontalLayoutGroup](https://docs.unity3d.com/Packages/com.unity.ugui@latest/index.html?subfolder=/api/UnityEngine.UI.HorizontalLayoutGroup.html), [VerticalLayoutGroup](https://docs.unity3d.com/Packages/com.unity.ugui@latest/index.html?subfolder=/api/UnityEngine.UI.VerticalLayoutGroup.html), and [GridLayoutGroup](https://docs.unity3d.com/Packages/com.unity.ugui@latest/index.html?subfolder=/api/UnityEngine.UI.GridLayoutGroup.html).|
|
||||
||Render|How much time the UI has spent doing its portion of rendering. This is either the cost of rendering directly to the graphics device or rendering to the main render queue.|
|
||||
|**UI Details Profile module**|||
|
||||
||Batches|Displays the total number of draw calls that are batched together. |
|
||||
||Vertices|The total number of vertices that are used to render a section of UI. |
|
||||
||Markers|Displays event markers. Unity records markers when the user interacts with the UI (for example, a button click, or a slider value change) and then draws them as vertical lines and labels on the chart.|
|
||||
|
||||
## Module details pane
|
||||
When you select the UI or the UI Details Profiler module, the module details pane at the bottom of the Profiler window displays more details on the UI in your application. You can use it to inspect the profiling information about the UI objects in your application. The pane is divided into the following columns:
|
||||
|
||||
|**Column**|**Description**|
|
||||
|---|---|
|
||||
|**Object**|A list of UI canvases your application used during the period profiled. Double click on a row to highlight the matching object in the Scene.|
|
||||
|**Self Batch Count**|How many batches Unity generated for the canvas.|
|
||||
|**Cumulative Batch Count**|How many batches Unity generated for the canvas and all of its nested canvases|
|
||||
|**Self Vertex Count**|How many vertices this canvas is rendering.|
|
||||
|**Cumulative Vertex Count**|How many vertices this canvas and nested canvases are rendering|
|
||||
|**Batch Breaking Reason**|Why Unity split the batch. Sometimes Unity might not be able to batch objects together. Common reasons include: <br/><br/>**Not Coplanar With Canvas**, where the batching needs the object’s rect transform to be coplanar (unrotated) with the canvas. <br/>**CanvasInjectionIndex**, where a CanvasGroup component is present and forces a new batch, such as when it displays the drop down list of a combo box on top of the rest.<br/>**Different Material Instance, Rect clipping, Texture, or A8TextureUsage**, where Unity can only batch together objects with identical materials, masking, textures, and texture alpha channel usage.|
|
||||
|**GameObject Count**|How many GameObjects are part of this batch|
|
||||
|**GameObjects**|The list of GameObjects in the batch.|
|
||||
|
||||
When you select a UI object from the list, a preview of it appears on the right hand side of the pane. Above the preview there are the following options in the toolbar:
|
||||
|
||||
* **Detach:** Select this button to open the UI canvas in a separate window. To reattach the window, close it.
|
||||
* **Preview background:** Use the dropdown to change the color of the preview background. You can choose from **Checkerboard**, **Black**, or **White**. This is useful if your UI has a particularly light or dark color scheme.
|
||||
* **Preview type:** Use the dropdown to select from **Standard**, **Overdraw**, or **Composite Overdraw**.
|
||||
|
||||
## Additional resources
|
||||
|
||||
* [Profiler window introduction](ProfilerWindow)
|
||||
* [Profiling your application](profiler-profiling-applications)
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
# Raycasters
|
||||
|
||||
A Raycaster is a component that determines what objects are under a specific screen space position, such as the location of a mouse click or a touch. It works by projecting a ray from the screen into the scene and identifying objects that intersect with that ray. Raycasters are essential for detecting user interactions with UI elements, 2D objects, or 3D objects.
|
||||
|
||||
Different types of Raycasters are used for different types of objects:
|
||||
|
||||
- [Graphic Raycaster](script-GraphicRaycaster.md): Detects UI elements on a Canvas.
|
||||
- [Physics 2D Raycaster](script-Physics2DRaycaster.md): Detects 2D physics elements.
|
||||
- [Physics Raycaster](script-PhysicsRaycaster.md): Detects 3D physics elements.
|
||||
|
||||
The Event System uses Raycasters to determine where to send input events. When a Raycaster is present and enabled in the scene, the Event System uses it to determine which object is closest to the screen at a given screen space position. If multiple Raycasters are active, the system will cast against all of them and sort the results by distance.
|
||||
@@ -0,0 +1,119 @@
|
||||
# Rich Text
|
||||
|
||||
The text for UI elements and text meshes can incorporate multiple font styles and sizes. Rich text is supported both for the UI System and the legacy GUI system. The Text, GUIStyle, GUIText and TextMesh classes have a __Rich Text__ setting which instructs Unity to look for markup tags within the text. The [Debug.Log](ScriptRef:Debug.Log.html) function can also use these markup tags to enhance error reports from code. The tags are not displayed but indicate style changes to be applied to the text.
|
||||
|
||||
## Markup format
|
||||
|
||||
The markup system is inspired by HTML but isn't intended to be strictly compatible with standard HTML. The basic idea is that a section of text can be enclosed inside a pair of matching tags:-
|
||||
|
||||
`We are <b>not</b> amused.`
|
||||
|
||||
As the example shows, the tags are just pieces of text inside the "angle bracket" characters, `<` and `>`.
|
||||
|
||||
You place the _opening_ tag at the beginning of the section. The text inside the tag denotes its name (which in this case is just **b**).
|
||||
|
||||
You place another tag at the end of the section. This is the _closing_ tag. It has the same name as the opening tag, but the name is prefixed with a slash `/` character. Every opening tag must have a corresponding closing tag. If you don't _close_ an opening tag, it is rendered as regular text.
|
||||
|
||||
The tags are not displayed to the user directly but are interpreted as instructions for styling the text they enclose. The `b` tag used in the example above applies boldface to the word "not", so the text appears ons creen as:-
|
||||
|
||||
We are **not** amused
|
||||
|
||||

|
||||
|
||||
A marked up section of text (including the tags that enclose it) is referred to as an **element**.
|
||||
|
||||
|
||||
### Nested elements
|
||||
|
||||
It is possible to apply more than one style to a section of text by "nesting" one element inside another
|
||||
|
||||
`We are <b><i>definitely not</i></b> amused`
|
||||
|
||||
The `<i>` tag applies italic style, so this would be presented onscreen as
|
||||
|
||||
We are **_definitely not_** amused
|
||||
|
||||

|
||||
|
||||
Note the ordering of the closing tags, which is in reverse to that of the opening tags. The reason for this is perhaps clearer when you consider that the inner tags need not span the whole text of the outermost element
|
||||
|
||||
`We are <b>absolutely <i>definitely</i> not</b> amused`
|
||||
|
||||
which gives
|
||||
|
||||
We are **absolutely _definitely_ not** amused
|
||||
|
||||

|
||||
|
||||
|
||||
### Tag parameters
|
||||
|
||||
Some tags have a simple all-or-nothing effect on the text but others might allow for variations. For example, the **color** tag needs to know which color to apply. Information like this is added to tags by the use of **parameters**:-
|
||||
|
||||
`We are <color=green>green</color> with envy`
|
||||
|
||||
Which produces this result:
|
||||
|
||||

|
||||
|
||||
Note that the ending tag doesn't include the parameter value. Optionally, the value can be surrounded by quotation marks but this isn't required.
|
||||
|
||||
Tag parameters cannot include blank spaces. For example:
|
||||
|
||||
`We are <color = green>green</color> with envy`
|
||||
|
||||
does not work because of the spaces to either side of the `=` character.
|
||||
|
||||
## Supported tags
|
||||
|
||||
The following list describes all the styling tags supported by Unity.
|
||||
|
||||
|**_Tag_** |**_Description_** |**_Example_** |**_Notes_** |
|
||||
|:---|:---|:---|:---|
|
||||
| **b**| Renders the text in boldface.| `We are <b>not</b> amused.`| |
|
||||
| **i**| Renders the text in italics.| `We are <i>usually</i> not amused.`| |
|
||||
| **size**| Sets the size of the text according to the parameter value, given in pixels.| `We are <size=50>largely</size> unaffected.`| Although this tag is available for Debug.Log, you will find that the line spacing in the window bar and Console looks strange if the size is set too large.|
|
||||
| <a name="ColorTag"></a>**color**| Sets the color of the text according to the parameter value. The color can be specified in the traditional HTML format. `#rrggbbaa` ...where the letters correspond to pairs of hexadecimal digits denoting the red, green, blue and alpha (transparency) values for the color. For example, cyan at full opacity would be specified by `color=#00ffffff`...<br/><br/>You can specify hexadecimal values in uppercase or lowercase; `#FF0000` is equivalent to `#ff0000`.| `We are <color=#ff0000ff>colorfully</color> amused`|Another option is to use the name of the color. This is easier to understand but naturally, the range of colors is limited and full opacity is always assumed. `<color=cyan>some text</color>` The available color names are given in the [table below](#ColorNames).|
|
||||
| **material** | This is only useful for text meshes and renders a section of text with a material specified by the parameter. The value is an index into the text mesh's array of materials as shown by the inspector.| `We are <material=2>texturally</material> amused` | |
|
||||
| **quad** | This is only useful for text meshes and renders an image inline with the text. It takes parameters that specify the material to use for the image, the image height in pixels, and a further four that denote a rectangular area of the image to display. Unlike the other tags, quad does not surround a piece of text and so there is no ending tag - the slash character is placed at the end of the initial tag to indicate that it is "self-closing". | `<quad material=1 size=20 x=0.1 y=0.1 width=0.5 height=0.5>` | This selects the material at position in the renderer's material array and sets the height of the image to 20 pixels. The rectangular area of image starts at given by the x, y, width and height values, which are all given as a fraction of the unscaled width and height of the texture.|
|
||||
|
||||
<a name="ColorNames"></a>
|
||||
### Supported colors
|
||||
|
||||
The following table lists colors for which you can use a name instead of a hexadecimal tag in the [`<color>`](#ColorTag) rich text tag.
|
||||
|
||||
|**_Color name_** |**_Hex value_** |**_Swatch_** |
|
||||
|:---|:---|:--|
|
||||
|aqua (same as cyan)|`#00ffffff`||
|
||||
|black|`#000000ff`||
|
||||
|blue|`#0000ffff`||
|
||||
|brown|`#a52a2aff`||
|
||||
|cyan (same as aqua)|`#00ffffff`||
|
||||
|darkblue|`#0000a0ff`||
|
||||
|fuchsia (same as magenta)|`#ff00ffff`||
|
||||
|green|`#008000ff`||
|
||||
|grey|`#808080ff`||
|
||||
|lightblue|`#add8e6ff`||
|
||||
|lime|`#00ff00ff`||
|
||||
|magenta (same as fuchsia)|`#ff00ffff`||
|
||||
|maroon|`#800000ff`||
|
||||
|navy|`#000080ff`||
|
||||
|olive|`#808000ff`||
|
||||
|orange|`#ffa500ff`||
|
||||
|purple|`#800080ff`||
|
||||
|red|`#ff0000ff`||
|
||||
|silver|`#c0c0c0ff`||
|
||||
|teal|`#008080ff`||
|
||||
|white|`#ffffffff`||
|
||||
|yellow|`#ffff00ff`||
|
||||
|
||||
|
||||
## Editor GUI
|
||||
|
||||
Rich text is disabled by default in the editor GUI system but it can be enabled explicitly using a custom [GUIStyle](ScriptRef:GUIStyle.html). The `richText` property should be set to true and the style passed to the GUI function in question:
|
||||
|
||||
````
|
||||
GUIStyle style = new GUIStyle ();
|
||||
style.richText = true;
|
||||
GUILayout.Label("<size=30>Some <color=yellow>RICH</color> text</size>",style);
|
||||
````
|
||||
@@ -0,0 +1,23 @@
|
||||
# Supported Events
|
||||
|
||||
The Event System supports a number of events, and they can be customized further in user custom user written Input Modules.
|
||||
|
||||
The events that are supported by the Standalone Input Module and Touch Input Module are provided by interface and can be implemented on a MonoBehaviour by implementing the interface. If you have a valid Event System configured the events will be called at the correct time.
|
||||
|
||||
- [IPointerEnterHandler](xref:UnityEngine.EventSystems.IPointerEnterHandler) - OnPointerEnter - Called when a pointer enters the object
|
||||
- [IPointerExitHandler](xref:UnityEngine.EventSystems.IPointerExitHandler) - OnPointerExit - Called when a pointer exits the object
|
||||
- [IPointerDownHandler](xref:UnityEngine.EventSystems.IPointerDownHandler) - OnPointerDown - Called when a pointer is pressed on the object
|
||||
- [IPointerUpHandler](xref:UnityEngine.EventSystems.IPointerUpHandler)- OnPointerUp - Called when a pointer is released (called on the GameObject that the pointer is clicking)
|
||||
- [IPointerClickHandler](xref:UnityEngine.EventSystems.IPointerClickHandler) - OnPointerClick - Called when a pointer is pressed and released on the same object
|
||||
- [IInitializePotentialDragHandler](xref:UnityEngine.EventSystems.IInitializePotentialDragHandler) - OnInitializePotentialDrag - Called when a drag target is found, can be used to initialize values
|
||||
- [IBeginDragHandler](xref:UnityEngine.EventSystems.IBeginDragHandler) - OnBeginDrag - Called on the drag object when dragging is about to begin
|
||||
- [IDragHandler](xref:UnityEngine.EventSystems.IDragHandler) - OnDrag - Called on the drag object when a drag is happening
|
||||
- [IEndDragHandler](xref:UnityEngine.EventSystems.IEndDragHandler) - OnEndDrag - Called on the drag object when a drag finishes
|
||||
- [IDropHandler](xref:UnityEngine.EventSystems.IDropHandler) - OnDrop - Called on the object where a drag finishes
|
||||
- [IScrollHandler](xref:UnityEngine.EventSystems.IScrollHandler) - OnScroll - Called when a mouse wheel scrolls
|
||||
- [IUpdateSelectedHandler](xref:UnityEngine.EventSystems.IUpdateSelectedHandler) - OnUpdateSelected - Called on the selected object each tick
|
||||
- [ISelectHandler](xref:UnityEngine.EventSystems.ISelectHandler) - OnSelect - Called when the object becomes the selected object
|
||||
- [IDeselectHandler](xref:UnityEngine.EventSystems.IDeselectHandler) - OnDeselect - Called on the selected object becomes deselected
|
||||
- [IMoveHandler](xref:UnityEngine.EventSystems.IMoveHandler) - OnMove - Called when a move event occurs (left, right, up, down)
|
||||
- [ISubmitHandler](xref:UnityEngine.EventSystems.ISubmitHandler) - OnSubmit - Called when the submit button is pressed
|
||||
- [ICancelHandler](xref:UnityEngine.EventSystems.ICancelHandler) - OnCancel - Called when the cancel button is pressed
|
||||
@@ -0,0 +1,136 @@
|
||||
* [Unity UI](index.md)
|
||||
* [Unity UI: Unity User Interface](index.md)
|
||||
* [Canvas](UICanvas.md)
|
||||
* [Basic Layout](UIBasicLayout.md)
|
||||
* [Visual Components](UIVisualComponents.md)
|
||||
* [Interaction Components](UIInteractionComponents.md)
|
||||
* [Animation Integration](UIAnimationIntegration.md)
|
||||
* [Auto Layout](UIAutoLayout.md)
|
||||
* [Rich Text](StyledText.md)
|
||||
* [Events](EventSystem.md)
|
||||
* [MessagingSystem](MessagingSystem.md)
|
||||
* [InputModules](InputModules.md)
|
||||
* [SupportedEvents](SupportedEvents.md)
|
||||
* [Raycasters](Raycasters.md)
|
||||
* [Reference](UIReference.md)
|
||||
* [Rect Transform](class-RectTransform.md)
|
||||
* [Canvas Components](comp-CanvasComponents.md)
|
||||
* [Canvas](class-Canvas.md)
|
||||
* [Canvas Scaler](script-CanvasScaler.md)
|
||||
* [Canvas Group](class-CanvasGroup.md)
|
||||
* [Canvas Renderer](class-CanvasRenderer.md)
|
||||
* [Visual Components](comp-UIVisual.md)
|
||||
* [Text](script-Text.md)
|
||||
* [Image](script-Image.md)
|
||||
* [Raw Image](script-RawImage.md)
|
||||
* [Mask](script-Mask.md)
|
||||
* [RectMask2D](script-RectMask2D.md)
|
||||
* [UI Effect Components](comp-UIEffects.md)
|
||||
* [Shadow](script-Shadow.md)
|
||||
* [Outline](script-Outline.md)
|
||||
* [Position as UV1](script-PositionAsUV1.md)
|
||||
* [Interaction Components](comp-UIInteraction.md)
|
||||
* [Selectable Base Class](script-Selectable.md)
|
||||
* [Transition Options](script-SelectableTransition.md)
|
||||
* [Navigation Options](script-SelectableNavigation.md)
|
||||
* [Button](script-Button.md)
|
||||
* [Toggle](script-Toggle.md)
|
||||
* [Toggle Group](script-ToggleGroup.md)
|
||||
* [Slider](script-Slider.md)
|
||||
* [Scrollbar](script-Scrollbar.md)
|
||||
* [Dropdown](script-Dropdown.md)
|
||||
* [Input Field](script-InputField.md)
|
||||
* [Scroll Rect](script-ScrollRect.md)
|
||||
* [Auto Layout](comp-UIAutoLayout.md)
|
||||
* [Layout Element](script-LayoutElement.md)
|
||||
* [Content Size Fitter](script-ContentSizeFitter.md)
|
||||
* [Aspect Ratio Fitter](script-AspectRatioFitter.md)
|
||||
* [Horizontal Layout Group](script-HorizontalLayoutGroup.md)
|
||||
* [Vertical Layout Group](script-VerticalLayoutGroup.md)
|
||||
* [Grid Layout Group](script-GridLayoutGroup.md)
|
||||
* [Events](EventSystemReference.md)
|
||||
* [Event System Manager](script-EventSystem.md)
|
||||
* [Graphic Raycaster](script-GraphicRaycaster.md)
|
||||
* [Panel Event Handler](script-PanelEventHandler)
|
||||
* [Panel Raycaster](script-PanelRaycaster)
|
||||
* [Physics Raycaster](script-PhysicsRaycaster.md)
|
||||
* [Physics 2D Raycaster](script-Physics2DRaycaster.md)
|
||||
* [Standalone Input Module](script-StandaloneInputModule.md)
|
||||
* [Touch Input Module](script-TouchInputModule.md)
|
||||
* [Event Trigger](script-EventTrigger.md)
|
||||
* [UI How Tos](UIHowTos.md)
|
||||
* [Designing UI for Multiple Resolutions](HOWTO-UIMultiResolution.md)
|
||||
* [Making UI elements fit the size of their content](HOWTO-UIFitContentSize.md)
|
||||
* [Creating a World Space UI](HOWTO-UIWorldSpace.md)
|
||||
* [Creating UI elements from scripting](HOWTO-UICreateFromScripting.md)
|
||||
* [Creating Screen Transitions](HOWTO-UIScreenTransition.md)
|
||||
* [Creating Custom UI Effects With Shader Graph](HOWTO-ShaderGraph.md)
|
||||
* [UI and UI Details Profiler](ProfilerUI.md)
|
||||
* [TextMesh Pro](TextMeshPro/index)
|
||||
* [Creating text](TextMeshPro/TMPObjects)
|
||||
* [UI Text GameObjects](TextMeshPro/TMPObjectUIText)
|
||||
* [3D Text GameObjects](TextMeshPro/TMPObject3DText)
|
||||
* [Font Assets](TextMeshPro/FontAssets)
|
||||
* [Font Asset Properties](TextMeshPro/FontAssetsProperties)
|
||||
* [Font Asset Creator](TextMeshPro/FontAssetsCreator)
|
||||
* [Line Metrics](TextMeshPro/FontAssetsLineMetrics)
|
||||
* [Signed Distance Fields](TextMeshPro/FontAssetsSDF)
|
||||
* [Dynamic Fonts](TextMeshPro/FontAssetsDynamicFonts)
|
||||
* [The Fallback Chain](TextMeshPro/FontAssetsFallback)
|
||||
* [Color emojis](TextMeshPro/ColorEmojis)
|
||||
* [Rich Text Tags](TextMeshPro/RichText)
|
||||
* [Supported Tags](TextMeshPro/RichTextSupportedTags)
|
||||
* [<align>](TextMeshPro/RichTextAlignment)
|
||||
* [<allcaps>](TextMeshPro/RichTextLetterCase)
|
||||
* [<alpha>](TextMeshPro/RichTextOpacity)
|
||||
* [<b>](TextMeshPro/RichTextBoldItalic)
|
||||
* [<color>](TextMeshPro/RichTextColor)
|
||||
* [<cspace>](TextMeshPro/RichTextCharacterSpacing)
|
||||
* [<font>](TextMeshPro/RichTextFont)
|
||||
* [<font-weight>](TextMeshPro/RichTextFontWeight)
|
||||
* [<gradient>](TextMeshPro/RichTextGradient)
|
||||
* [<i>](TextMeshPro/RichTextBoldItalic)
|
||||
* [<indent>](TextMeshPro/RichTextIndentation)
|
||||
* [<line-height>](TextMeshPro/RichTextLineHeight)
|
||||
* [<line-indent>](TextMeshPro/RichTextLineIndentation)
|
||||
* [<link>](TextMeshPro/RichTextLink)
|
||||
* [<lowercase>](TextMeshPro/RichTextLetterCase)
|
||||
* [<margin>](TextMeshPro/RichTextMargins)
|
||||
* [<mark>](TextMeshPro/RichTextMark)
|
||||
* [<mspace>](TextMeshPro/RichTextMonospace)
|
||||
* [<nobr>](TextMeshPro/RichTextNoBreak)
|
||||
* [<noparse>](TextMeshPro/RichTextNoParse)
|
||||
* [<page>](TextMeshPro/RichTextPageBreak)
|
||||
* [<pos>](TextMeshPro/RichTextPos)
|
||||
* [<rotate>](TextMeshPro/RichTextRotate)
|
||||
* [<s>](TextMeshPro/RichTextStrikethroughUnderline)
|
||||
* [<size>](TextMeshPro/RichTextSize)
|
||||
* [<smallcaps>](TextMeshPro/RichTextLetterCase)
|
||||
* [<space>](TextMeshPro/RichTextSpace)
|
||||
* [<sprite>](TextMeshPro/RichTextSprite)
|
||||
* [<style>](TextMeshPro/RichTextStyle)
|
||||
* [<sub>](TextMeshPro/RichTextSubSuper)
|
||||
* [<sup>](TextMeshPro/RichTextSubSuper)
|
||||
* [<u>](TextMeshPro/RichTextStrikethroughUnderline)
|
||||
* [<uppercase>](TextMeshPro/RichTextLetterCase)
|
||||
* [<voffset>](TextMeshPro/RichTextVOffset)
|
||||
* [<width>](TextMeshPro/RichTextWidth)
|
||||
* [Style Sheets](TextMeshPro/StyleSheets)
|
||||
* [Sprites](TextMeshPro/Sprites)
|
||||
* [Color Gradients](TextMeshPro/ColorGradients)
|
||||
* [Color Gradient Types](TextMeshPro/ColorGradientsTypes)
|
||||
* [Color Gradient Presets](TextMeshPro/ColorGradientsPresets)
|
||||
* [Shaders](TextMeshPro/Shaders)
|
||||
* [SDF Shaders]()
|
||||
* [Distance Field](TextMeshPro/ShadersDistanceField)
|
||||
* [Distance Field Overlay](TextMeshPro/ShadersDistanceField)
|
||||
* [Distance Field (Surface)](TextMeshPro/ShadersDistanceFieldSurface)
|
||||
* [Distance Field - Mobile](TextMeshPro/ShadersDistanceFieldMobile)
|
||||
* [Distance Field Masking - Mobile](TextMeshPro/ShadersDistanceFieldMaskingMobile)
|
||||
* [Distance Field Overlay - Mobile](TextMeshPro/ShadersDistanceFieldMobile)
|
||||
* [Distance Field (Surface) - Mobile](TextMeshPro/ShadersDistanceFieldSurfaceMobile)
|
||||
* [Bitmap Shaders]()
|
||||
* [Bitmap](TextMeshPro/ShadersBitmap)
|
||||
* [Bitmap Custom Atlas](TextMeshPro/ShadersBitmapCustomAtlas)
|
||||
* [Bitmap - MobileBitmapMobile](TextMeshPro/Shaders)
|
||||
* [Settings](TextMeshPro/Settings)
|
||||
@@ -0,0 +1,56 @@
|
||||
# Color emojis
|
||||
|
||||
You can include color glyphs and emojis in text. To do so, import a font file that has color emojis in it and set it as the fallback emojis text assets.
|
||||
|
||||

|
||||
|
||||
## Set up color emojis
|
||||
|
||||
Create a color font asset and add it to the TMP Settings Fallback. Note this is the same as the Project Settings/TextMeshPro/Settings as depicted in the image.
|
||||
|
||||
1. In your project, import a font file that has color emojis in it.
|
||||
2. Right-click in the `Asset` folder, and then select **Create > TextMeshPro > FontAsset > Color**. This ensures that you create the font asset with the right shader (Sprite) and the right atlas rendering mode (Color).
|
||||
3. Open the TMP Settings asset or alternatively via the **Edit > ProjectSettings > TextMesh Pro > Settings**.
|
||||
4. Add the emoji font asset to the **Fallback Emoji Text Assets** section.
|
||||
|
||||

|
||||
|
||||
Alternatively, assigning a color font asset to the text object will work fine provided that the [Emoji Fallback Support](ColorEmojis) option in the Extra Settings of the text component is disabled.
|
||||
|
||||
## Include emojis in text
|
||||
|
||||
To include emojis in text, do the following:
|
||||
|
||||
- Include emojis in text through their Unicode. For example, enter `\U00001f60` to represent a smile.
|
||||
- Use OS Virtual Keyboard.
|
||||
- Copy the emojis from an external Text Editing tool and paste them in your text field.
|
||||
|
||||
To find more information about the Unicode Emojis Standard, see this [link](http://unicode.org/Public/emoji/14.0/).
|
||||
|
||||
## Control Emoji Fallback Search
|
||||
|
||||
The "Emoji Fallback Support" option controls where we search for characters defined in the Unicode Standards as Emojis.
|
||||
|
||||
When this option is enabled (default), the "Fallback Emoji Text Assets" list will be search first for any characters defined as Emojis.
|
||||
|
||||
When this option is disabled, the Primary font asset assigned to the text component will be searched first.
|
||||
|
||||
Basically, this option overrides the character search to prioritize searching thru the "Fallback Emoji Text Assets" list first when the character is an emoji.
|
||||
|
||||
This option is also useful when a font contains black-and-white emojis as it allows the user to control if the emojis contained in the primary will be used or those from the "Fallback Emoji Text Assets" list.
|
||||
|
||||
To update the `Emoji Fallback Support`:
|
||||
1. Select the **Text (TMP)** field in the hierarchy.
|
||||
2. In the Inspector window, under the `Extra Settings` foldout of the **Text (TMP)** field, select the **Emoji Fallback Support** toggle.
|
||||
|
||||

|
||||
|
||||
## Limitations
|
||||
|
||||
The color emojis feature has the following limitations:
|
||||
|
||||
- It doesn't support some OpenType font features, such as chain context and single substitution.
|
||||
- It doesn't support Apple fonts that use the AAT format. It's a predecessor to OpenType.
|
||||
- It doesn't support SVG color glyphs.
|
||||
- Dynamic OS FontAsset has limited support on some iOS devices. The `Apple Color Emoji` font file found on OSX and several iOS devices works fine. However, the `Apple Color Emoji-160px` found on newer iOS devices is not support as the emoji's are encoded in JPEG format which is not supported by FreeType.
|
||||
- Prior to Unity 2023.1, adding a UTF-32 through the inspector sends an error. The emojis won't display in the inspector.
|
||||
@@ -0,0 +1,42 @@
|
||||
# Color Gradients
|
||||
|
||||
You can apply gradients of up to four colors to TextMesh Pro GameObjects. When you add a gradient, TextMesh Pro applies it to each character in the text individually. It stores gradient colors as in each character sprite's vertex colors.
|
||||
|
||||

|
||||
|
||||
_TextMesh Pro text with a four-color gradient_
|
||||
|
||||
Because each character sprite consists of two triangles, gradients tend to have a dominant direction. This is most obvious in diagonal gradients.
|
||||
|
||||
For example, the dominant direction in gradient below favors the red and black colors in the bottom-left and top-right corners
|
||||
|
||||

|
||||
|
||||
When you reverse the gradient colors, so both the top-right and bottom-left corners are yellow, the dominant color changes.
|
||||
|
||||

|
||||
|
||||
|
||||
TextMesh Pro multiplies gradient colors with the text's main vertex color (**Main Settings > Vertex Color** in the TextMesh Pro Inspector). If the main vertex color is white you see only the gradient colors. If it’s black you don’t see the gradient colors at all.
|
||||
|
||||
## Applying a Gradient
|
||||
|
||||
To apply a gradient to a TextMesh Pro GameObject, edit the [Gradient properties](TMPObjectUIText.md#color) in the Inspector.
|
||||
|
||||
> [!NOTE]
|
||||
> - To apply a gradient to only a portion of the text, use the [gradient](RichTextGradient.md) rich text tag.
|
||||
> - To apply a gradient to multiple text objects, use a [gradient preset](ColorGradientsPresets.md).
|
||||
|
||||

|
||||
|
||||
**To apply a color gradient to a TextMesh Pro GameObject:**
|
||||
|
||||
1. Enable the **Main Settings > Color Gradient** property.
|
||||
|
||||
1. Set **Main Settings > Color Gradient > Color Mode** to the [type of gradient](ColorGradientsTypes.md) you want to apply.
|
||||
|
||||
1. Use the **Main Settings > Color Gradient > Colors** settings to choose colors for the gradient. For each color you can:
|
||||
|
||||
- Click the color swatch to open a [Color Picker](https://docs.unity3d.com/Manual/EditingValueProperties.html).
|
||||
- Use the eyedropper to pick a color from anywhere on your screen.
|
||||
- Enter the color’s hexadecimal value directly in the text field.
|
||||
@@ -0,0 +1,36 @@
|
||||
# Gradient Presets
|
||||
|
||||
Use gradient presets to reuse the same color gradients across text objects. A gradient preset overrides the text’s local gradient type and colors.
|
||||
|
||||
You have to store Gradient presets in a specific folder so TextMesh Pro can find them and include them in builds. You can change the folder from the [TextMesh Pro settings](Settings.md#color-gradient-presets).
|
||||
|
||||
## Creating gradient presets
|
||||
|
||||
To create a gradient preset, choose **Assets > Create > TextMesh Pro > Color Gradient** from the menu.
|
||||
|
||||
This adds a new TextMesh Pro Color Gradient Asset to the Scene, and opens it in the Inspector.
|
||||
|
||||

|
||||
|
||||
You can then select a [gradient type](ColorGradientTypes.md) from the **Color Mode** dropdown, and set the gradient **Colors**.
|
||||
|
||||
## Applying gradient presets
|
||||
|
||||
You apply a gradient preset to text from the TextMesh Pro Inspector.
|
||||
|
||||
**To apply a gradient preset:**
|
||||
|
||||
1. Enable the **Main Settings > Color Gradient** property.
|
||||
|
||||
1. Open the Object Picker (circle icon) for **Main Settings > Color Preset**, and choose choose a preset
|
||||
|
||||
When you apply a gradient preset, the Inspector overrides the text's gradient type and colors with the values from the preset.
|
||||
|
||||
> [!CAUTION]
|
||||
> If you modify the gradient settings in the TextMesh Pro Inspector after you apply a preset, it affects the preset itself. Changes affect every object that uses the same preset.
|
||||
|
||||
## Removing gradient presets
|
||||
|
||||
To remove a gradient preset, open the Object Picker (circle icon) for **Main Settings > Color Preset**, and choose **None**.
|
||||
|
||||
When you remove the preset, the text reverts to its local gradient properties.
|
||||
@@ -0,0 +1,81 @@
|
||||
# Color Gradient Types
|
||||
|
||||
You can apply the following types of gradients to text.
|
||||
|
||||
- **[Single](#single-color):** A single color that is TextMesh Pro multiplies with the text object's vertex color.
|
||||
|
||||
- **[Horizontal](#horizontal-gradients):** A two-color side-to-side gradient.
|
||||
|
||||
- **[Vertical](#vertical-gradients):** A two-color up-and-down gradient.
|
||||
|
||||
- **[Four Corner](#four-corner-gradients):** A four-color gradient. Each color radiates from one corner.
|
||||
|
||||
<br/>
|
||||
_The TexMesh Pro color gradient settings_ <br/><br/>
|
||||
|
||||
The number of colors available in the **Colors** settings depends on the type of gradient you choose. Each swatch corresponds to the color's origin on a character sprite.
|
||||
|
||||
The image above shows a the settings for a four color gradient. Each color originates in the corresponding corner of the sprite (top-left, top-right, bottom-left, bottom-right). IT produces the following gradient:
|
||||
|
||||

|
||||
|
||||
|
||||
## Single Color
|
||||
|
||||
The **Single** gradient type applies a single color.
|
||||
|
||||

|
||||
|
||||
## Horizontal Gradients
|
||||
|
||||
The **Horizontal** gradient type applies two colors, and produces a side to side transition between them on each character.
|
||||
|
||||

|
||||
|
||||
<br/><br/>
|
||||
|
||||
## Vertical Gradients
|
||||
|
||||
The **Vertical** gradient type consists of two colors, and produces an up and down transition between the two on each character.
|
||||
|
||||
<br/><br/>
|
||||
|
||||
<br/><br/>
|
||||
|
||||
## Four Corner Gradients
|
||||
|
||||
The **Four Corner** gradient type applies four colors. Each one radiates out from its assigned corner of each character.
|
||||
|
||||
<br/><br/>
|
||||
|
||||

|
||||
|
||||
This is the most versatile gradient type. By varying some colors and keeping others identical, you can create different kinds of gradients. For example:
|
||||
|
||||
- Give three corners one color and the fourth a different color.
|
||||
|
||||

|
||||
|
||||
- Give pairs of adjacent corners the same color to create horizontal or vertical gradients.
|
||||
|
||||
<br/><br/>
|
||||
|
||||

|
||||
|
||||
- Give pairs of diagonally opposite corners the same color to create diagonal gradients.
|
||||
|
||||
<br/><br/>
|
||||
|
||||
<br/><br/>
|
||||
|
||||
- Create horizontal and vertical 3-color gradients with a dominant color at one end and a transition between two colors at the other.
|
||||
|
||||
<br/><br/>
|
||||
|
||||

|
||||
|
||||
- Give two diagonally opposite corners same color and give the other two corners different colors to create a diagonal stripe 3-color gradient.
|
||||
|
||||
<br/><br/>
|
||||
|
||||

|
||||
@@ -0,0 +1,27 @@
|
||||
# Styles
|
||||
|
||||
Use styles to apply additional formatting to some or all of the text in a TextMesh Pro object. A style is a combination of opening and closing [rich text tags](RichText.md), and can also include leading and trailing characters.
|
||||
|
||||
* To define styles, use a TextMesh Pro [style sheet](StyleSheets.md).
|
||||
|
||||
* To apply styles to your text, use the [`<style>` rich text tag](RichTextStyle.md) in the text editor.
|
||||
|
||||
## Custom styles example
|
||||
|
||||
Say you want headings in your text to be big, red, and bold with an asterisk to either side and a line break at the end.
|
||||
|
||||

|
||||
|
||||
That requires several tags for each heading, which makes the formatting cumbersome to maintain, and the text more difficult to read in the editor.
|
||||
|
||||
`<font-weight=700><size=2em><color=#FF0000>*Heading*</color></size></font-weight><br>`
|
||||
|
||||
It's easier to put all of the markup in a style. The example below shows a style called `H1`.
|
||||
|
||||

|
||||
|
||||
Once you create the style you can format all of your headings with a single `<style>` tag.
|
||||
|
||||
`<style="H1">Heading</style>`
|
||||
|
||||
Not only does that make the text easier to read in the editor, you can now update all of the headings in your text just by changing the style.
|
||||
@@ -0,0 +1,36 @@
|
||||
# Debugging TextMesh Pro text
|
||||
|
||||
Use the Text Info Debug Tool to display diagnostic information about a TextMesh Pro GameObject in the Scene view and the Inspector.
|
||||
|
||||
For example, you can display lines that indicate font metrics such as the line height, or the offset for superscript and subscript text. This can help you diagnose problems with fonts you import.
|
||||
|
||||

|
||||
_The TextMesh Pro debug tool set to show character bounding boxes and font metrics_
|
||||
|
||||
>[NOTE!]
|
||||
>The debug tool is part of the TextMesh Pro Examples & Extras package. You can install the package from the menu (select **Window > TextMesh Pro > Import TMP Examples and Extras**) or the [TextMesh Pro settings](Settings.md).
|
||||
|
||||
To use the debug tool:
|
||||
|
||||
1. Open a TextMesh Pro GameObject in the Inspector.
|
||||
|
||||
2. [Add](https://docs.unity3d.com/Manual/UsingComponents.html) a **TMP_TextInfoDebugTool** component.
|
||||
|
||||
3. From the **TMP_Text Info Debug Tool** section, turn debug [settings](#text-info-debug-tool-properties) on and off. You can see the results in the Scene view.
|
||||
|
||||
|
||||
## Text Info Debug Tool properties
|
||||
|
||||

|
||||
|
||||
|Property:|Function:|
|
||||
|-|-|
|
||||
|**Show Characters** | Displays each character's bounding box, as well as reference lines for font metrics, in the Scene view. |
|
||||
|**Show Words** | Displays the bounding box for each word in the Scene view. |
|
||||
|**Show Links** | Displays the bounding box for each link in the Scene view. |
|
||||
|**Show Lines** | Displays the bounding box for line of text word in the Scene view. |
|
||||
|**Show Mesh Bounds** | Displays the bounding box for the entire block of text in the Scene view. |
|
||||
|**Show Text Bounds** | Displays the boundary of the area that text can occupy, as defined by the font metrics, in the Scene view. |
|
||||
|**Object Stats** | Shows statistics about the TextMesh Pro GameObject, such as the number of characters, words, lines, and spaces. |
|
||||
|**Text Component** | Links to the TextMesh Pro GameObject's Text component. |
|
||||
|**Transform** | Links to the TextMesh Pro GameObject's RectTransform component. |
|
||||
@@ -0,0 +1 @@
|
||||
# Debugging TextMesh Pro text
|
||||
@@ -0,0 +1,75 @@
|
||||
# Font Assets
|
||||
|
||||
To use different fonts with TextMesh Pro, you need to create font assets. TextMesh Pro has its own font Asset format that is distinct from, but related to, [Unity's regular font Asset format](https://docs.unity3d.com/2019.1/Documentation/Manual/class-Font.html). You create TextMesh Pro font assets _from_ Unity font assets.
|
||||
|
||||
Every TextMesh Pro font Asset has two sub-Assets:
|
||||
|
||||
* **Font atlas:** a black and white or grayscale texture file that contains all of the characters included in the font Asset.<br/><br/><br/>_Example of a font atlas_
|
||||
* **Font material:** a material that controls the appearance of TextMesh Pro text using one of the [TextMesh Pro shaders](Shaders.md).
|
||||
|
||||
Font assets must be in a specific folder so TextMesh Pro can find them and include them in builds. To change the default folder for font assets, got to the [TextMesh Pro settings](Settings.md) and set the **Default Font Asset > Path** option.
|
||||
|
||||
## Creating Font Assets
|
||||
|
||||
To create a TextMesh Pro font Asset, use the TexMesh Pro [Font Asset Creator](FontAssetsCreator.md).
|
||||
|
||||
You can also create an empty TextMesh Pro font Asset from the Unity main menu. An empty font asset does not contain any characters by default, you must add them later. To create an empty TextMesh Pro font asset, select a Unity font Asset and then select **Asset > Create > TextMeshPro > Font Asset** from the menu.
|
||||
|
||||
## Types of font atlas
|
||||
|
||||
Font Assets can have the following types of font atlas:
|
||||
|
||||
* **Distance Field:** This type of atlas contains [signed distance field (SDF)](FontAssetsSDF.md) information.<br/><br/>This is the recommended Font Asset type for most applications because SDF atlases produce text that is smooth when transformed.
|
||||
|
||||
* **Smooth/Hinted Smooth:** This type of atlas is an antialiased bitmap texture. A Hinted smooth atlas aligns glyph pixels with texture pixels to produce a smoother result.<br/><br/>Smooth atlases work well for static text that is viewed head on, in situations where there is a good correspondence between texture pixels and screen pixels. Transforming text generated from a smooth atlas blurs the text edges.
|
||||
|
||||
* **Raster/Raster Hinted:** Raster atlases are un-smoothed bitmap textures. They almost always produce text with jagged, pixellated edges. The Hinted rater atlases align glyph pixels with texture pixels to produce a smoother result.
|
||||
|
||||
## Get Font Features
|
||||
|
||||
This option determines if OpenType font features should be retrieved from the source font file as new characters and glyphs are added to the font asset. Disabling this option will prevent extracting font features.
|
||||
|
||||
To update the Get Font Features option on a FontAsset:
|
||||
1. Select the FontAsset
|
||||
2. In the FontAsset inspector, navigate to the Generation Settings section.
|
||||
3. Select **Get Font Features**.
|
||||
|
||||

|
||||
|
||||
## Reset
|
||||
The `Reset` context menu option clears all tables which includes the Character and Glyph tables along with all font features tables such as the Ligature, Glyph Adjustment, Mark to Base, Mark to Mark tables. This option also clears the font asset's atlas texture and resets it back to size zero.
|
||||
|
||||
To reset a FontAsset:
|
||||
1. Select the FontAsset
|
||||
2. Expand the top right menu in the FontAsset Inspector.
|
||||
3. Select **Reset**.
|
||||
|
||||

|
||||
|
||||
## Clear Dynamic Data
|
||||
The `Clear Dynamic Data` context menu option clears the character and glyph tables as well as the font asset's atlas texture which is also resized back to size zero. This option preserves all font feature table data such as Ligatures, Glyph Adjustment, Mark to Base, Mark to Mark, etc.
|
||||
|
||||
To clear a FontAsset:
|
||||
1. Select the FontAsset
|
||||
2. Expand the top right menu in the FontAsset Inspector.
|
||||
3. Select **Clear Dynamic Data**.
|
||||
|
||||

|
||||
|
||||
This preserves the custom ligatures, kernings, and diacritical marks you added to the font asset when clearing the atlas.
|
||||
|
||||
## Clear Dynamic Data on Build
|
||||
|
||||
The "Clear Dynamic Data on Build" option works like the "Clear Dynamic Data" context menu option but also clears data when building the project or closing the Editor.
|
||||
|
||||
When enabled, this option resizes the texture to 0 (empty) during the build process.
|
||||
|
||||
For dynamic FontAssets, it resets the glyph atlas, character table, and glyph table to their initial states. This feature helps reduce build size by minimizing the FontAsset's data footprint.
|
||||
|
||||
To update the Clear Dynamic Data on Build option:
|
||||
|
||||
1. Select the FontAsset
|
||||
2. In the FontAsset inspector, navigate to the Generation Settings section.
|
||||
3. Select **Clear Dynamic Data on Build**.
|
||||
|
||||

|
||||
@@ -0,0 +1,86 @@
|
||||
## Font Asset Creator
|
||||
|
||||
The Font Asset Creator converts [Unity font assets](FontAssets.md) into TextMesh Pro font assets. You can use it to create both Signed [Distance Field (SDF)](FontAssetsSDF.md) fonts and bitmap fonts.
|
||||
|
||||
When you create a new font Asset, TextMesh Pro generates the Asset itself, as well as the atlas texture and material for the font.
|
||||
|
||||
After you create a TextMesh Pro font Asset, you can delete the Unity font Asset you used as a source, although you may want to keep it in the Scene in case you need to regenerate the TextMesh Pro font Asset.
|
||||
|
||||
## Creating a font Asset
|
||||
|
||||
Before you start, make sure that you've already imported the font (usually a TrueType .ttf file) you want to use into the project. For more information about importing fonts into Unity, see the documentation on [Fonts](https://docs.unity3d.com/Manual/class-Font.html) in the Unity manual.
|
||||
|
||||
**To create a TextMesh Pro font Asset:**
|
||||
|
||||
1. From the menu, choose: **Window > TextMesh Pro > Font Asset Creator** to open the Font Asset Creator.
|
||||
|
||||
1. Choose a **Source Font File**. This the Unity font Asset that you want to convert into a TextMesh Pro font Asset.
|
||||
|
||||
1. Adjust the **[Font Settings](#FontAssetCreatorSettings)** as needed, then click **Generate Font Atlas** to create the atlas texture<br/><br/>The atlas, and information about the font Asset appear in the texture preview area.<br/><br/>IMAGE
|
||||
|
||||
1. Continue adjusting the settings and regenerating the atlas until you're satisfied with the result.
|
||||
|
||||
1. Click **Save** or **Save as...** to save the font Asset to your project.<br/><br/>You must save the Asset to a **Resources** folder to make it accessible to TextMesh Pro.
|
||||
|
||||
<a name="FontAssetCreatorSettings"></a>
|
||||
## Font Asset Creator Settings:
|
||||
|
||||
|Property:||Function:|
|
||||
|-|-|-|
|
||||
|**Source Font File**||Select a font from which to generate a Text Mesh Pro font Asset.<br/><br/>This font is not included in project builds, unless you use it elsewhere in the project, or put it in a Resources folder.<br/><br/>You can use one of the default TextMesh Pro font assets, or [import your own](https://docs.unity3d.com/Manual/class-Font.html).|
|
||||
|**Sampling Point Size**||Set the font size, in points, used to generate the font texture.|
|
||||
|**Auto Sizing**||Use the largest point size possible while still fitting all characters on the texture.<br/><br/>This is the usual setting for SDF fonts.|
|
||||
|**Custom Size**||Use a custom point size. Enter the desired size in the text box.<br/><br/>Use this setting to achieve pixel-accurate control over bitmap-only fonts.|
|
||||
|**Padding**||Specify the space, in pixels, between characters in the font texture.<br/><br/>Padding provides the space required to render character separately, and to generate the SDF gradient (See the documentation on [Font Assets](FontAssetsSDF.md) for details).<br/><br/>The larger the padding, the smoother the transition, which allows for higher-quality rendering and larger effects, like thick outlines.<br/><br/>A padding of 5 is often fine for a 512x512 texture.|
|
||||
|**Packing Method**||Specify how to fit the characters into the font texture.|
|
||||
||Optimum|Finds the largest possible automatic font size that still fits all characters in the texture.<br/><br/>Use this setting to generate the final font texture.
|
||||
||Fast|Computes character packing more quickly, but may use a smaller font size than Optimum mode.<br/><br/>Use this setting when testing out font Asset creation settings.|
|
||||
|**Atlas Resolution**||Set the size width and height of the font texture, in pixels.<br/><br/>A resolution of 512 x 512 is fine for most fonts, as long as you are only including ASCII characters. Fonts with more characters may require larger resolutions, or multiple atlases. <br/><br/>When using an SDF font, a higher resolution produces finer gradients, and therefore higher quality text.|
|
||||
|**Character Set**||The characters in a font file aren't included in the font Asset automatically. You have to specify which ones you need. You can select a predefined character set, provide a list of characters to include, or include all of the characters in an existing font Asset or text Asset.|
|
||||
||ASCII|Includes the visible characters in the ASCII character set.|
|
||||
||Extended ASCII|Includes the visible characters in the extended ASCII character set.|
|
||||
||ASCII Lowercase|Includes only visible lower-case characters from the ASCII character set.|
|
||||
||ASCII Uppercase|Includes only visible upper-case characters from the ASCII character set.|
|
||||
||Numbers + Symbols|Includes only the visible numbers and symbols from the ASCII character set.|
|
||||
||Custom Range|Includes a range of characters that you define.<br/><br/>Enter a sequence of decimal values, or ranges of values, to specify which characters to include.<br/><br/>Use a hyphen to separate the first and last values of a range. Use commas to separate values and ranges (for example `32-126,160,8230`).<br/><br/>You can also choose an existing font Asset to include the characters in that Asset.|
|
||||
||Unicode Range (Hex)|Includes a range of characters that you define.<br/><br/>Enter a sequence of unicode hexadecimal values, or ranges of values, to specify which characters to include.<br/><br/>Use a hyphen to separate the first and last values of a range. Use commas to separate values and ranges (for example `20-7E,A0,2026`).<br/><br/>You can also choose an existing font Asset to include the characters in that Asset.|
|
||||
||Custom Characters|Includes a range of characters that you define.<br/><br/>Enter a sequence of characters to specify which characters to include.<br/><br/>Enter characters one after the other, with no spaces or delimiting characters in between (for example `abc123*#%`).<br/><br/>You can also choose an existing font Asset to include the characters in that Asset.|
|
||||
||Characters from File|Includes all the characters in a text Asset that you specify.<br/><br/>Use this option when you want to save your character set.|
|
||||
|**Font Style**||Apply basic font styling when creating a bitmap-only font Asset.<br/><br/>For SDF fonts, you configure the styling in the shader rather than the font Asset.|
|
||||
||Normal|Generates characters with no styling.|
|
||||
||Bold, Italic, Bold_Italic|Generates the font Asset with bold characters, italicized characters, or both.<br/><br/>With these settings, you can set a strength value that applied to bolding and italicization|
|
||||
||Outline|Generates the font Asset with outline characters.|
|
||||
||Bold_Sim|Generates the font Asset with a simulated bold.|
|
||||
|**Render Mode**||Specify the render mode to use when outputting the font atlas.|
|
||||
||SMOOTH|Renders the atlas to an antialiased bitmap.|
|
||||
||RASTER|Renders the atlas to a non-antialiased bitmap.|
|
||||
||SMOOTH_HINTED|Renders the atlas to an antialiased bitmap, and aligns character pixels with texture pixels for a crisper result.|
|
||||
||RASTER_HINTED|Renders the atlas to a non-antialiased bitmap and aligns character pixels with texture pixels for a crisper result.|
|
||||
| |SDF| Renders the atlas using a slower, but more accurate SDF generation mode, and no oversampling. |
|
||||
| |SDFAA| Renders the atlas using a faster, but less accurate SDF generation mode. It produces font atlases that are sufficient for most situations.|
|
||||
| |SDFAA_HINTED| Renders the atlas using a faster, but less accurate SDF generation mode, and aligns character pixels with texture pixels for a crisper result.. It produces font atlases that are sufficient for most situations |
|
||||
| |SDF8| Renders the atlas using a slower, but more accurate SDF generation mode, and 8x oversampling. |
|
||||
| |SDF16| Renders the atlas using a slower, but more accurate SDF generation mode, and 16x oversampling. |
|
||||
| |SDF32| Renders the atlas using a slower, but more accurate SDF generation mode, and 32x oversampling. Use this setting for fonts with complex or small characters. |
|
||||
|**Get Kerning Pairs**||Enable this option to copy the kerning data from the font.<br/><br/>Kerning data is used to adjust the spacing between specific character pairs to produce a more visually pleasing result.<br/><br/>**Note:** It isn't always possible to import kerning data. Some fonts store kerning pairs in their glyph positioning (GPOS) table, which is not supported by FreeType, the font engine used by TextMesh Pro. Other fonts do not store kerning pairs at all.|
|
||||
|**Generate Font Atlas**||Generate the font atlas texture.|
|
||||
|**Save**||Save the current font atlas.|
|
||||
|**Save As**||Save the current font atlas as a new font Asset.|
|
||||
|
||||
## Tips for creating font assets
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Characters in the font texture need some padding between them so they can be rendered separately. This padding is specified in pixels.
|
||||
Padding also creates room for the SDF gradient. The larger the padding, the smoother the transition, which allows for higher-quality rendering and larger effects, like thick outlines. A padding of 5 is often fine for a 512x512 texture.
|
||||
|
||||
|
||||
For most fonts, a 512x512 texture resolution is fine when including all ASCII characters.
|
||||
When you need to support thousands of character, you will have to use large textures. But even at maximum resolution, you might not be able to fit everything. In that case, you can split the characters by creating multiple font assets. Put the most often used characters in a main font Asset, and the others in a fallback font assets.
|
||||
@@ -0,0 +1,52 @@
|
||||
|
||||
# Dynamic fonts assets
|
||||
Normally when you generate a font Asset using the Font Asset Creator, you choose which characters to include, and bake them into a Font Atlas texture.
|
||||
|
||||
Dynamic font assets work the other way around. Instead of baking characters into an atlas in advance, you start with an empty atlas to which characters are added automatically as you use them.
|
||||
|
||||
This makes dynamic fonts assets more flexible, but that flexibility comes at a cost.
|
||||
|
||||
* Dynamic fonts require more computational resources than static fonts.
|
||||
|
||||
* Dynamic font assets maintain a link to the original font file used to create them. That means:
|
||||
|
||||
* During development, you must keep the font file in the project. You cannot delete it as you can the source fonts of static font assets.
|
||||
* Source fonts of any dynamic font assets in your game are included in builds, which can increase build size.
|
||||
|
||||
|
||||
This has several uses, for example:
|
||||
|
||||
* Use dynamic fonts during development to capture characters you forgot to include in your baked font assets.
|
||||
|
||||
* Use dynamic fonts in runtime when you don't know in advance which characters the user will enter in a text field.
|
||||
|
||||
## Creating a dynamic font Asset
|
||||
|
||||
Empty font assets are dynamic by default. To create one:
|
||||
|
||||
* From Unity's main menu, choose **Assets > Create > TextMeshPro > Font Asset** or press **Ctrl/Cmd + Shift + F12**.
|
||||
|
||||
To make an existing font Asset dynamic:
|
||||
|
||||
1. Select Asset and open it in the Inspector.
|
||||
|
||||
1. Set the **Generation Settings > Atlas Population Mode** property to **Dynamic**.
|
||||
|
||||
## Resetting a dynamic font Asset
|
||||
|
||||
You reset TextMesh Pro dynamic font assets, the same way you reset other components: by choosing **Reset** from the gear icon menu or context menu in the Inspector.
|
||||
|
||||
[IMAGE]
|
||||
|
||||
However, instead of resetting all of the Asset's properties to their default values, the command affects only:
|
||||
|
||||
* The Font Atlas
|
||||
* The Character Table
|
||||
* The Glyph Table
|
||||
* The Glyph Adjustment Table (kerning)
|
||||
|
||||
These are reset to include only the characters/glyphs used by TextMesh Pro text objects that use the font Asset.
|
||||
|
||||
If the Asset is currently unused, TextMesh Pro resizes the atlas texture to 0 x 0 pixels.
|
||||
|
||||
**NOTE:** Resetting a static font Asset leaves the atlas texture as-is, but empties the character-, glyph-, and glyph adjustment tables.
|
||||
@@ -0,0 +1,34 @@
|
||||
# Fallback font assets
|
||||
|
||||
A font atlas, and by extension a font Asset, can only contain a certain number of glyphs. The exact number depends on the font, the size of the atlas texture, and the settings you use when generating the atlas. The fallback font system allows you to specify other font assets to search when TextMesh Pro can't find a glyph in a text object's font Asset.
|
||||
|
||||
This is useful in a variety of situations, including:
|
||||
* Working with languages that have very large alphabets (Chinese, Korean, and Japanese, for example). Use fallback fonts to distribute an alphabet across several assets.
|
||||
|
||||
* Designing for mobile devices, where an imposed maximum texture size prevents you from fitting an entire set of glyphs in a single atlas of sufficient quality.
|
||||
|
||||
* Including special characters from other alphabets in your text.
|
||||
|
||||
## Local and general fallback font assets
|
||||
|
||||
Every font Asset can have its own list of fallback font assets. You set these in the [font Asset properties](FontAssetsProperties.md).
|
||||
|
||||
You can also set general fallback font assets that apply to every TextMesh Pro font Asset in your project. You set these in the [TextMesh Pro settings](Settings.md).
|
||||
|
||||
## The fallback chain
|
||||
|
||||
In addition to a text object's fallback fonts, TextMesh Pro searches several other assets for missing glyphs. Together, these assets form the fallback chain.
|
||||
|
||||
The table below lists the assets in the fallback chain in the order in which they are searched.
|
||||
|
||||
|Position:| Asset: | Defined in:|Notes:|
|
||||
|:-:|-|-||
|
||||
|1 | TextMesh Pro object's primary **Font Asset** | [Text object properties](TMPObjects.md) ||
|
||||
|2 | Primary font assets **Fallback Font Assets** | [Font Asset properties](FontAssetsProperties.md) |TexMesh Pro searches these assets in the order they're listed in the [font Asset properties](FontAssetsProperties.md). <br/><br/>The search is recursive, and includes each fallback Asset's fallback assets. |
|
||||
|3 | Text object's **Sprite Asset** | [Text object properties](TMPObjects.md) |When searching sprite assets, TextMesh Pro looks for sprites with an assigned unicode value that matches the missing character's unicode value.|
|
||||
|4 | General **Fallback Font Assets** | [TextMesh Pro settings](Settings.md) |TexMesh Pro searches these assets in the order they're listed in the [font Asset properties](FontAssetsProperties.md). <br/><br/>The search is recursive, and includes each fallback Asset's fallback assets. |
|
||||
|5 | **Default Sprite Asset** | [TextMesh Pro settings](Settings.md) |When searching sprite assets, TextMesh Pro looks for sprites with an assigned unicode value that matches the missing character's unicode value.|
|
||||
|6 | **Default Font Asset** | [TextMesh Pro settings](Settings.md) | |
|
||||
|7 | **Missing glyphs** character | [TextMesh Pro settings](Settings.md) | |
|
||||
|
||||
The fallback chain search is designed to detect circular references so each Asset in the chain is only searched once.
|
||||
@@ -0,0 +1,26 @@
|
||||
# Line metrics.
|
||||
|
||||
TextMesh Pro sets line metrics automatically when you generate a font Asset.
|
||||
|
||||
If the generated values produce strange or incorrect results, you can tweak the line metrics settings to fine-tune the font.
|
||||
|
||||
Most line metric values are relative to the **Baseline**, which is the horizontal line that characters sit on.
|
||||
|
||||
- Values for above-the-baseline metrics, such as the **Ascender** height, are greater that the **Baseline** value.
|
||||
- Values for below-the-baseline metrics, such as the **Descender** height, are less than **Baseline** value.
|
||||
|
||||

|
||||
|
||||
|Metric:|Function:|
|
||||
|-|-|
|
||||
|**Line Height**|The distance between the tops of consecutive lines.<br/><br/>If you set the line height to a value greater than the combined size of the **Ascender** and **Descender**, it creates a gap between lines.<br/><br/>If you set a line height to a value less than the combined size of the ascender and descender results in potential overlap between characters on different lines.|
|
||||
|**Ascender**|The ascender height, which specifies how far characters can extend above the baseline. It corresponds to the top of a line.|
|
||||
|**Cap Height**|The height of capital letters from the baseline.|
|
||||
|**Baseline**|The baseline height.<br/><br/>The baseline is the horizontal line that characters sit on.|
|
||||
|**Descender**|The descender height, which specifies how far characters can extend below the baseline.|
|
||||
|**Underline Offset**|The position of underlines relative to the baseline.|
|
||||
|**Strikethrough Offset**|The position of strikethrough lines relative to the baseline.|
|
||||
|**Superscript/ Subscript Offset**|Adjust the baseline for superscript and subscript text.|
|
||||
|**Super/ Subscript Size**|The scale of superscript and subscript text relative to the normal font size.|
|
||||
|**Padding**|The amount of padding between characters in the font atlas texture.<br/><br/>TextMesh Pro sets this value when you generate the font Asset. It is not editable.|
|
||||
|**Width/Height**|The font atlas texture's width and height, in pixels.<br/><br/>TextMesh Pro sets these values when you generate the font Asset. They are not editable.|
|
||||
@@ -0,0 +1,157 @@
|
||||
# Font Asset Properties
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||

|
||||
|
||||
Properties are divided into the following sections:
|
||||
|
||||
||||
|
||||
|-|-|-|
|
||||
|**A** | **[Face Info](#face-info)** ||
|
||||
|**B** | **[Generation Settings](#generation-settings)** ||
|
||||
|**C** | **[Atlas & Material](#atlas-material)** ||
|
||||
|**D** | **[Font Weights](#font-weights)** ||
|
||||
|**E** | **[Fallback Font Assets](#fallback-font-assets)** ||
|
||||
|**F** | **[Character Table](#character-table)** | |
|
||||
|**G** | **[Glyph Table](#glyph-table)** ||
|
||||
|**H** | **[Glyph Adjustment Table](#glyph-adjustment-table)** ||
|
||||
|
||||
### Face Info
|
||||
|
||||
The Face Info properties control the font's line metrics. They also include read-only properties that the [Font Asset Creator](FontAssetsCreator.md) generates when you create the Asset.
|
||||
|
||||

|
||||
_Line metrics_
|
||||
|
||||
|Property:|Function:|
|
||||
|-|-|
|
||||
|**Update Texture Atlas**|Open the [Font Asset Creator](FontAssetsCreator.md) pre-configured to modify and regenerate this font Asset.|
|
||||
|**Family Name**|The name of the font used to create this font Asset.<br/><br/>TextMesh Pro sets this value when you generate the font Asset. You cannot change it manually.|
|
||||
|**Style Name**|The style of the font used to create this font Asset. For example, **Regular**, **Bold**, **Italic**, and so on.<br/><br/>TextMesh Pro sets this value when you generate the font Asset. You cannot change it manually.|
|
||||
|**Point Size**|The font size in points.<br/><br/>TextMesh Pro bakes this value into the atlas texture when you generate the font Asset. You cannot change it manually.|
|
||||
|**Scale**|Scales the font by this amount. For example, a value of **1.5** scales glyphs to 150% of their normal size.|
|
||||
|**Line Height**|Controls the distance between the tops of consecutive lines.<br/><br/>If you set a line height greater than the sum of the **Ascent Line** and **Descent Line** values, it creates in a gap between lines.<br/><br/>If you set a line height greater than the sum of the **Ascent Line** and **Descent Line** values, characters on different lines might overlap.|
|
||||
|**Ascent Line**|Controls the maximum distance that glyphs can extend above the baseline. It corresponds to the top of a line.|
|
||||
|**Cap Line**|Controls the distance between the base line and the tops of uppercase glyphs.|
|
||||
|**Mean Line**|Controls the maximum height for non-ascending lowercase glyphs (for example. "a" and "c", but not "b" and "d," which have ascenders).<br/><br/>The tops of rounded glyphs sometimes extend a slightly above the mean line.|
|
||||
|**Baseline**|Controls the height of the baseline.<br/><br/>The baseline is the horizontal line that characters sit on.|
|
||||
|**Descent Line**|Controls the maximum distance that glyphs can extend below the baseline.|
|
||||
|**Underline Offset**|Controls the position of underlines relative to the baseline.|
|
||||
|**Underline Thickness** | Controls the thickness of underlines. |
|
||||
|**Strikethrough Offset**|Controls the position of strikethrough lines relative to the baseline.|
|
||||
|**Superscript Offset**| Offsets superscript text from the baseline.|
|
||||
|**Superscript Size**|Scales superscript text relative to the normal font size.|
|
||||
|**Subscript Offset**| Offsets subscript text from the baseline.|
|
||||
|**Subscript Size**|Scales subscript text relative to the normal font size.|
|
||||
| **Tab Width** | Specifies the width of a TAB character. |
|
||||
|
||||
### Generation Settings
|
||||
|
||||
The [Font Asset Creator](FontAssetsCreator.md) generates these values when you generate the Font Asset.
|
||||
|
||||
> [!NOTE]
|
||||
> When the **Atlas Population Mode** is set to **Dynamic**, you can change the atlas size without regenerating the atlas.
|
||||
|
||||
|Property:||Function:|
|
||||
|-|-|-|
|
||||
|**Source Font File** || |
|
||||
|**Atlas Population Mode** || |
|
||||
| |Dynamic| |
|
||||
| |Static| |
|
||||
|**Atlas Render Mode** || |
|
||||
||SMOOTH|Renders the atlas to an antialiased bitmap.|
|
||||
||RASTER|Renders the atlas to a non-antialiased bitmap.|
|
||||
||SMOOTH_HINTED|Renders the atlas to an antialiased bitmap, and aligns character pixels with texture pixels for a crisper result.|
|
||||
||RASTER_HINTED|Renders the atlas to a non-antialiased bitmap and aligns character pixels with texture pixels for a crisper result.|
|
||||
| |SDF| Renders the atlas using a slower, but more accurate SDF generation mode, and no oversampling. |
|
||||
| |SDFAA| Renders the atlas using a faster, but less accurate SDF generation mode. It produces font atlases that are sufficient for most situations.|
|
||||
| |SDFAA_HINTED| Renders the atlas using a faster, but less accurate SDF generation mode, and aligns character pixels with texture pixels for a crisper result.. It produces font atlases that are sufficient for most situations |
|
||||
| |SDF8| Renders the atlas using a slower, but more accurate SDF generation mode, and 8x oversampling. |
|
||||
| |SDF16| Renders the atlas using a slower, but more accurate SDF generation mode, and 16x oversampling. |
|
||||
| |SDF32| Renders the atlas using a slower, but more accurate SDF generation mode, and 32x oversampling. Use this setting for fonts with complex or small characters. |
|
||||
|**Sampling Point Size** || The size, in points, of characters in the font texture. |
|
||||
|**Padding**||The amount of padding between characters in the font atlas texture.<br/><br/>This value is set when you generate the font Asset, and is not editable.|
|
||||
|**Atlas Width/Height**||The width and height the font atlas texture.<br/><br/>Choose for each dimension, choose one of the available values from the drop-down menu.|
|
||||
|**Multi Atlas Textures** | | |
|
||||
|
||||
|
||||
### Atlas & Material
|
||||
|
||||
This section lists the sub-assets that the [Font Asset Creator](FontAssetsCreator.md) creates when you generate the Asset. Do not edit these directly.
|
||||
|
||||
|Property:|Function:|
|
||||
|-|-|
|
||||
|Font Atlas|The font texture atlas created when you generated the font Asset.|
|
||||
|Font Material|The font material created when you generated the font Asset.|
|
||||
|
||||
### Font Weights
|
||||
|
||||
The Font Weights options control the appearance of bold and italicized text. There are two ways of doing this:
|
||||
|
||||
1. Create different bold and italic variants of the font Asset, and add them to the **Font Table**.<br/><br/>You can specify regular and italic fonts for weights ranging from 100 (Thin) to 900 (Black).
|
||||
|
||||
1. Define "fake" bolding and italicization by setting the **Font Weight > Italic Style** and **Bold Weight** properties.<br/><br/>These settings tell TextMesh Pro how to adjust characters in the current font Asset when you bold or italicize text.
|
||||
|
||||
|
||||
|Property:||Function:|
|
||||
|-|-|-|
|
||||
|**Font Table**||Specify font assets to use for the following font variants.<br/><br/>100 - Thin<br/>200 - Extra-Light<br/>300 - Light<br/>400 - Regular (italic only)<br/>500 - Medium<br/>600 - Semi-Bold<br/>700 - Bold<br/>800 - Heavy<br/>900 - Black <br/><br/> * **400 - Regular > Regular Typeface** is the current font Asset. You cannot change it.<br/><br/> If you don't specify font assets, TextMesh Pro "fakes" bolding and italicization according to the rest of the the **Font Weights** settings. Using "faked" font weights limits you to regular and italic versions of normal and bold text (equivalent to weights of 400 and 700 respectively). |
|
||||
|**Normal Weight**||Set the regular font weight to use when no font Asset is available.|
|
||||
|**Bold Weight**||Set the bold font weight assumed when no font Asset is available.|
|
||||
|**Spacing Offset**||Add space between characters when using the normal text style.|
|
||||
|**Bold Spacing**||Add space between characters when using the fake bold text style (meaning you haven’t specified a Bold font Asset).|
|
||||
|**Italic Style**||If you don’t specify a font Asset for **400 - Regular > Italic Style** variant, TextMeshPro slanting the character sprites in the Normal Style font Asset by an amount defined in the **Italic Style** setting.<br/><br/>Set this value to control the |
|
||||
|**Tab Multiple**||Set the tab size. This value is multiplied by the width of the font's space character to calculate the tab size used.|
|
||||
|
||||
<a name="FallbackFontAssets"></a>
|
||||
### Fallback Font Assets
|
||||
|
||||
Each font Asset contains a limited number of characters. When you use a character that the current Font Asset does not contain, TextMesh Pro searches the fallback font list until it finds a font Asset that includes it. The text object then uses that font to render the character.
|
||||
|
||||
You can use this feature to distribute fonts over multiple textures, or use different fonts for specific characters. Be aware that searching the list for missing characters requires extra computing resources, and that using additional fonts requires additional draw calls.
|
||||
|
||||
For more information about how fallback fonts work, see [The Fallback font chain](FontAssetsFallback.md).
|
||||
|
||||
|Property:|Function:|
|
||||
|-|-|
|
||||
|**Fallback Font Asset list**|Manage the fallback fonts for this font Asset.<br/><br/>Click **+** and **-** to add and remove font slots.<br/><br/>Click the circle icon next to a font to open an Object Picker where you can choose a font Asset.<br/><br/>Drag the handles on the left side of any font Asset to reorder the list.|
|
||||
|
||||
### Character Table
|
||||
|
||||
|
||||
|
||||
### Glyph Table
|
||||
|
||||
The glyph table contains information about each of the glyphs in the Font Asset. You can adjust the attributes of individual glyphs, which is useful when you need to correct problems that can occur when TextMesh Pro imports font data.
|
||||
|
||||
|Property:||Function:|
|
||||
|-|-|-|
|
||||
|**Glyph Search**||Search the character list by character, ASCII value, or Hex value.<br/><br/>Search results are ordered by ASCII value, lowest to highest.|
|
||||
|**Previous Page/Next Page**||Long character lists are split into pages, which you can navigate using these buttons (also located at the bottom of the section).|
|
||||
|**Glyph Properties**||Displays a single glyph’s properties. Each glyph has its own entry.<br/><br/>Click an entry to make it active. You can then edit the glyph, copy it, or remove it from the list.|
|
||||
||Ascii|Displays the character’s ASCII decimal value.|
|
||||
||Hex|Displays the character’s Unicode Hex value.|
|
||||
||Char|Displays the character.|
|
||||
||X, Y, W, H|Define the rectangular area the character occupies in the font atlas.|
|
||||
||OX, OY|Control the placement of the character's sprite, defined at its top-left corner relative to its origin on the baseline.|
|
||||
||ADV|Specify how far to advance along the baseline before placing the next character.|
|
||||
||SF|Change this scaling factor value to adjust the size of the character.|
|
||||
|**Copy to**||Duplicate this glyph.<br/><br/>To make a copy, enter an unused Unicode (Hex) ID in the text field and click **Copy to**.|
|
||||
|**Remove**||Remove this glyph from the list.|
|
||||
|
||||
### Glyph Adjustment Table
|
||||
|
||||
The glyph adjustment table controls spacing between specific pairs of characters. Some fonts include kerning information, which is imported automatically. You can add kerning pairs for fonts that don’t include them.
|
||||
|
||||
|Property:||Function:|
|
||||
|-|-|-|
|
||||
|**Adjustment Pair Search**||Search the adjustment table by character or ASCII value.<br/><br/>Search results include entries where either the left or right character matches the search string.<br/><br/>Search results are ordered by the ASCII value of the left character, lowest to highest.|
|
||||
|**Previous Page/Next Page**||Long adjustment tables are split into pages, which you can navigate using these buttons (also located at the bottom of the section).|
|
||||
|**Glyph Properties**||Displays a single glyph’s properties. Each glyph has its own entry.<br/><br/>Click an entry to make it active. You can then edit the glyph, copy it, or remove it from the list.|
|
||||
||Char (left and right)|Display the left and right characters for the kerning pair.<br/><br/>When you add anew kerning pair, you can specify the left and right characters to use by typing them in these fields.|
|
||||
||ID (left and right)|Display the left and right characters’ ASCII decimal values.<br/><br/>When you add anew kerning pair, you can specify the left and right characters to use by typing their ASCII values in these fields.|
|
||||
||OX, OY|For each character in the kerning pair, set the horizontal (**X**) and vertical (**Y**) offset relative to the character's initial position.|
|
||||
||AX|For each character in the kerning pair, specify how far to advance along the baseline before placing the next character.<br/><br/>Practically speaking, the left **AX** value controls the distance between the characters in the kerning pair, while the right **AX** value controls the distance between the kerning pair and the next character.|
|
||||
|**Add New Kerning Pair**||Add a new entry to the Glyph Adjustment Table.<br/><br/>You cannot duplicate an existing entry.|
|
||||
@@ -0,0 +1,16 @@
|
||||
## About SDF fonts
|
||||
|
||||
TextMesh Pro takes advantage of Signed Distance Field (SDF) rendering to generate font assets that look crisp when you transform and magnify them, and support effects such as outlines and drop shadows.
|
||||
|
||||
Unlike black and white bitmap font textures, SDF font assets contain contour distance information. In font atlases, this information looks like grayscale gradients running from the middle of each glyph to a point past its edge. The gradient's mid-point corresponds to the edge of the glyph.
|
||||
|
||||
The images below show bitmap and SDF font assets and the rendered text they produce. Notice that the bitmap fonts produce text whose edges are more or less jagged/blurry, depending on how far the text is from the camera, and how it is transformed/distorted. The SDF font, on the other hand produces text with completely smooth edges regardless of the distance from the camera.
|
||||
|
||||

|
||||
_A bitmap font, atlas texture and rendered result_
|
||||
|
||||

|
||||
_A smoothed bitmap, atlas texture and rendered result_
|
||||
|
||||

|
||||
_An SDF font, atlas texture and rendered result_
|
||||
@@ -0,0 +1,88 @@
|
||||
# Rich Text
|
||||
|
||||
Rich text tags alter the appearance and layout of text by supplementing or overriding TextMesh Pro GameObject properties. For example, you can use rich text tags to change the color or alignment of some, or all of your text without modifying its properties or material.
|
||||
|
||||
**To use rich text tags:**
|
||||
* Enter any [supported rich text tags](RichTextSupportedTags.md) in the TextMeshPro [**Text** input field](TMPObjectUIText.md#text), inline with the text you want to display.
|
||||
|
||||
**To disable rich text for a TextMesh Pro object:**
|
||||
* Open the TextMesh Pro GameObject in the Inspector, and disable the **Text Mesh Pro > Extra Settings > Rich Text** property.
|
||||
|
||||
## Rich Text Tags
|
||||
|
||||
Rich text tags are similar to HTML or XML tags, but have less strict syntax.
|
||||
|
||||
A simple tag consists of only the tag name, and looks like this:
|
||||
|
||||
`<tag>`
|
||||
|
||||
For example, the `<b>` tag makes text bold, while the `<u>` tag underlines it.
|
||||
|
||||
### Tag attributes and values
|
||||
|
||||
Some tags have additional values or attributes, and look like this:
|
||||
|
||||
`<tag="value">` or `<tag attribute="value">`
|
||||
|
||||
For example `<color=”red”>` makes text red. `Red` is the `color` tag’s value.
|
||||
|
||||
Similarly `<sprite index=3>` inserts the fourth sprite from the default Sprite Asset. `index` is an attribute of the `sprite` tag, and its value is `3`.
|
||||
|
||||
A tag, including its attributes, can be up to 128 characters long.
|
||||
|
||||
The table below lists possible attribute/value types.
|
||||
|
||||
|Attribute/value type:|Example|
|
||||
|-------------|-------------|
|
||||
|Decimals|`0.5`|
|
||||
|Percentages|`25%`|
|
||||
|Pixel values|`5px`|
|
||||
|Font units|`1.5em`|
|
||||
|Hex color values|`#FFFFFF` (RGB)<br/>`#FFFFFFFF` (RGBA)<br/>`#FF` (A)|
|
||||
|Names|Both `<link=”ID”>` and `<link=ID>` are valid.|
|
||||
|
||||
## Tag scope and nested tags
|
||||
|
||||
Tags have a scope that defines how much of the text they affect. Most of the time, a tag added to a given point in the text affects all of the text from that point forward.
|
||||
|
||||
For example, adding the tag `<color="red">` at the beginning of the text affects the entire text block:
|
||||
|
||||
`<color="red">This text is red`
|
||||
|
||||
<br/>
|
||||
_Successive color tags_
|
||||
|
||||
Adding the same tag in the middle of the text block affects only the text between the tag and the end of the block :
|
||||
|
||||
`This text turns<color="red"> red`
|
||||
|
||||
<br/>
|
||||
_Successive color tags_
|
||||
|
||||
If you use the same tag more than once in a text block, the last tag supersedes all previous tags of the same type.
|
||||
|
||||
`<color="red">This text goes from red<color="green"> to green`
|
||||
|
||||
<br/>
|
||||
_Successive color tags_
|
||||
|
||||
You can also limit the scope of most tags using a closing tag. Closing tags contain only a forward slash and the tag name, like this: `</tag>`
|
||||
|
||||
Tags can also be _nested_ so one tag’s scope is within another tag’s scope. For example:
|
||||
|
||||
```
|
||||
<color=red>This text is <color=green>mostly </color>red.
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Successive color tags_
|
||||
|
||||
The first `<color>` tag’s scope is the entire text block. The the second `<color>` tag has a closing tag that limits its scope to one word.
|
||||
|
||||
When you nest tags, you don't have to close their scopes in the same order that you started them.
|
||||
|
||||
## Rich-text tags and right-to-left text
|
||||
|
||||
TextMesh Pro's right-to-left editor does not distinguish between regular text and rich text tags. Rich text tags that you enter in the right-to-left editor do not work unless you type them right-to-left as well.
|
||||
|
||||
The easiest way to apply rich text tags to right-to-left text is to type the text in the right-to-left editor, and then apply the tags in the regular editor.
|
||||
@@ -0,0 +1,24 @@
|
||||
# Text Alignment
|
||||
|
||||
Each text object has an overall alignment, but you can override this with `<align>` tags. All [horizontal alignment options](TMPObjectUIText.md#alignment) are available except for **Geometry Center**.
|
||||
|
||||
Normally you put these tags at the start of a paragraph. Successive alignment scopes don't stack. If you put multiple alignment tags on the same line, the last one overrides the others.
|
||||
|
||||
The closing `</align>` tag reverts back to the object's overall alignment.
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
<align="left"><b>Left-aligned</b>
|
||||
|
||||
<align="center"><b>Center-aligned</b>
|
||||
|
||||
<align="right"><b>Right-aligned</b>
|
||||
|
||||
<align="justified"><b>Justified:</b> stretched to fill the display area (except for the last line)
|
||||
|
||||
<align="flush"><b>Flush:</b> stretched to fill the display area (including the last line)
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Text Alignment_
|
||||
@@ -0,0 +1,14 @@
|
||||
# Bold and Italic
|
||||
|
||||
You can apply bold and italic styling to your text with the `<b>` and `<i>` tags respectively. The [font Asset](FontAssetsProperties.md) defines how bold and italicized text looks when rendered.
|
||||
|
||||
The closing `</b>` and `</i>` tags revert to the text's normal appearance.
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
The <i>quick brown fox</i> jumps over the <b>lazy dog</b>.
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Bold and italic._
|
||||
@@ -0,0 +1,16 @@
|
||||
# Character Spacing
|
||||
|
||||
The `<cspace>` tag allows you to adjust character spacing, either absolute or relative to the original font Asset. You can use pixels or font units.
|
||||
|
||||
Postive adjustments push the characters apart, negative adjustments pull them together.
|
||||
|
||||
The closing `</cspace>` tag reverts back to the font's normal spacing.
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
<cspace=1em>Spacing</cspace> is just as important as <cspace=-0.5em>timing.
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Character spacing_
|
||||
@@ -0,0 +1,25 @@
|
||||
# Text Color
|
||||
|
||||
There are two ways to change text color with color tags:
|
||||
|
||||
* Use named colors, as in `<color="colorName">`<br/><br/>
|
||||
The following color names are supported: `black`, `blue`, `green`, `orange`, `purple`, `red`, `white`, and `yellow`.<br/><br/>
|
||||
* Use hexadecimal values, as in `<color=#FFFFFF>` or `<color=#FFFFFFFF>` if you also want to define the alpha value.
|
||||
|
||||
If you apply successive `<color>` tags in the same text, the last one takes precedence over the others until you either add another `<color>`tage or use a closing `</color>` tag to end the current color's scope.
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
<color="red">Red <color=#005500>Dark Green <#0000FF>Blue <color=#FF000088>Semitransparent Red
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Successive color tags_
|
||||
|
||||
```
|
||||
<color="red">Red, <color="blue">Blue,</color> and red again.
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Closing color tag_
|
||||
@@ -0,0 +1,22 @@
|
||||
# Font
|
||||
|
||||
You can switch to a different font using `<font="fontAssetName">`.
|
||||
|
||||
The font you specify replaces the default font until you insert a closing `<font>` tag. Font tags can be nested.
|
||||
|
||||
You can also use the `material` attribute to switch between different materials for a single font.
|
||||
|
||||
You must place the font and material assets in the directory that is specified in the **TextMesh Settings > Default Font Asset > Path** field. The default path is `Assets/TextMesh Pro/Resources/Fonts & Materials`. If you don't have it in your project, select **Window > TextMeshPro > Import TMP Essential Resources** to add it. For more information, refer to [Importing required resources into projects](index.md).
|
||||
|
||||
To revert to the default font:
|
||||
* Close all open font tags using `</font>` tag
|
||||
* Use another `<font>` tag and set the font Asset name to `default`
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
Would you like <font="Impact SDF">a different font?</font> or just <font="NotoSans" material="NotoSans Outline">a different material?
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Mixing fonts and materials_
|
||||
@@ -0,0 +1,26 @@
|
||||
# Font weight
|
||||
|
||||
Use the `<font-weight>` tag to switch between the font weights available for the current [Font Asset](FontAssets.md).
|
||||
|
||||
You specify the weight using its numeric value, for example `400` for **normal**, `700` for **bold**, and so on.
|
||||
|
||||
You can only apply font weights defined in the [Font Asset properties](FontAssetsProperties.md#FontWeights). If you have not defined any font weights, you can still use values of **400** and **700** to apply the multipliers set in the **Normal Weight** and **Bold Weight** properties.
|
||||
|
||||
The closing `</font-weight>` tag reverts to the original font specified for the TextMesh Pro object.
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
<font-weight="100">Thin</font-weight>
|
||||
<font-weight="200">Extra-Light</font-weight>
|
||||
<font-weight="300">Light</font-weight>
|
||||
<font-weight="400">Regular</font-weight>
|
||||
<font-weight="500">Medium</font-weight>
|
||||
<font-weight="600">Semi-Bold</font-weight>
|
||||
<font-weight="700">Bold</font-weight>
|
||||
<font-weight="800">Heavy</font-weight>
|
||||
<font-weight="900">Black</font-weight>
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Font weights_
|
||||
@@ -0,0 +1,36 @@
|
||||
# Gradient
|
||||
|
||||
The `<gradient>` tag applies a pre-defined gradient preset to text.
|
||||
|
||||
For more information about creating gradient presets, see the documentation on [Gradient Presets](ColorGradientsPresets.md).
|
||||
|
||||
The closing `</gradient>` tag reverts to the TextMesh pro object's original color.
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
Apply<b>
|
||||
<gradient="Yellow to Orange - Vertical">any
|
||||
<gradient="Light to Dark Green - Vertical">gradient
|
||||
<gradient="Blue to Purple - Vertical">preset</gradient>
|
||||
</b>to your text
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Successive gradient tags ended with a closing `</gradient>`_
|
||||
|
||||
**Note:** When you apply a gradient using this tag, it's multiplied by the TextMesh Pro object's current vertex colors.
|
||||
|
||||
```
|
||||
This <gradient="Light to Dark Green - Vertical">Light to Dark Green gradient</gradient> is tinted by the red vertex color
|
||||
```
|
||||
<br/>
|
||||
_Applying a green gradient to red text_
|
||||
|
||||
To apply the pure gradient to a selection of text, you can use a `<color>` tag to "reset" the color to white before applying the gradient.
|
||||
|
||||
```
|
||||
This <color=#FFFFFFFF><gradient="Light to Dark Green - Vertical">Light to Dark Green gradient</gradient></color> is no longer tinted by the red vertex color
|
||||
```
|
||||
<br/>
|
||||
_"Resetting" the text's vertex color before applying a gradient_
|
||||
@@ -0,0 +1,17 @@
|
||||
# Indentation
|
||||
|
||||
The `<indent>` tag controls the horizontal caret position the same way the [`<pos>`](RichTextPos.md) tag does, but the effect persists across lines.
|
||||
|
||||
Use this tag to create text patterns, such as bullet points, that work with word-wrapping.
|
||||
|
||||
You specify indentation in pixels, font units, or percentages.
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
1. <indent=15%>It is useful for things like bullet points.</indent>
|
||||
2. <indent=15%>It is handy.
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Using indentation to make a list._
|
||||
@@ -0,0 +1,20 @@
|
||||
# Lowercase, Uppercase, and Smallcaps
|
||||
|
||||
The `<lowercase>`, `<uppercase>`, `<allcaps>` and `<smallcaps>` tags alter the capitalization of your text before rendering. The text in the **Text** field remains as you entered it.
|
||||
|
||||
* The `<lowercase>` and `<uppercase>` tags work as you would expect, converting to all capitals or no capitals before rendering.
|
||||
|
||||
* The `<allcaps>` tag is functionally identical to `<uppercase>`.
|
||||
|
||||
* The `<smallcaps>` tag works like `<uppercase>`, but also reduces the size of all characters that you entered in lowercase.
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
<lowercase>Alice and Bob watched TV.</lowercase>
|
||||
<uppercase>Alice and Bob watched TV.</uppercase>
|
||||
<allcaps>Alice and Bob watched TV.</allcaps>
|
||||
<smallcaps>Alice and Bob watched TV.</smallcaps>
|
||||
```
|
||||
<br/>
|
||||
_Modifying capitalization._
|
||||
@@ -0,0 +1,14 @@
|
||||
# Line Break
|
||||
|
||||
Use the `<br>` tag to force a line break in text.
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
Add line breaks wherever you want
|
||||
|
||||
Add line breaks <br>wherever <br>you <br>want
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Adding line breaks_
|
||||
@@ -0,0 +1,22 @@
|
||||
# Line Height
|
||||
|
||||
Use the `<line-height>` tag to manually control line height. The line-height controls how far down from the current line the next line starts. It does not change the current line.
|
||||
|
||||
Smaller values pull lines closer together. Larger values push them farther apart.
|
||||
|
||||
You can specify the line height in pixels, font units, or percentages.
|
||||
|
||||
Adjustments you make using this tag are relative to the line-height specified in the [Font Asset](FontAssetsProperties.md#FaceInfo). The `</line-height>` closing tag reverts to this height.
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
Line height at 100%
|
||||
<line-height=50%>Line height at 50%
|
||||
<line-height=100%>Rather cozy.
|
||||
<line-height=150%>Line height at 150%
|
||||
Such distance!
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Different line heights_
|
||||
@@ -0,0 +1,16 @@
|
||||
# Line Indentation
|
||||
|
||||
The `<line-indent>` tag inserts horizontal space directly after it, and before the start of each new line. It only affects manual line breaks (including line breaks created with the [`<br>` tag](RichTextLineBreak.md), not word-wrapped lines.
|
||||
|
||||
You can specify the indentation in pixels, font units, or percentages.
|
||||
|
||||
The `</line-indent>` closing tag ends the indentation of lines.
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
<line-indent=15%>This is the first line of this text example.
|
||||
This is the second line of the same text.
|
||||
```
|
||||
<br/>
|
||||
_Indent every new line, with one tag_
|
||||
@@ -0,0 +1,7 @@
|
||||
# Text Link
|
||||
|
||||
You can use `<link="ID">my link</link>` to add link metadata to a text segment. The link ID should be unique to allow you to retrieve its ID and link text content when the user interacts with your text.
|
||||
|
||||
You do not have to give each link a unique ID. You can reuse IDs when it makes sense, for example when linking to the same data multiple times. The `linkInfo` array contains each ID only once.
|
||||
|
||||
While this link enables user interaction, it does not change the appearance of the linked text. You have to use other tags for that.
|
||||
@@ -0,0 +1,19 @@
|
||||
# Margin
|
||||
|
||||
You can increase the horizontal margins of the text with the `<margin>` tag.
|
||||
|
||||
If you only want to adjust the left or right margin, you can use the `<margin-left>` or `<margin-right>` tag.
|
||||
|
||||
You can specify the margins in pixels, font units, and percentages. Negative values have no effect.
|
||||
|
||||
Adjustments you make using this tag are relative to the margins specified in the [TexMesh Pro object](TMPObjectUIText.md#extra-settings). The `</margin>` closing tag reverts to this value.
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
Our margins used to be very wide.
|
||||
<margin=5em>But those days are long gone.
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Adjusting margins_
|
||||
@@ -0,0 +1,16 @@
|
||||
# Mark
|
||||
|
||||
The `<mark>` tag adds an overlay on top of the text. You can use it to highlight portions of your text.
|
||||
|
||||
Because markings are overlaid on the text, you have to give them a semitransparent color for the text to show through. You can do this by specifying the color using a hex value that includes Alpha.
|
||||
|
||||
You cannot combine marks. Each tag affects the text between itself and the next `<mark>` tag or a closing `</mark>` tag.
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
Text <mark=#ffff00aa>can be marked with</mark> an overlay.
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Marked text_
|
||||
@@ -0,0 +1,16 @@
|
||||
# Monospacing
|
||||
|
||||
You can override a font's character spacing and turn it into a monospace font with the `<mspace>` tag. This gives all characters the same amount of horizontal space.
|
||||
|
||||
You can specify the character width in pixels or font units.
|
||||
|
||||
The `</mspace>` closing tag clears all monospace overrides.
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
Any font can become <mspace=2.75em>monospace, if you really want it.
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Treating a font as monospace_
|
||||
@@ -0,0 +1,16 @@
|
||||
# No Break
|
||||
|
||||
Use the `<nobr>` tag to keep specific words together, and not be separated by word wrapping.
|
||||
|
||||
The closing `</nobr>` tag reverts to the default behavior of allowing words to break where the line wraps.
|
||||
|
||||
If you apply the `<nobr>` tag to a segment of text that is too big to fit on one line, the segment will break wherever the line wraps.
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
You don't want <nobr>I M P O R T A N T</nobr> things to be broken up.
|
||||
```
|
||||
|
||||
<br/>
|
||||
_The important parts stay together_
|
||||
@@ -0,0 +1,14 @@
|
||||
# Noparse
|
||||
|
||||
The `<noparse>` tag creates a scope that TextMesh Pro does not parse.
|
||||
|
||||
This is useful for rendering text that TextMesh Pro normally interprets as a rich text tag, without disabling rich text tags.
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
Use <noparse><b></noparse> for <b>bold</b> text.
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Prevent parsing of some tags_
|
||||
@@ -0,0 +1,12 @@
|
||||
# Text Opacity (Alpha)
|
||||
|
||||
Use the `<alpha>` tag to change text opacity. It works with hexadecimal values.
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
<alpha=#FF>FF <alpha=#CC>CC <alpha=#AA>AA <alpha=#88>88 <alpha=#66>66 <alpha=#44>44 <alpha=#22>22 <alpha=#00>00
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Successive `<alpha>` tags_
|
||||
@@ -0,0 +1,5 @@
|
||||
# Page Break
|
||||
|
||||
You can use the `<page>` tag to insert page breaks in your text. This cuts the text into separate blocks.
|
||||
|
||||
For page breaks to work, you must set the TextMesh Pro object's [**Overflow** mode](TMPObjectUIText.md#wrapping) to **Page**.
|
||||
@@ -0,0 +1,21 @@
|
||||
# Horizontal Position
|
||||
|
||||
The `<pos>` tag gives you direct control over the horizontal caret position. This works best with horizontal alignment.
|
||||
|
||||
The `<pos>` tag's position in the line has no effect on the caret position.
|
||||
|
||||
This tag is best used with left alignment.
|
||||
|
||||
You can specify the horizontal position in pixels, font units, or percentages.
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
at <pos=75%>75%
|
||||
at <pos=25%>25%
|
||||
at <pos=50%>50%
|
||||
at 0%
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Setting caret positions_
|
||||
@@ -0,0 +1,28 @@
|
||||
# Rotate
|
||||
|
||||
Use the `<rotate>` tag to rotate each character about its center. Specify the amount of rotation in degrees. Positive values rotate characters counter-clockwise. Negative values rotate them clockwise.
|
||||
|
||||
Rotation affects the spacing between characters, and may cause characters to overlap in some cases. Use the [`<cspace>`](RichTextCharacterSpacing) tag to correct character spacing as needed.
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
Rotate text <rotate="-10">counter-clockwise</rotate> or <rotate="10">clockwise</rotate>
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Text rotated counter-clockwise (left) and clockwise (right)_
|
||||
|
||||
```
|
||||
Rotate text <rotate="45">counter-clockwise</rotate>
|
||||
```
|
||||
|
||||
<br/>
|
||||
_More rotation makes it more likely that characters overlap_
|
||||
|
||||
```
|
||||
Rotate text <cspace="15"><rotate="45">counter-clockwise</rotate></cspace>
|
||||
```
|
||||
|
||||
<br/>
|
||||
_The `<cspace>` tag adjusts character spacing, and can help correct overlap caused by rotation_
|
||||
@@ -0,0 +1,18 @@
|
||||
# Font Size
|
||||
|
||||
Use the `<size>` tag to adjust the font size of your text.
|
||||
|
||||
You can specify the new size in pixels (`px`), font units (`em`), or percentages (`%`).
|
||||
|
||||
Pixel adjustments can be absolute (`5px`, `10px`, and so on) or relative (`+1` or `-1`, for example). Relative sizes are based on the original font size, so they're not cumulative.
|
||||
|
||||
Font unit adjustments are always relative to the original font size. For example, `<size=1em>` sets the font size to the original size, `<size=2em>` doubles the size, and `<size=0.5em>` halves it.
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
<size=100%>Echo <size=80%>Echo <size=60%>Echo <size=40%>Echo <size=20%>Echo
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Adjusting font size_
|
||||
@@ -0,0 +1,16 @@
|
||||
# Horizontal Space
|
||||
|
||||
The `<space>` tag inserts a horizontal offset, as if you inserted multiple spaces.
|
||||
|
||||
You can specify the offset in pixels or font units.
|
||||
|
||||
When the `<space>` tag touches adjacent text, it appends or prepends the offset to that text, which affects how the text wraps. If you do not want the offset to wrap independently of adjacent text, make sure to add a space character on either side of the `<space>` tag.
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
Give me some <space=5em> space.
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Adding some space_
|
||||
@@ -0,0 +1,18 @@
|
||||
# Sprite
|
||||
|
||||
The `<sprite>` tag inserts images from a [Sprite Asset](Sprites.md) into your text. Sprite assets must be located in the folder specified in the [TextMesh Pro settings](Settings.md).
|
||||
|
||||
You can access sprites from the default sprite assets by index `<sprite index=1>` or by name `<sprite name="spriteName">`. When accessing a sprite from the default Asset by index, you can also use the index shorthand, `<sprite=1>`,
|
||||
|
||||
To use sprites from a different Asset, specify the Asset before accessing the sprites by index `<sprite="assetName" index=1>` or by name `<sprite="assetName" name="spriteName">`.
|
||||
|
||||
Adding the `tint=1` attribute to the tag tints the sprite with the [TextMesh Pro object's](TMPObjectUIText.md#Color) **Vertex Color**. You can choose a different color by adding a `color` attribute to the tag (`color=#FFFFFF`).
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
Sprites! <sprite=0> More sprites! <sprite index=3> And even more! <sprite name="Default Sprite Asset_4" color=#55FF55FF>
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Inserting sprites from the default sprite asset_
|
||||
@@ -0,0 +1,16 @@
|
||||
# Strikethrough and Underline
|
||||
|
||||
You can add additional lines that run along your text.
|
||||
|
||||
- The `<underline>` tag draws the line slightly below the baseline to underline the text. The vertical offset is defined in the [Font Asset](FontAssetsProperties.md#FaceInfo).
|
||||
|
||||
- The `<strikethrough>` tag places the line slightly above the baseline so it crosses out the text.
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
The <s>quick brown</s> fox jumps over <u>the lazy dog</u>.
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Strikethrough and underline_
|
||||
@@ -0,0 +1,15 @@
|
||||
# Style
|
||||
|
||||
Apply custom styles using the `<style>` tag. For more information about creating custom styles, see the documentation on [Style Sheets](StyleSheets.md).
|
||||
|
||||
The opening `<style>` tag must contain the style name. The closing `</style>` tag, which simply closes the last style opened.
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
<style="Title">Styles</style>
|
||||
You can create your own.
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Applying a custom style_
|
||||
@@ -0,0 +1,14 @@
|
||||
# Subscript and Superscript
|
||||
|
||||
Use the `<sub>` and `<sup>` tags to render text as superscript or subscript. This is often used in scientific notation and ordinal numbering (1st, 2nd, etc.).
|
||||
|
||||
Set the offset and size for sub- and superscript in the [Font Asset](FontAssetsProperties.md#FaceInfo).
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
We have 1m<sup>3</sup> of H<sub>2</sub>O.
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Subscript and superscript_
|
||||
@@ -0,0 +1,5 @@
|
||||
# Supported Rich Text Tags
|
||||
|
||||
The following table is a quick reference of supported rich text tags. For details, see the main pages for specific tags.
|
||||
|
||||
[!include[](include-rich-text-tags.md)]
|
||||
@@ -0,0 +1,16 @@
|
||||
# Vertical Offset
|
||||
|
||||
Use the `<voffset>` tag to offset the text baseline vertically. This adjusts the line height accordingly to accommodate the text's offset position. You can compensate for that adjustment by manually adjusting the line height.
|
||||
|
||||
Specify the offset in pixels or font units. The offset is always relative to the original baseline.
|
||||
|
||||
The `</voffset>` closing tag resets the baseline back to its original position.
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
Up <voffset=1em>up <voffset=2em>UP</voffset> and <voffset=-0.5em>down</voffset> we go again.
|
||||
```
|
||||
|
||||
<br/>
|
||||
_Vertical offset_
|
||||
@@ -0,0 +1,18 @@
|
||||
# Text Width
|
||||
|
||||
Use the `<width>` tag adjust the horizontal size of text area. The change takes effect on the current line, after the tag. Typically, you place the tag at the start of a paragraph.
|
||||
|
||||
If you add more than one `,width>` tag to a line, the last one takes precedence over the others.
|
||||
|
||||
You can specify the width in either pixels, font units, or percentages. The adjusted width cannot exceed the TextMesh Pro object's original width.
|
||||
|
||||
The closing `</width>` tag reverts to the original width.
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
I remember when we had lots of space for text.
|
||||
<width=60%>But those days are long gone.
|
||||
```
|
||||
<br/>
|
||||
_Adjusting text area width_
|
||||
@@ -0,0 +1,129 @@
|
||||
# Settings
|
||||
|
||||
TextMesh Pro’s project-wide settings are stored in a special Asset named TMP Settings. This Asset must be stored in a Resources folder. By default it’s in the `Assets/TextMesh` Pro folder.
|
||||
|
||||
To edit the settings, either select the Asset in the Project View or open the **Project Settings** window and choose **TextMesh Pro** from the category list.
|
||||
|
||||
<br/>
|
||||
_TextMesh Pro Settings_
|
||||
|
||||
The Settings are divided into the following groups:
|
||||
|
||||
|Group:|Function:|
|
||||
|-|-|
|
||||
|**A** | **[Default Font Asset](#default-font-asset):** Set the default font for text objects. |
|
||||
|**B** | **[Fallback Font Assets](#fallback-font-assets):** Choose font assets to search when TexMesh Pro can’t find a character in a text object’s main font Asset. |
|
||||
|**C** | **[Fallback Material Settings](#fallback-material-settings):** Set style options for characters retrieved from fallback fonts. |
|
||||
|**D** | **[Dynamic Font System Settings](#dynamic-font-system-settings):** Set options for handling missing characters. |
|
||||
|**E** | **[Text Container Default Settings](#text-container-default-settings):** Control the size of the text container for new text objects. |
|
||||
|**F** | **[Text Component Default Settings](#text-component-default-settings):** Set the basic text formatting options for new text objects. |
|
||||
|**G** | **[Default Sprite Asset](#default-sprite-asset):** Choose a default Sprite Asset to use for for rich text sprite tags that do not specify an Asset, and set other sprite-related options. |
|
||||
|**H** | **[Default Style Sheet](#default-style-sheet):** Choose a default style sheet. |
|
||||
|**I** | **[Color Gradient Presets](#color-gradient-presets):** Choose a location to store color gradient presets. |
|
||||
|**J** | **[Line Breaking for Asian Languages](#line-breaking-for-asian-languages):** Define leading and following characters in order to get proper line breaking when using Asian fonts. |
|
||||
|
||||
## Default Font Asset
|
||||
|
||||

|
||||
|
||||
|Property:|Function:|
|
||||
|---------|---------|
|
||||
|**Default Font Asset**|Specify the default font used when you create a new text object.
|
||||
|**Path**|Specify where to store font assets.<br/><br/>The **Path** must point to a subfolder of a Resources folder.|
|
||||
|
||||
## Fallback Font Assets
|
||||
|
||||
When a text object contains a character that is not in its font Asset, TextMesh Pro searches these font assets for the glyph. If the object’s font assets has a local fallback font list, TextMesh Pro searches the fonts in that list first.
|
||||
|
||||

|
||||
|
||||
|Property:|Function:|
|
||||
|-|-|
|
||||
|**Fallback Font Assets List**|Manage the global fallback font assets.<br/><br/>Click **+** and **-** to add and remove font slots.<br/><br/>Click the circle icon next to a font to choose a font Asset using the Object Picker.<br/><br/>Drag the handles on the left side of any font Asset to reorder the list.|
|
||||
|
||||
## Fallback Material Settings
|
||||
|
||||

|
||||
|
||||
|Property:|Function:|
|
||||
|-|-|
|
||||
|**Match Material Presets**|Enable this setting to make glyphs from the fallback font match the style of the main font.<br/><br/>When TextMesh Pro uses a glyph from a fallback font, it creates a material with the same settings as the main font’s material.<br/><br/>This looks best when the main font and the fallback font are similar.|
|
||||
|
||||
## Dynamic Font System Settings
|
||||
|
||||
These are project-wide settings for handling missing glyphs.
|
||||
|
||||

|
||||
|
||||
|Property:|Function:|
|
||||
|-|-|
|
||||
|**Get Font Features at Runtime** | |
|
||||
|**Replacement**|Specify the ID of the character to use when TextMesh Pro cannot find a missing glyph in any of the fallback fonts.<br/><br/>The default value of 0 produces the outline of a square.|
|
||||
|**Disable Warnings**|Enable this setting to prevent Unity from logging a warning for every missing glyph.|
|
||||
|
||||
## Text Container Default Settings
|
||||
|
||||
These settings define the default size for text containers in new text objects.
|
||||
|
||||

|
||||
|
||||
|Property:|Function:|
|
||||
|-|-|
|
||||
|**TextMeshPro**|Set the default size of text containers for new TextMesh Pro 3D GameObjects, in Unity units.|
|
||||
|**TextMeshPro UI**|Set the default size of text containers for new TextMesh Pro UI GameObjects, in Unity units.|
|
||||
|**Enable Raycast Target** | Enable this option to make TextMesh Pro GameObjects targets for raycasting by default. <br/><br/> When you disable this option, the UI ignores TextMesh Pro GameObjects by default when determining what the cursor interacts with. |
|
||||
|**Auto Size Text Container**|Enable this option to automatically size text containers to fit the text when creating new TextMesh Pro UI GameObjects.|
|
||||
|
||||
## Text Component Default Settings
|
||||
|
||||
These settings define default values for new text objects. After adding a text object to the Scene, you can adjust these settings in the object's TextMesh Pro Inspector.
|
||||
|
||||

|
||||
|
||||
|Property:|Function:|
|
||||
|-|-|
|
||||
|**Default Font Size**|Set the default font size, in points.|
|
||||
|**Text Auto Size Ratios**|Set the default **Min** to **Max** size ratio TextMesh Pro uses when it [sets font size automatically](TMPObjectUIText.md#font).|
|
||||
|**Word Wrapping**|Enable this option to turn word wrapping on for all new text objects.|
|
||||
|**Kerning**|Enable this option to toggle kerning on for all new text objects.<br/><br/>If new objects use a font with no kerning data, enabling this setting has no effect.|
|
||||
|**Extra Padding**|Enable this option to add extra padding to character sprites.<br/><br/>TextMesh Pro creates sprites to fit the visible text, but the results aren't always perfect. This setting reduces the chances that glyphs are cut off at the boundaries of their sprites.|
|
||||
|**Tint All Sprites**|By default, sprites aren't affected by the text's vertex colors. Enable Tint All Sprites changes this.|
|
||||
|**Parse Escape Sequence**|Enable this option to make TextMesh Pro interpret backslash-escaped characters as special characters.<br/><br/>For example `\n` is interpreted as a newline, `\t` as a tab, and so on.<br/><br/>**Note:** This applies to rendered text. In code, escaped characters are already parsed by the compiler.|
|
||||
|
||||
## Default Sprite Asset
|
||||
|
||||
|
||||

|
||||
|
||||
|Property:|Function:|
|
||||
|-|-|
|
||||
|**Default Sprite Asset** | Choose the [Sprite Asset](Sprites.md) for TextMesh Pro GameObjects to use by default. |
|
||||
|**IOS Emoji Support** | Toggle support for iOS emoji. |
|
||||
|**Path** | Specify where to store Sprite Assets.<br/><br/>The **Path** must point to a subfolder of a Resources folder. |
|
||||
|
||||
## Default Style Sheet
|
||||
|
||||

|
||||
|
||||
|Property:|Function:|
|
||||
|-|-|
|
||||
|**Default Style Sheet**|You can choose a single [style sheet](StyleSheets.md) Asset, which is used by all text objects in the project.|
|
||||
|
||||
## Color Gradient Presets
|
||||
|
||||

|
||||
|
||||
|Property:|Function:|
|
||||
|-|-|
|
||||
|**Path**|Specify where to store Sprite Assets.<br/><br/>The **Path** must point to a subfolder of a Resources folder.|
|
||||
|
||||
## Line Breaking for Asian Languages
|
||||
|
||||
To obtain correct line-breaking behavior for Asian languages, you must specify which characters behave as leading and following characters. This is done via two text assets.
|
||||
|
||||

|
||||
|
||||
|Property:|Function:|
|
||||
|-|-|
|
||||
|**Leading Characters**|Specify the text file that contains the list of leading characters.|
|
||||
|**Following Characters**|Specify the text file that contains the list of following characters.|
|
||||
@@ -0,0 +1,15 @@
|
||||
# Shaders
|
||||
|
||||
TextMesh Pro has been designed to take advantage of signed distance field (SDF) rendering and includes a collection of shaders for this purpose. There are also bitmap-only shaders, in case you don't want to use SDF rendering.
|
||||
|
||||
All shaders have a desktop and a mobile version. The mobile versions are less demanding and suitable for mobile devices, but support fewer effects. All shaders can be found in the shader menu under TextMeshPro and TextMeshPro / Mobile.
|
||||
|
||||
## SDF Shaders
|
||||
|
||||
There are three variants of the SDF shader, known as Distance Field, Distance Field (Surface), and Distance Field Overlay. The regular and overlay shaders are unlit, so they don't interact with the Scene lighting. They can support locally simulated lighting effects instead.
|
||||
|
||||
The surface shader versions do interact with the Scene lighting. They use Unity's surface shader framework and are quite flexible, but also more demanding on the GPU. They are not physically based shaders.
|
||||
|
||||
SDF shaders can use the distance data to generate special effects, like outlines, underlays, and bevels. These effects often increase the visual size of the text. When taken to their extremes, you might see artifacts appear around the edges of character sprites. If this happens, scale down the effects. For example, a soft dilated underlay with large offsets might take things too far.
|
||||
|
||||
The artifacts occur because data from adjacent characters in the font atlas will bleed into the current character. You can increase the padding when importing a font to give the effects more space.
|
||||
@@ -0,0 +1,38 @@
|
||||
# Bitmap Shader
|
||||
|
||||
The Bitmap shader is designed to use bitmap-only fonts. It treats the font atlas like a regular texture, displaying it directly, and does not support any text effects. Bitmap-textured text becomes blocky when you zoom in on it.
|
||||
|
||||
## Properties
|
||||
|
||||

|
||||
|
||||
 **[Face](#Face):** Controls the text's overall appearance.
|
||||
|
||||
 **[Debug Settings](#DebugSettings):** Exposes internal shader properties that are sometimes useful for troubleshooting.
|
||||
|
||||
<a name="Face"></a>
|
||||
### Face
|
||||
|
||||
Description
|
||||
|
||||
|
||||
| Property: ||Description |
|
||||
|--------------|-------------|--|
|
||||
| **Color** ||Adjust the face color of the text.<br/><br/>The value you set here is multiplied with the vertex **Colors** you set in the TextMeshPro component.<br/><br/>Set this to white to use the original vertex colors.<br/><br/>Set this to black to cancel out the vertex colors.<br/><br/>Similarly, setting the Alpha to **1** uses the original vertex-color alpha, while setting it to **0** removes any alpha set in the original vertex colors.|
|
||||
| **Texture** ||Apply a texture to the text face.<br/><br/>The texture is multiplied with the face **Color** and the vertex colors in the TextMesh Pro component to produce the final face color.<br/><br/>The **Horizontal Mapping** and **Vertical Mapping** properties in the TextMesh Pro component determine how TextMesh Pro fits the texture to the text face.|
|
||||
||**Tiling X/Y** |Increase these values to repeat the texture across the text surface, in accordance with the TextMesh Pro object's **Horizontal Mapping** and **Vertical Mapping** properties.|
|
||||
||**Offset X/Y** |Adjust these values to change the texture's relative position, horizontally or vertically, on the text surface.|
|
||||
|
||||
<a name="DebugSettings"></a>
|
||||
### Debug Settings
|
||||
|
||||
The debug section exposes some of the shader’s internal properties. They can be helpful for troubleshooting problems you encounter with the shader.
|
||||
|
||||
| Property: | Description |
|
||||
|----------------------------------|---------------|
|
||||
| **Font Atlas** | Points to the atlas texture used by the font Asset. |
|
||||
| **Offset X/Offset Y** | Offset the vertex positions of each character in X and Y.<br/><br/>You can change these values using a script to create simulated crawl or scrolling FX. |
|
||||
| **Softness X/Softness Y** | When **Mask** is set to **Soft**, set these to adjust the softness of the edge of the text. |
|
||||
| **Clip Rect** | Clip Rect defines the Left (**L**), Bottom (**B**), Right (**R**) and Top (**T**) world space coordinates of the masking rectangle.<br/><br/> This is normally set automatically by the **2D RectMask**. However when using a normal **TextMeshPro** component, this allows you to set / control the masking region. |
|
||||
| **Stencil ID** | The reference value. For more information, refer to [the `ref` parameter in ShaderLab command: Stencil](https://docs.unity3d.com/Manual/SL-Stencil.html). |
|
||||
| **Stencil Comp** | A comparison operation. For more information, refer to [the `comparisonOperation` parameter in ShaderLab command: Stencil](https://docs.unity3d.com/Manual/SL-Stencil.html). |
|
||||
@@ -0,0 +1,38 @@
|
||||
# Bitmap Custom Atlas Shader
|
||||
|
||||
The Bitmap shader is designed to use bitmap-only fonts. It treats the font atlas like a regular texture, displaying it directly, and does not support any text effects. Bitmap-textured text becomes blocky when you zoom in on it.
|
||||
|
||||
## Properties
|
||||
|
||||

|
||||
|
||||
 **[Face](#Face):** Controls the text's overall appearance.
|
||||
|
||||
 **[Debug Settings](#DebugSettings):** Exposes internal shader properties that are sometimes useful for troubleshooting.
|
||||
|
||||
<a name="Face"></a>
|
||||
### Face
|
||||
|
||||
Description
|
||||
|
||||
|
||||
| Property: ||Description |
|
||||
|--------------|-------------|--|
|
||||
| **Color** ||Adjust the face color of the text.<br/><br/>The value you set here is multiplied with the vertex **Colors** you set in the TextMeshPro component.<br/><br/>Set this to white to use the original vertex colors.<br/><br/>Set this to black to cancel out the vertex colors.<br/><br/>Similarly, setting the Alpha to **1** uses the original vertex-color alpha, while setting it to **0** removes any alpha set in the original vertex colors.|
|
||||
| **Texture** ||Apply a texture to the text face.<br/><br/>The texture is multiplied with the face **Color** and the vertex colors in the TextMesh Pro component to produce the final face color.<br/><br/>The **Horizontal Mapping** and **Vertical Mapping** properties in the TextMesh Pro component determine how TextMesh Pro fits the texture to the text face.|
|
||||
||**Tiling X/Y** |Increase these values to repeat the texture across the text surface, in accordance with the TextMesh Pro object's **Horizontal Mapping** and **Vertical Mapping** properties.|
|
||||
||**Offset X/Y** |Adjust these values to change the texture's relative position, horizontally or vertically, on the text surface. |
|
||||
|
||||
<a name="DebugSettings"></a>
|
||||
### Debug Settings
|
||||
|
||||
The debug section exposes some of the shader’s internal properties. They can be helpful for troubleshooting problems you encounter with the shader.
|
||||
|
||||
| Property: | Description |
|
||||
|----------------------------------|--------------|
|
||||
| **Font Atlas** | Points to the atlas texture used by the font Asset. |
|
||||
| **Offset X/Offset Y** | Offset the vertex positions of each character in X and Y.<br/><br/>You can change these values using a script to create simulated crawl or scrolling FX. |
|
||||
| **Softness X/Softness Y** | When **Mask** is set to **Soft**, set these to adjust the softness of the edge of the text. |
|
||||
| **Clip Rect** | Clip Rect defines the Left (**L**), Bottom (**B**), Right (**R**) and Top (**T**) world space coordinates of the masking rectangle.<br/><br/> This is normally set automatically by the **2D RectMask**. However when using a normal **TextMeshPro** component, this allows you to set / control the masking region. |
|
||||
| **Stencil ID** | The reference value. For more information, refer to [the `ref` parameter in ShaderLab command: Stencil](https://docs.unity3d.com/Manual/SL-Stencil.html). |
|
||||
| **Stencil Comp** | A comparison operation. For more information, refer to [the `comparisonOperation` parameter in ShaderLab command: Stencil](https://docs.unity3d.com/Manual/SL-Stencil.html). |
|
||||
@@ -0,0 +1,36 @@
|
||||
# Bitmap Mobile Shader
|
||||
|
||||
The mobile Bitmap shader is designed to use bitmap-only fonts. It treats the font atlas like a regular texture, displaying it directly, and does not support any text effects. Bitmap-textured text becomes blocky when you zoom in on it.
|
||||
|
||||
Unlike the regular Bitmap shader, the mobile Bitmap shader does not support textures for the text face.
|
||||
|
||||
## Properties
|
||||
|
||||

|
||||
|
||||
 **[Face](#Face):** Controls the text's overall appearance.
|
||||
|
||||
 **[Debug Settings](#DebugSettings):** Exposes internal shader properties that are sometimes useful for troubleshooting.
|
||||
|
||||
<a name="Face"></a>
|
||||
### Face
|
||||
|
||||
The Face properties control the overall appearance of the text.
|
||||
|
||||
|
||||
| Property: | Description |
|
||||
|--------------|-------------|
|
||||
| **Color** |Adjust the face color of the text.<br/><br/>The value you set here is multiplied with the vertex **Colors** you set in the TextMeshPro component.<br/><br/>Set this to white to use the original vertex colors.<br/><br/>Set this to black to cancel out the vertex colors.<br/><br/>Similarly, setting the Alpha to **1** uses the original vertex-color alpha, while setting it to **0** removes any alpha set in the original vertex colors.|
|
||||
| **Diffuse Power** |Increase this value to multiply the text **Color**, which brightens the text. |
|
||||
|
||||
<a name="DebugSettings"></a>
|
||||
### Debug Settings
|
||||
|
||||
The debug section exposes some of the shader’s internal properties. They can be helpful for troubleshooting problems you encounter with the shader.
|
||||
|
||||
| Property: | Description |
|
||||
|----------------------------------|-----------------------|
|
||||
| **Font Atlas** | Points to the atlas texture used by the font Asset. |
|
||||
| **Offset X/Offset Y** | Offset the vertex positions of each character in X and Y.<br/><br/>You can change these values using a script to create simulated crawl or scrolling FX. |
|
||||
| **Softness X/Softness Y** | When **Mask** is set to **Soft**, set these to adjust the softness of the edge of the text. |
|
||||
| **Clip Rect** | Clip Rect defines the Left (**L**), Bottom (**B**), Right (**R**) and Top (**T**) world space coordinates of the masking rectangle.<br/><br/> This is normally set automatically by the **2D RectMask**. However when using a normal **TextMeshPro** component, this allows you to set / control the masking region. |
|
||||
@@ -0,0 +1,204 @@
|
||||
# Distance Field / Distance Field Overlay Shaders
|
||||
|
||||
The Distance Field and Distance Field Overlay shaders are two nearly-identical variants of the TextMesh Pro signed distance field (SDF)shader. The difference between the two is that the Distance Field Overlay variant always renders the TextMesh Pro object on top of everything else in the Scene, while the Distance Field variant renders the Scene normally—objects in front of the TextMesh Pro object are rendered on top of the text.
|
||||
|
||||
Both of these variants are unlit, meaning they do not interact with Scene lighting. Instead, they can simulate local directional lighting effects.
|
||||
|
||||
## Properties
|
||||
|
||||
The Distance Field and Distance Field Overlay shaders have identical properties, which you can edit in the TextMesh Pro object Inspector.
|
||||
|
||||
Properties are divided into several sections, some of which you must enable in order to activate the property group.
|
||||
|
||||

|
||||
|
||||
 **[Face](#Face):** Controls the text's overall appearance.
|
||||
|
||||
 **[Outline](#Outline):** Adds a colored and/or textured outline to the text.
|
||||
|
||||
 **[Underlay](#Underlay):** Adds a second rendering of the text underneath the original rendering, for example to add a drop shadow.
|
||||
|
||||
 **[Lighting](#Lighting):** Simulates local directional lighting on the text.
|
||||
|
||||
 **[Glow](#Glow):** Adds a smooth outline to the text in order to simulate glow.
|
||||
|
||||
 **[Debug Settings](#DebugSettings):** Exposes internal shader properties that are sometimes useful for troubleshooting.
|
||||
|
||||
<a name="Face"></a>
|
||||
### Face
|
||||
|
||||
The Face properties control the overall appearance of the text.
|
||||
|
||||

|
||||
|
||||
| Property: || Description |
|
||||
|--------------|---|-------------|
|
||||
| **Color** ||Adjust the face color of the text.<br/><br/>The value you set here is multiplied with the vertex **Colors** you set in the TextMeshPro component.<br/><br/>Set this to white to use the original vertex colors.<br/><br/>Set this to black to cancel out the vertex colors.<br/><br/>Similarly, setting the Alpha to **1** uses the original vertex-color alpha, while setting it to **0** removes any alpha set in the original vertex colors.|
|
||||
| **Texture** ||Apply a texture to the text face.<br/><br/>The texture is multiplied with the face **Color** and the vertex colors in the TextMesh Pro component to produce the final face color.<br/><br/>The **Horizontal Mapping** and **Vertical Mapping** properties in the TextMesh Pro component determine how TextMesh Pro fits the texture to the text face.|
|
||||
| **Tiling X/Y** ||Increase these values to repeat the texture across the text surface, in accordance with the TextMesh Pro object's **Horizontal Mapping** and **Vertical Mapping** properties.|
|
||||
| **Offset X/Y** ||Adjust these values to change the texture's relative position, horizontally or vertically, on the text surface. |
|
||||
| **Speed X/Y** ||Animate the face texture by setting a value greater than **0**.<br/><br/>The resulting animation is a scrolling effect as the texture’s UV coordinates change over time.<br/><br/>**Note:** To see this effect in the Scene view, you must enable **Animated Materials** from the Effects menu in the [Scene view control bar](https://docs.unity3d.com/Manual/ViewModes.html).|
|
||||
| **Softness** ||Adjust the softness of the text edges.<br/><br/>A value of **0** produces crisp, anti-aliased edges.<br/><br/>Values greater than **0** produce increasingly soft/blurry edges.<br/><br/>This setting applies to both the text face and the outline.|
|
||||
| **Dilate** ||Adjust the position of the text contour in the font [distance field](FontAssetsSDF.md).<br/><br/>A value of **0** places the contour halfway, which corresponds to the contour of the original font.<br/><br/>Negative values thin the characters, while positive values thicken them.|
|
||||
|
||||
<a name="Outline"></a>
|
||||
### Outline
|
||||
|
||||
The outline properties allow you to add an outline to the text and control its appearance. The outline is not visible unless you set a **Thickness** value greater than **0**.
|
||||
|
||||

|
||||
|
||||
| Property: |Description |
|
||||
|--------------|------------|
|
||||
| **Color** |Adjust the color for the text outline.|
|
||||
| **Texture** |Apply a texture to the text outline.<br/><br/>The texture is multiplied with the outline **Color** to produce the final outline color.<br/><br/>The **Horizontal Mapping** and **Vertical Mapping** properties in the TextMesh Pro component determine how TextMesh Pro fits the texture to the text outline.|
|
||||
| **Tiling** | |
|
||||
| **Offset** | |
|
||||
| **Speed** |Animate the outline texture by setting a value greater than 0.<br/><br/>The resulting animation is a scrolling effect as the texture’s UV coordinates change over time.<br/><br/>**Note:** To see this effect in the Scene view, you must enable **Animated Materials** from the Effects menu in the [Scene view control bar](https://docs.unity3d.com/Manual/ViewModes.html).|
|
||||
| **Thickness** |Adjust the thickness of the outline. The higher the value, the thicker the line.<br/><br/>The outline is drawn on the text contour, with half its thickness inside the contour and half of it outside the contour.<br/><br/>You can pull it farther in or push it farther out by adjusting the **Face > Dilate** property.|
|
||||
|
||||
<a name="Underlay"></a>
|
||||
### Underlay
|
||||
|
||||
Underlay adds an additional rendering of the text underneath the original rendering. You can use it to add a drop-shadow effect.
|
||||
|
||||

|
||||
|
||||
| Property: | | Description |
|
||||
|--------------|---|-------------|
|
||||
| **Underlay Type** | |Choose the type of underlay to render.|
|
||||
| | None |No underlay. |
|
||||
| | Normal |Renders the underlay underneath the original text.<br/><br/>This creates a standard drop-shadow style effect.|
|
||||
| | Inner |Inverts the underlay and masks it with the original text so it is only visible inside the outline of the original letters.<br/><br/>This creates the type of drop shadow you would see through a cutout of the text.<br/><br/>To see an **Inner** underlay, you must make the text face transparent by setting its Alpha to **0**.|
|
||||
| **Color** | |Set the color of the underlay text. The default is a semi-transparent black.|
|
||||
| **Offset X/Offset Y** | |Offset the underlay text horizontally and vertically from the original text.<br/><br/>For example, if you’re using the underlay to create a drop shadow, you can position it to suggest a specific lighting direction.|
|
||||
| **Dilate** | |Adjust the position of the underlay text contour in the font's [distance field](FontAssetsSDF.md).<br/><br/>A value of **0** places the contour halfway, which corresponds to the contour of the original font.<br/><br/>Negative values thin the characters, while positive values thicken them.|
|
||||
| **Softness** | |Adjust the softness of the underlay text edges.<br/><br/>A value of **0** produces crisp, anti-aliased edges.<br/><br/>Values greater than **0** produce increasingly soft/blurry edges.<br/><br/>When using the underlay to create a drop-shadow, you can use this setting to make the shadows harder or softer.|
|
||||
|
||||
<a name="Lighting"></a>
|
||||
### Lighting
|
||||
|
||||
The Distance Field shader does not react to Scene lighting. Instead, it uses the settings in this group to simulate local directional lighting, and light effects.
|
||||
|
||||
If you want your text to react to Scene lighting, use the [Distance Field Surface](ShaderDistanceFieldSurface.md) shader.
|
||||
|
||||

|
||||
|
||||
The Lighting properties are grouped into the following sections
|
||||
|
||||
 **[Bevel](#Bevel):**
|
||||
|
||||
 **[Local Lighting](#LocalLighting):**
|
||||
|
||||
 **[Bump Map](#BumpMap):**
|
||||
|
||||
 **[Environment Map](#EnvironmentMap):**
|
||||
|
||||
|
||||
<a name="Bevel"></a>
|
||||
#### Bevel
|
||||
|
||||
A bevel adds the illusion of depth to your text. It works like a normal map, except that the shader calculates the bevel using the font’s signed distance field.
|
||||
|
||||
Bevels are prone to showing artifacts, especially when they are too pronounced. These artifacts are more obvious on some materials than on others. Sometimes, artifacts that are more obvious on a simple material are hardly noticeable on a more complex material.
|
||||
|
||||
Although bevels work best with text that has an outline, you can apply them to text with no outline. In that case, you must set a positive **Width**, and should set a negative **Offset** to ensure that the whole bevel is visible.
|
||||
|
||||

|
||||
|
||||
| Property: | | Description |
|
||||
|--------------|-------------|-------------|
|
||||
| **Type** | | Choose the type of bevel to apply |
|
||||
| | Outer Bevel | Produces raised lettering with sloped sides.<br/><br/>The bevel starts at the outside of the outline and increases in height until it reaches the inside of the outline. |
|
||||
| | Inner Bevel | Produces text with a raised outline.<br/><br/>The bevel starts at the outside of the outline, increases in height until it reaches the middle of the outline, and decreases in height until it reaches the inside of the outline. |
|
||||
| **Amount** | | Adjust the steepness of the bevel.<br/><br/>This setting defines the apparent difference in height between low and high regions of the bevel. |
|
||||
| **Offset** | | Offset the bevel from its usual position so it no longer matches the outline.<br/><br/>Different offsets produce very different bevels.<br/><br/>This is especially useful when you apply a bevel to text with no outline. |
|
||||
| **Width** | | Adjust the bevel size.<br/><br/>Set a value of **0** to make the bevel fill the full thickness of the outline.<br/><br/>Set a positive value to make the bevel extend beyond both sides of the outline.<br/><br/>Set a negative value to shrink the bevel toward the middle of the outline.|
|
||||
| **Roundness** | | Increase this value to smooth out more angular regions of the bevel. The effect is often quite subtle. |
|
||||
| **Clamp** | | Set this value to limit the maximum height of the bevel.<br/><br/>Higher values mean the bevel reaches its maximum height sooner.<br/><br/>Clamped outer bevels end before reaching the inside edge of the outline.<br/><br/>Clamped inner bevels have a larger flat region in the middle of the outline. |
|
||||
|
||||
<a name="LocalLighting"></a>
|
||||
#### Local Lighting
|
||||
|
||||
These settings control simulated local directional lighting. They work in combination with the Bevel, Bump Map, and Environment Map settings.
|
||||
|
||||
|
||||

|
||||
|
||||
| Property: |Description |
|
||||
|--------------|------------|
|
||||
| **Light Angle** | Adjust the angle, in radians, of the simulated local light illuminating the text.<br/><br/>The default angle is approximately π (pi) radians, which positions the light above the text.|
|
||||
| **Specular Color** | Set the tint for specular highlights.<br/><br/>These are the highlights you see when the text directly reflects the simulated local light source. |
|
||||
| **Specular Power** | Adjust the appearance of specular highlights. Larger values produce larger and brighter highlights. |
|
||||
| **Reflectivity Power** | Adjust the how much the **[Environment Map](#EnvironmentMap)** contributes to the final color of the text.<br/><br/>The higher the value, the more the text appears to reflect the environment map texture and color. |
|
||||
| **Diffuse Shadow** | Adjust the overall shadow level.<br/><br/>Higher values produce stronger shadowing, and consequently fewer apparent light effects on the text. |
|
||||
| **Ambient Shadow** | Adjust the ambient light level.<br/><br/>Settings lower than **1** darken the text color based on the slope of the text. This is a subtle effect that is only noticeable with strong bevels or normal maps. |
|
||||
|
||||
<a name="BumpMap"></a>
|
||||
#### Bump Map
|
||||
|
||||
You can use a normal map as a bump map to add bumpiness to the text. The bump map affects both the text face and outline, but you can control how strongly it affects each one individually. If your text has both a bevel and a bump map, the two mix together.
|
||||
|
||||

|
||||
|
||||
| Property: |Description |
|
||||
|--------------|------------|
|
||||
| **Texture** | Select a normal map texture to use as a bump map. |
|
||||
| **Face** | Control how much the bump map affects the text face.<br/><br/>A value of **0** shows no effect while a value of **1** shows the full effect of the bump map. |
|
||||
| **Outline** | Control how much the bump map affects the text outline.<br/><br/>A value of **0** shows nothing while a value of **1** shows the full effect of the bump map. |
|
||||
|
||||
<a name="EnvironmentMap"></a>
|
||||
#### Environment Map
|
||||
|
||||
You can use an environment map to add a reflection effect to your text face or outline, or for special image effects. The environment texture must be a cubemap. You can provide a static cubemap or create one at run time via a script.
|
||||
|
||||

|
||||
|
||||
| Property: |Description |
|
||||
|--------------|------------|
|
||||
| **Face Color** | Choose a color to use to tint reflections on the text face.<br/><br/>This color is multiplied with the environment map before the reflectivity effect is applied to the text face.<br/><br/>When this color is set to black, the environment map has no effect on the text face.<br/><br/>When this color is set to white, the environment map is at full strength on the text face. |
|
||||
| **Outline Color** | Choose a color to use to tint reflections on the text outline.<br/><br/>This color is multiplied with the environment map before the reflectivity effect is applied to the text outline.<br/><br/>When this color is set to black, the environment map has no effect on the text outline.<br/><br/>When this color is set to white, the environment map is at full strength on the text outline. |
|
||||
| **Texture** | Choose a cubemap texture to use as an environment map. |
|
||||
| **Rotation** | Rotate the environment map to control which parts of the texture are visible in the reflection. You can animate the rotation to create a sense of movement. |
|
||||
|
||||
<a name="Glow"></a>
|
||||
### Glow
|
||||
|
||||
The **Glow** effect adds a smooth outline on top of other text effects, which is typically used to suggest a glow. The effect is additive, so it is more noticeable on dark backgrounds.
|
||||
|
||||
When the glow extends beyond the text boundary, the surface shader shades it as if it were part of the solid text, meaning that it gets simulated lighting effects such as specular highlights.
|
||||
|
||||

|
||||
|
||||
| Property: |Description |
|
||||
|--------------|------------|
|
||||
| **Color** |Set the tint and strength of the glow effect by adjusting the **Color** and **Alpha** values respectively. |
|
||||
| **Offset** | Adjust the center of the glow effect.<br/><br/>A value of **0** places the center of the glow effect right on the text contour.<br/><br/>Positive values move the center out from the contour. Negative values move it in toward the center of the text. |
|
||||
| **Inner** | Control how far the glow effect extends inward from the its start point (text contour + **Offset**). |
|
||||
| **Outer** | Control how far the glow effect extends outward from the text contour (text contour + Offset). |
|
||||
| **Power** | Control how the glow effect falls off from its center to its edges.<br/><br/>A value of **1** produces a strong, bright glow effect with a sharp linear falloff.<br/><br/>Lower values produce a glow effect with a quick drop in intensity followed by a more gradual falloff. |
|
||||
|
||||
<a name="DebugSettings"></a>
|
||||
### Debug Settings
|
||||
|
||||
The debug section exposes some of the shader’s internal properties. They can be helpful for troubleshooting problems you encounter with the shader.
|
||||
|
||||
|
||||

|
||||
|
||||
| Property: | | Description |
|
||||
|----------------------------------|-----------|-------------|
|
||||
| **Font Atlas** | | Points to the atlas texture used by the font Asset. |
|
||||
| **Gradient Scale** | |Represents the spread / range of the font’s [signed distance field](FontAssetsSDF.md).<br/><br/>This determines the effective range of material properties such as **Outline > Width** and **Underlay > Offset X/Y**.<br/><br/>This value is equal to Padding +1, with Padding being the **Padding** value set when the font Asset was created.<br/><br/>**Note:** This value is displayed for debugging purposes. You should not edit it manually. |
|
||||
| **Texture Width/Texture Height** | | Displays the texture atlas width and height specified in the **Atlas Resolution** settings when the font Asset was created. |
|
||||
| **Scale X/Scale X** | | Set multipliers for the SDF scale.<br/><br/>When set to **0**, characters are rendered as blocks.<br/><br/>Negative values soften the characters, while positive values make them appear sharper. |
|
||||
| **Perspective Filter** | | When using a perspective camera, adjust this setting to make text look softer when viewed at sharp angles.<br/><br/>The default setting of **0.875** is adequate in most cases.<br/><br/>When using orthographic cameras, set this to **0**. |
|
||||
| **Offset X/Offset Y** | | Offset the vertex positions of each character in X and Y.<br/><br/>You can change these values using a script to create simulated crawl or scrolling FX. |
|
||||
| **Mask** | | |
|
||||
| | Mask Off | |
|
||||
| | Mask Hard | |
|
||||
| | Mask Soft | |
|
||||
| **Mask Bounds** | | |
|
||||
| |**Softness X/Softness Y** | When **Mask** is set to **Soft**, set these to adjust the softness of the edge of the text. |
|
||||
| **Match Bounds Renderer** | | |
|
||||
| |**Clip Rect** | Clip Rect defines the Left (**L**), Bottom (**B**), Right (**R**) and Top (**T**) world space coordinates of the masking rectangle.<br/><br/> This is normally set automatically by the **2D RectMask**. However when using a normal **TextMeshPro** component, this allows you to set / control the masking region. |
|
||||
@@ -0,0 +1,91 @@
|
||||
# Distance Field Masking Mobile Shader
|
||||
|
||||
The Distance Field and Distance Field Overlay shaders are two nearly-identical variants of the TextMesh Pro signed distance field (SDF)shader. The difference between the two is that the Distance Field Overlay variant always renders the TextMesh Pro object on top of everything else in the Scene, while the Distance Field variant renders the Scene normally—objects in front of the TextMesh Pro object are rendered on top of the text.
|
||||
|
||||

|
||||
|
||||
Both of these variants are unlit, meaning they do not interact with Scene lighting. Instead, they can simulate local directional lighting effects.
|
||||
|
||||
## Properties
|
||||
|
||||
The Distance Field and Distance Field Overlay shaders have identical properties, which you can edit in the TextMesh Pro object Inspector.
|
||||
|
||||
Properties are divided into several sections, some of which you must enable in order to activate the property group.
|
||||
|
||||

|
||||
|
||||
 **[Face](#Face):** Controls the text's overall appearance.
|
||||
|
||||
 **[Outline](#Outline):** Adds a colored and/or textured outline to the text.
|
||||
|
||||
 **[Underlay](#Underlay):** Adds a second rendering of the text underneath the original rendering, for example to add a drop shadow.
|
||||
|
||||
 **[Debug Settings](#DebugSettings):** Exposes internal shader properties that are sometimes useful for troubleshooting.
|
||||
|
||||
<a name="Face"></a>
|
||||
### Face
|
||||
|
||||
The Face properties control the overall appearance of the text.
|
||||
|
||||

|
||||
|
||||
| Property: | Description |
|
||||
|--------------|-------------|
|
||||
| **Color** |Adjust the face color of the text.<br/><br/>The value you set here is multiplied with the vertex **Colors** you set in the TextMeshPro component.<br/><br/>Set this to white to use the original vertex colors.<br/><br/>Set this to black to cancel out the vertex colors.<br/><br/>Similarly, setting the Alpha to **1** uses the original vertex-color alpha, while setting it to **0** removes any alpha set in the original vertex colors.|
|
||||
| **Softness** |Adjust the softness of the text edges.<br/><br/>A value of **0** produces crisp, anti-aliased edges.<br/><br/>Values greater than **0** produce increasingly soft/blurry edges.<br/><br/>This setting applies to both the text face and the outline.|
|
||||
| **Dilate** |Adjust the position of the text contour in the font [distance field](FontAssetsSDF.md).<br/><br/>A value of **0** places the contour halfway, which corresponds to the contour of the original font.<br/><br/>Negative values thin the characters, while positive values thicken them.|
|
||||
|
||||
<a name="Outline"></a>
|
||||
### Outline
|
||||
|
||||
The outline properties allow you to add an outline to the text and control its appearance. The outline is not visible unless you set a **Thickness** value greater than **0**.
|
||||
|
||||

|
||||
|
||||
| Property: |Description |
|
||||
|--------------|------------|
|
||||
| **Color** |Adjust the color for the text outline.|
|
||||
| **Thickness** |Adjust the thickness of the outline. The higher the value, the thicker the line.<br/><br/>The outline is drawn on the text contour, with half its thickness inside the contour and half of it outside the contour.<br/><br/>You can pull it farther in or push it farther out by adjusting the **Face > Dilate** property.|
|
||||
|
||||
<a name="Underlay"></a>
|
||||
### Underlay
|
||||
|
||||
Underlay adds an additional rendering of the text underneath the original rendering. You can use it to add a drop-shadow effect.
|
||||
|
||||

|
||||
|
||||
| Property: | | Description |
|
||||
|--------------|---|-------------|
|
||||
| **Underlay Type** | |Choose the type of underlay to render.|
|
||||
| | None |No underlay. |
|
||||
| | Normal |Renders the underlay underneath the original text.<br/><br/>This creates a standard drop-shadow style effect.|
|
||||
| | Inner |Inverts the underlay and masks it with the original text so it is only visible inside the outline of the original letters.<br/><br/>This creates the type of drop shadow you would see through a cutout of the text.<br/><br/>To see an **Inner** underlay, you must make the text face transparent by setting its Alpha to **0**.|
|
||||
| **Color** | |Set the color of the underlay text. The default is a semi-transparent black.|
|
||||
| **Offset X/Offset Y** | |Offset the underlay text horizontally and vertically from the original text.<br/><br/>For example, if you’re using the underlay to create a drop shadow, you can position it to suggest a specific lighting direction.|
|
||||
| **Dilate** | |Adjust the position of the underlay text contour in the font's [distance field](FontAssetsSDF.md).<br/><br/>A value of **0** places the contour halfway, which corresponds to the contour of the original font.<br/><br/>Negative values thin the characters, while positive values thicken them.|
|
||||
| **Softness** | |Adjust the softness of the underlay text edges.<br/><br/>A value of **0** produces crisp, anti-aliased edges.<br/><br/>Values greater than **0** produce increasingly soft/blurry edges.<br/><br/>When using the underlay to create a drop-shadow, you can use this setting to make the shadows harder or softer.|
|
||||
|
||||
<a name="DebugSettings"></a>
|
||||
### Debug Settings
|
||||
|
||||
The debug section contains options for defining and controlling masking. It also exposes some of the shader’s internal properties, which can be helpful for troubleshooting.
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
| Property: | | Description |
|
||||
|----------------------------------|-----------|-------------|
|
||||
| **Font Atlas** | | Points to the atlas texture used by the font Asset. |
|
||||
| **Gradient Scale** | |Represents the spread / range of the font’s [signed distance field](FontAssetsSDF.md).<br/><br/>This determines the effective range of material properties such as **Outline > Width** and **Underlay > Offset X/Y**.<br/><br/>This value is equal to Padding +1, with Padding being the **Padding** value set when the font Asset was created.<br/><br/>**Note:** This value is displayed for debugging purposes. You should not edit it manually. |
|
||||
| **Texture Width/Texture Height** | | Displays the texture atlas width and height specified in the **Atlas Resolution** settings when the font Asset was created. |
|
||||
| **Scale X/Scale X** | | Set multipliers for the SDF scale.<br/><br/>When set to **0**, characters are rendered as blocks.<br/><br/>Negative values soften the characters, while positive values make them appear sharper. |
|
||||
| **Perspective Filter** | | When using a perspective camera, adjust this setting to make text look softer when viewed at sharp angles.<br/><br/>The default setting of **0.875** is adequate in most cases.<br/><br/>When using orthographic cameras, set this to **0**. |
|
||||
| **Offset X/Offset Y** | | Offset the vertex positions of each character in X and Y.<br/><br/>You can change these values using a script to create simulated crawl or scrolling FX. |
|
||||
| **Mask Texture** | | Choose a texture file to use as a mask. Black and white images work best. <br/><br/>By default, black regions of the image mask the text, while white areas reveal it. |
|
||||
| **Inverse Mask** | | Invert the mask so that white regions of the image mask the text, while black areas reveal it. |
|
||||
| **Edge Color** | | Tint the edge of the mask with a specific color. <br/><br/>The softer the edge, the larger the tinted region. |
|
||||
| **Edge Softness** | | Make the edges of the mask softer or harder. <br/><br/>A value of **0.5** applies the mask as-is. Higher values soften the edges. Lower values make them sharper. |
|
||||
| **Wipe Position** | | Control the extent to which the text is masked. <br/><br/> A value of **0.5** masks the text exactly as defined by the **Mask Texture**. <br/><br/>A value of **0** fully exposes the text (no masking at all). <br/><br/> A value of **1** hides the text (all of the text is masked). |
|
||||
| **Softness X/Softness Y** | | Apply soft masking to the text in either axis. <br/><br/>Increase the **X** value to add soft masking to the left and right sides of the text. Increase the **Y** value to add soft masking at the top and bottom. <br/><br/>This masking is added to any masking defined by the **Mask Texture**.|
|
||||
| **Clip Rect** | | Clip Rect defines the Left (**L**), Bottom (**B**), Right (**R**) and Top (**T**) world space coordinates of the masking rectangle.<br/><br/> This is normally set automatically by the **2D RectMask**. However when using a normal **TextMeshPro** component, this allows you to set / control the masking region. |
|
||||
@@ -0,0 +1,83 @@
|
||||
# Distance Field / Distance Field Overlay Mobile Shaders
|
||||
|
||||
The Distance Field and Distance Field Overlay shaders are two nearly-identical variants of the TextMesh Pro signed distance field (SDF)shader. The difference between the two is that the Distance Field Overlay variant always renders the TextMesh Pro object on top of everything else in the Scene, while the Distance Field variant renders the Scene normally—objects in front of the TextMesh Pro object are rendered on top of the text.
|
||||
|
||||
Both of these variants are unlit, meaning they do not interact with Scene lighting. Instead, they can simulate local directional lighting effects.
|
||||
|
||||
## Properties
|
||||
|
||||
The Distance Field and Distance Field Overlay shaders have identical properties, which you can edit in the TextMesh Pro object Inspector.
|
||||
|
||||
Properties are divided into several sections, some of which you must enable in order to activate the property group.
|
||||
|
||||

|
||||
|
||||
 **[Face](#Face):** Controls the text's overall appearance.
|
||||
|
||||
 **[Outline](#Outline):** Adds a colored and/or textured outline to the text.
|
||||
|
||||
 **[Underlay](#Underlay):** Adds a second rendering of the text underneath the original rendering, for example to add a drop shadow.
|
||||
|
||||
 **[Debug Settings](#DebugSettings):** Exposes internal shader properties that are sometimes useful for troubleshooting.
|
||||
|
||||
<a name="Face"></a>
|
||||
### Face
|
||||
|
||||
The Face properties control the overall appearance of the text.
|
||||
|
||||

|
||||
|
||||
| Property: | Description |
|
||||
|--------------|-------------|
|
||||
| **Color** |Adjust the face color of the text.<br/><br/>The value you set here is multiplied with the vertex **Colors** you set in the TextMeshPro component.<br/><br/>Set this to white to use the original vertex colors.<br/><br/>Set this to black to cancel out the vertex colors.<br/><br/>Similarly, setting the Alpha to **1** uses the original vertex-color alpha, while setting it to **0** removes any alpha set in the original vertex colors.|
|
||||
| **Softness** |Adjust the softness of the text edges.<br/><br/>A value of **0** produces crisp, anti-aliased edges.<br/><br/>Values greater than **0** produce increasingly soft/blurry edges.<br/><br/>This setting applies to both the text face and the outline.|
|
||||
| **Dilate** |Adjust the position of the text contour in the font [distance field](FontAssetsSDF.md).<br/><br/>A value of **0** places the contour halfway, which corresponds to the contour of the original font.<br/><br/>Negative values thin the characters, while positive values thicken them.|
|
||||
|
||||
<a name="Outline"></a>
|
||||
### Outline
|
||||
|
||||
The outline properties allow you to add an outline to the text and control its appearance. The outline is not visible unless you set a **Thickness** value greater than **0**.
|
||||
|
||||

|
||||
|
||||
| Property: |Description |
|
||||
|--------------|------------|
|
||||
| **Color** |Adjust the color for the text outline.|
|
||||
| **Thickness** |Adjust the thickness of the outline. The higher the value, the thicker the line.<br/><br/>The outline is drawn on the text contour, with half its thickness inside the contour and half of it outside the contour.<br/><br/>You can pull it farther in or push it farther out by adjusting the **Face > Dilate** property.|
|
||||
|
||||
<a name="Underlay"></a>
|
||||
### Underlay
|
||||
|
||||
Underlay adds an additional rendering of the text underneath the original rendering. You can use it to add a drop-shadow effect.
|
||||
|
||||

|
||||
|
||||
| Property: | | Description |
|
||||
|--------------|---|-------------|
|
||||
| **Underlay Type** | |Choose the type of underlay to render.|
|
||||
| | None |No underlay. |
|
||||
| | Normal |Renders the underlay underneath the original text.<br/><br/>This creates a standard drop-shadow style effect.|
|
||||
| | Inner |Inverts the underlay and masks it with the original text so it is only visible inside the outline of the original letters.<br/><br/>This creates the type of drop shadow you would see through a cutout of the text.<br/><br/>To see an **Inner** underlay, you must make the text face transparent by setting its Alpha to **0**.|
|
||||
| **Color** | |Set the color of the underlay text. The default is a semi-transparent black.|
|
||||
| **Offset X/Offset Y** | |Offset the underlay text horizontally and vertically from the original text.<br/><br/>For example, if you’re using the underlay to create a drop shadow, you can position it to suggest a specific lighting direction.|
|
||||
| **Dilate** | |Adjust the position of the underlay text contour in the font's [distance field](FontAssetsSDF.md).<br/><br/>A value of **0** places the contour halfway, which corresponds to the contour of the original font.<br/><br/>Negative values thin the characters, while positive values thicken them.|
|
||||
| **Softness** | |Adjust the softness of the underlay text edges.<br/><br/>A value of **0** produces crisp, anti-aliased edges.<br/><br/>Values greater than **0** produce increasingly soft/blurry edges.<br/><br/>When using the underlay to create a drop-shadow, you can use this setting to make the shadows harder or softer.|
|
||||
|
||||
<a name="DebugSettings"></a>
|
||||
### Debug Settings
|
||||
|
||||
The debug section exposes some of the shader’s internal properties. They can be helpful for troubleshooting problems you encounter with the shader.
|
||||
|
||||
|
||||

|
||||
|
||||
| Property: | | Description |
|
||||
|----------------------------------|-----------|-------------|
|
||||
| **Font Atlas** | | Points to the atlas texture used by the font Asset. |
|
||||
| **Gradient Scale** | |Represents the spread / range of the font’s [signed distance field](FontAssetsSDF.md).<br/><br/>This determines the effective range of material properties such as **Outline > Width** and **Underlay > Offset X/Y**.<br/><br/>This value is equal to Padding +1, with Padding being the **Padding** value set when the font Asset was created.<br/><br/>**Note:** This value is displayed for debugging purposes. You should not edit it manually. |
|
||||
| **Texture Width/Texture Height** | | Displays the texture atlas width and height specified in the **Atlas Resolution** settings when the font Asset was created. |
|
||||
| **Scale X/Scale X** | | Set multipliers for the SDF scale.<br/><br/>When set to **0**, characters are rendered as blocks.<br/><br/>Negative values soften the characters, while positive values make them appear sharper. |
|
||||
| **Perspective Filter** | | When using a perspective camera, adjust this setting to make text look softer when viewed at sharp angles.<br/><br/>The default setting of **0.875** is adequate in most cases.<br/><br/>When using orthographic cameras, set this to **0**. |
|
||||
| **Offset X/Offset Y** | | Offset the vertex positions of each character in X and Y.<br/><br/>You can change these values using a script to create simulated crawl or scrolling FX. |
|
||||
| **Softness X/Softness Y** | | When **Mask** is set to **Soft**, set these to adjust the softness of the edge of the text. |
|
||||
| **Clip Rect** | | Clip Rect defines the Left (**L**), Bottom (**B**), Right (**R**) and Top (**T**) world space coordinates of the masking rectangle.<br/><br/> This is normally set automatically by the **2D RectMask**. However when using a normal **TextMeshPro** component, this allows you to set / control the masking region. |
|
||||
@@ -0,0 +1,154 @@
|
||||
# Distance Field (Surface) Shader
|
||||
|
||||
The Distance Field (Surface) surface shader is similar to the Distance Field shader, but rather than simulating local directional lighting, it interacts with Scene lighting. It is not a physically based shader.
|
||||
|
||||
This shader uses Unity's surface shader framework, which makes it quite flexible, but also more demanding on the GPU.
|
||||
|
||||
## Properties
|
||||

|
||||
|
||||
 **[Face](#Face):** Controls the appearance of the text face.
|
||||
|
||||
 **[Outline](#Outline):** Controls the appearance of the text outline.
|
||||
|
||||
 **[Bevel](#Bevel):** Adds a second rendering of the text underneath the original rendering, for example to add a drop shadow.
|
||||
|
||||
 **[SurfaceLighting](#SurfaceLighting):** Controls the appearance of locally simulated lighting on the text.
|
||||
|
||||
 **[Bump Map](#BumpMap):** Adds bumpiness to the text face and/or outline using a normal map texture.
|
||||
|
||||
 **[Environment Map](#EnvironmentMap):** Adds a reflection effect to the text face and/or outline using a normal map texture
|
||||
|
||||
 **[Glow](#Glow):** Adds a smooth outline to the text in order to simulate glow.
|
||||
|
||||
 **[Debug Settings](#DebugSettings):** Exposes internal shader properties that are sometimes useful for troubleshooting.
|
||||
|
||||
<a name="Face"></a>
|
||||
### Face
|
||||
|
||||
You edit Distance Field Surface shader properties in the TextMesh Pro object Inspector. Properties are divided into several sections, some of which you must enable in order to activate the property group.
|
||||
|
||||

|
||||
|
||||
| Property: || Description |
|
||||
|--------------|----|-------------|
|
||||
| **Color** ||Adjust the face color of the text.<br/><br/>The value you set here is multiplied with the vertex **Colors** you set in the TextMeshPro component.<br/><br/>Set this to white to use the original vertex colors.<br/><br/>Set this to black to cancel out the vertex colors.<br/><br/>Similarly, setting the Alpha to **1** uses the original vertex-color alpha, while setting it to **0** removes any alpha set in the original vertex colors.|
|
||||
| **Texture** ||Apply a texture to the text face.<br/><br/>The texture is multiplied with the face **Color** and the vertex colors in the TextMesh Pro component to produce the final face color.<br/><br/>The **Horizontal Mapping** and **Vertical Mapping** properties in the TextMesh Pro component determine how TextMesh Pro fits the texture to the text face.|
|
||||
| **Tiling** ||Increase these values to repeat the texture across the text surface, in accordance with the TextMesh Pro object's Horizontal Mapping and Vertical Mapping properties. |
|
||||
| **Offset** ||Adjust these values to change the texture's relative position, horizontally or vertically, on the text surface.|
|
||||
| **Speed** ||Animate the face texture by setting a value greater than **0**.<br/><br/>The resulting animation is a scrolling effect as the texture’s UV coordinates change over time.<br/><br/>**Note:** To see this effect in the Scene view, you must enable **Animated Materials** from the Effects menu in the [Scene view control bar](https://docs.unity3d.com/Manual/ViewModes.html).|
|
||||
| **Softness** ||Adjust the softness of the text edges.<br/><br/>A value of **0** produces crisp, anti-aliased edges.<br/><br/>Values greater than **0** produce increasingly soft/blurry edges.<br/><br/>This setting applies to both the text face and the outline.|
|
||||
| **Dilate** ||Adjust the position of the text contour in the font [distance field](FontAssetsSDF.md).<br/><br/>A value of **0** places the contour halfway, which corresponds to the contour of the original font.<br/><br/>Negative values thin the characters, while positive values thicken them.|
|
||||
| **Gloss** ||Adjust the glossiness of the text face. <br/><br/> Glossiness determines the appearance of specular highlights when light hits the text. Higher values produce smaller specular highlights.|
|
||||
|
||||
<a name="Outline"></a>
|
||||
### Outline
|
||||
|
||||
Description
|
||||
|
||||

|
||||
|
||||
| Property: |Description |
|
||||
|--------------|------------|
|
||||
| **Color** |Adjust the color for the text outline.<br/><br/>Tthe outline is not visible unless you set a **Thickness** value greater than **0**.|
|
||||
| **Texture** |Apply a texture to the text outline.<br/><br/>The texture is multiplied with the outline **Color** to produce the final outline color.<br/><br/>The **Horizontal Mapping** and **Vertical Mapping** properties in the TextMesh Pro component determine how TextMesh Pro fits the texture to the text outline.|
|
||||
| **Tiling** | |
|
||||
| **Offset** | |
|
||||
| **Speed** |Animate the outline texture by setting a value greater than 0.<br/><br/>The resulting animation is a scrolling effect as the texture’s UV coordinates change over time.<br/><br/>**Note:** To see this effect in the Scene view, you must enable **Animated Materials** from the Effects menu in the [Scene view control bar](https://docs.unity3d.com/Manual/ViewModes.html).|
|
||||
| **Thickness** |Adjust the thickness of the outline. The higher the value, the thicker the line.<br/><br/>The outline is drawn on the text contour, with half its thickness inside the contour and half of it outside the contour.<br/><br/>You can pull it farther in or push it farther out by adjusting the **Face > Dilate** property.|
|
||||
| **Gloss** |Adjust the glossiness of the text outline. <br/><br/> Glossiness determines the appearance of specular highlights when light hits the text. Higher values produce smaller specualr highlights.|
|
||||
|
||||
<a name="Bevel"></a>
|
||||
### Bevel
|
||||
|
||||
A bevel adds the illusion of depth to your text. It works like a normal map, except that the shader calculates the bevel sing the font’s signed distance field.
|
||||
|
||||
Bevels are prone to showing artifacts, especially when they are too pronounced. These artifacts are more or less obvious, depending on the material you use. Sometimes, artifacts that are more obvious on a simple material are hardly noticeable on a more complex material.
|
||||
|
||||
Although bevels work best with text that has an outline, you can apply them to text without an outline as well.
|
||||
|
||||

|
||||
|
||||
| Property: | | Description |
|
||||
|--------------|-------------|-------------|
|
||||
| **Type** | | Choose the type of bevel to apply |
|
||||
| | Outer Bevel | Produces raised lettering with sloped sides.<br/><br/>The bevel starts at the outside of the outline and increases in height until it reaches the inside of the outline. |
|
||||
| | Inner Bevel | Produces text with a raised outline.<br/><br/>The bevel starts at the outside of the outline, increases in height until it reaches the middle of the outline, and decreases in height until it reaches the inside of the outline. |
|
||||
| **Amount** | | Adjust the steepness of the bevel.<br/><br/>This setting defines the apparent difference in height between low and high regions of the bevel. |
|
||||
| **Offset** | | Offset the bevel from its usual position so it no longer matches the outline.<br/><br/>Different offsets produce very different bevels.<br/><br/>This is especially useful when you apply a bevel to text with no outline. |
|
||||
| **Width** | | Adjust the bevel size.<br/><br/>Set a value of **0** to make the bevel fill the full thickness of the outline.<br/><br/>Set a positive value to make the bevel extend beyond both sides of the outline.<br/><br/>Set a negative value to shrink the bevel toward the middle of the outline.<br/><br/>If you are setting a bevel for text with no outline, you must set a positive **Width**. You should also set a negative **Offset** to ensure that the whole bevel is visible. |
|
||||
| **Roundness** | | Increase this value to smooth out more angular regions of the bevel. The effect is often quite subtle. |
|
||||
| **Clamp** | | Set this value to limit the maximum height of the bevel.<br/><br/>Higher values mean the bevel reaches its maximum height sooner.<br/><br/>Clamped outer bevels end before reaching the inside edge of the outline.<br/><br/>Clamped inner bevels have a larger flat region in the middle of the outline. |
|
||||
|
||||
<a name="SurfaceLighting"></a>
|
||||
### Surface Lighting
|
||||
|
||||
These settings control simulated local directional lighting. They work in combination with the Bevel, Bump Map, and Environment Map settings.
|
||||
|
||||
|
||||

|
||||
|
||||
| Property: |Description |
|
||||
|--------------|------------|
|
||||
| **Specular Color** | Set the tint for specular highlights.<br/><br/>These are the highlights you see when the text directly reflects the simulated local light source. |
|
||||
|
||||
<a name="BumpMap"></a>
|
||||
### Bump Map
|
||||
|
||||
You can use a normal map as a bump map to add bumpiness to the text. The bump map affects both the text face and outline, but you can control how strongly it affects each one individually. If your text has both a bevel and a bump map, the two mix together.
|
||||
|
||||

|
||||
|
||||
| Property: |Description |
|
||||
|--------------|------------|
|
||||
| **Texture** | Select a normal map texture to use as a bump map. |
|
||||
| **Face** | Control how much the bump map affects the text face.<br/><br/>A value of **0** shows no effect while a value of **1** shows the full effect of the bump map. |
|
||||
| **Outline** | Control how much the bump map affects the text outline.<br/><br/>A value of **0** shows nothing while a value of **1** shows the full effect of the bump map. |
|
||||
|
||||
<a name="EnvironmentMap"></a>
|
||||
### Environment Map
|
||||
|
||||
An environment map can be used to add a reflection effect to your text face or outline. You can either use it for reflections of a static Scene or for special image effects. The mobile shaders do not support this.The environment texture is a cubemap. You can either provide a static cubemap or create one at run time via a script.
|
||||
|
||||

|
||||
|
||||
| Property: |Description |
|
||||
|--------------|------------|
|
||||
| **Face Color** | Choose a color to use to tint reflections on the text face.<br/><br/>This color is multiplied with the environment map before the reflectivity effect is applied to the text face.<br/><br/>When this color is set to black, the environment map has no effect on the text face.<br/><br/>When this color is set to white, the environment map is at full strength on the text face. |
|
||||
| **Outline Color** | Choose a color to use to tint reflections on the text outline.<br/><br/>This color is multiplied with the environment map before the reflectivity effect is applied to the text outline.<br/><br/>When this color is set to black, the environment map has no effect on the text outline.<br/><br/>When this color is set to white, the environment map is at full strength on the text outline. |
|
||||
| **Texture** | Choose a cubemap texture to use as an environment map. |
|
||||
| **Rotation** | Rotate the environment map to control which parts of the texture are visible in the reflection. You can animate the rotation to create a sense of movement. |
|
||||
|
||||
<a name="Glow"></a>
|
||||
### Glow
|
||||
|
||||
The **Glow** effect adds a smooth outline on top of other text effects, which is typically used to suggest a glow. The effect is additive, so it is more noticeable on dark backgrounds.
|
||||
|
||||
When the glow extends beyond the text boundary, the surface shader shades it as if it were part of the solid text, meaning that it gets simulated lighting effects such as specular highlights.
|
||||
|
||||

|
||||
|
||||
| Property: |Description |
|
||||
|--------------|------------|
|
||||
| **Color** |Set the tint and strength of the glow effect by adjusting the **Color** and **Alpha** values respectively. |
|
||||
| **Offset** | Adjust the center of the glow effect.<br/><br/>A value of **0** places the center of the glow effect right on the text contour.<br/><br/>Positive values move the center out from the contour. Negative values move it in toward the center of the text. |
|
||||
| **Inner** | Control how far the glow effect extends inward from the its start point (text contour + **Offset**). |
|
||||
| **Outer** | Control how far the glow effect extends outward from the text contour (text contour + Offset). |
|
||||
| **Power** | Control how the glow effect falls off from its center to its edges.<br/><br/>A value of **1** produces a strong, bright glow effect with a sharp linear falloff.<br/><br/>Lower values produce a glow effect with a quick drop in intensity followed by a more gradual falloff. |
|
||||
|
||||
<a name="DebugSettings"></a>
|
||||
### Debug Settings
|
||||
|
||||
The debug section exposes some of the shader’s internal properties. They can be helpful for troubleshooting problems you encounter with the shader.
|
||||
|
||||
|
||||

|
||||
|
||||
| Property: | | Description |
|
||||
|----------------------------------|-----------|-------------|
|
||||
| **Font Atlas** | | Points to the atlas texture used by the font Asset. |
|
||||
| **Gradient Scale** | |Represents the spread / range of the font’s [signed distance field](FontAssetsSDF.md).<br/><br/>This determines the effective range of material properties such as **Outline > Width** and **Underlay > Offset X/Y**.<br/><br/>This value is equal to Padding +1, with Padding being the **Padding** value set when the font Asset was created.<br/><br/>**Note:** This value is displayed for debugging purposes. You should not edit it manually. |
|
||||
| **Texture Width/Texture Height** | | Displays the texture atlas width and height specified in the **Atlas Resolution** settings when the font Asset was created. |
|
||||
| **Scale X/Scale X** | | Set multipliers for the SDF scale.<br/><br/>When set to **0**, characters are rendered as blocks.<br/><br/>Negative values soften the characters, while positive values make them appear sharper. |
|
||||
| **Perspective Filter** | | When using a perspective camera, adjust this setting to make text look softer when viewed at sharp angles.<br/><br/>The default setting of **0.875** is adequate in most cases.<br/><br/>When using orthographic cameras, set this to **0**. |
|
||||
| **Offset X/Offset Y** | | Offset the vertex positions of each character in X and Y.<br/><br/>You can change these values using a script to create simulated crawl or scrolling FX. |
|
||||
@@ -0,0 +1,85 @@
|
||||
# Distance Field (Surface) Mobile Shader
|
||||
|
||||
The Distance Field (Surface) surface shader is similar to the Distance Field shader, but rather than simulating local directional lighting, it interacts with Scene lighting. It is not a physically based shader.
|
||||
|
||||
This shader uses Unity's surface shader framework, which makes it quite flexible, but also more demanding on the GPU.
|
||||
|
||||
## Properties
|
||||

|
||||
|
||||
 **[Face](#Face):** Controls the appearance of the text face.
|
||||
|
||||
 **[Outline](#Outline):** Controls the appearance of the text outline.
|
||||
|
||||
 **[Glow](#Glow):** Adds a smooth outline to the text in order to simulate glow.
|
||||
|
||||
 **[Debug Settings](#DebugSettings):** Exposes internal shader properties that are sometimes useful for troubleshooting.
|
||||
|
||||
<a name="Face"></a>
|
||||
### Face
|
||||
|
||||
You edit Distance Field Surface shader properties in the TextMesh Pro object Inspector. Properties are divided into several sections, some of which you must enable in order to activate the property group.
|
||||
|
||||

|
||||
|
||||
| Property: || Description |
|
||||
|--------------|---|-------------|
|
||||
| **Color** ||Adjust the face color of the text.<br/><br/>The value you set here is multiplied with the vertex **Colors** you set in the TextMeshPro component.<br/><br/>Set this to white to use the original vertex colors.<br/><br/>Set this to black to cancel out the vertex colors.<br/><br/>Similarly, setting the Alpha to **1** uses the original vertex-color alpha, while setting it to **0** removes any alpha set in the original vertex colors.|
|
||||
| **Texture** ||Apply a texture to the text face.<br/><br/>The texture is multiplied with the face **Color** and the vertex colors in the TextMesh Pro component to produce the final face color.<br/><br/>The **Horizontal Mapping** and **Vertical Mapping** properties in the TextMesh Pro component determine how TextMesh Pro fits the texture to the text face.|
|
||||
| **Tiling** ||Increase these values to repeat the texture across the text surface, in accordance with the TextMesh Pro object's **Horizontal Mapping** and **Vertical Mapping** properties.|
|
||||
| **Offset** ||Adjust these values to change the texture's relative position, horizontally or vertically, on the text surface.|
|
||||
| **Speed** ||Animate the face texture by setting a value greater than **0**.<br/><br/>The resulting animation is a scrolling effect as the texture’s UV coordinates change over time.<br/><br/>**Note:** To see this effect in the Scene view, you must enable **Animated Materials** from the Effects menu in the [Scene view control bar](https://docs.unity3d.com/Manual/ViewModes.html).|
|
||||
| **Softness** ||Adjust the softness of the text edges.<br/><br/>A value of **0** produces crisp, anti-aliased edges.<br/><br/>Values greater than **0** produce increasingly soft/blurry edges.<br/><br/>This setting applies to both the text face and the outline.|
|
||||
| **Dilate** ||Adjust the position of the text contour in the font [distance field](FontAssetsSDF.md).<br/><br/>A value of **0** places the contour halfway, which corresponds to the contour of the original font.<br/><br/>Negative values thin the characters, while positive values thicken them.|
|
||||
| **Gloss** ||Adjust the glossiness of the text face. <br/><br/> Glossiness determines the appearance of specular highlights when light hits the text. Higher values produce smaller specular highlights.|
|
||||
|
||||
<a name="Outline"></a>
|
||||
### Outline
|
||||
|
||||
Description
|
||||
|
||||

|
||||
|
||||
| Property: |Description |
|
||||
|--------------|------------|
|
||||
| **Color** |Adjust the color for the text outline.<br/><br/>Tthe outline is not visible unless you set a **Thickness** value greater than **0**.|
|
||||
| **Texture** |Apply a texture to the text outline.<br/><br/>The texture is multiplied with the outline **Color** to produce the final outline color.<br/><br/>The **Horizontal Mapping** and **Vertical Mapping** properties in the TextMesh Pro component determine how TextMesh Pro fits the texture to the text outline.|
|
||||
| **Tiling** | |
|
||||
| **Offset** | |
|
||||
| **Speed** |Animate the outline texture by setting a value greater than 0.<br/><br/>The resulting animation is a scrolling effect as the texture’s UV coordinates change over time.<br/><br/>**Note:** To see this effect in the Scene view, you must enable **Animated Materials** from the Effects menu in the [Scene view control bar](https://docs.unity3d.com/Manual/ViewModes.html).|
|
||||
| **Thickness** |Adjust the thickness of the outline. The higher the value, the thicker the line.<br/><br/>The outline is drawn on the text contour, with half its thickness inside the contour and half of it outside the contour.<br/><br/>You can pull it farther in or push it farther out by adjusting the **Face > Dilate** property.|
|
||||
| **Gloss** |Adjust the glossiness of the text outline. <br/><br/> Glossiness determines the appearance of specular highlights when light hits the text. Higher values produce smaller specualr highlights.|
|
||||
|
||||
<a name="Glow"></a>
|
||||
### Glow
|
||||
|
||||
The **Glow** effect adds a smooth outline on top of other text effects, which is typically used to suggest a glow. The effect is additive, so it is more noticeable on dark backgrounds.
|
||||
|
||||
When the glow extends beyond the text boundary, the surface shader shades it as if it were part of the solid text, meaning that it gets simulated lighting effects such as specular highlights.
|
||||
|
||||

|
||||
|
||||
| Property: |Description |
|
||||
|--------------|------------|
|
||||
| **Color** |Set the tint and strength of the glow effect by adjusting the **Color** and **Alpha** values respectively. |
|
||||
| **Offset** | Adjust the center of the glow effect.<br/><br/>A value of **0** places the center of the glow effect right on the text contour.<br/><br/>Positive values move the center out from the contour. Negative values move it in toward the center of the text. |
|
||||
| **Inner** | Control how far the glow effect extends inward from the its start point (text contour + **Offset**). |
|
||||
| **Outer** | Control how far the glow effect extends outward from the text contour (text contour + Offset). |
|
||||
| **Power** | Control how the glow effect falls off from its center to its edges.<br/><br/>A value of **1** produces a strong, bright glow effect with a sharp linear falloff.<br/><br/>Lower values produce a glow effect with a quick drop in intensity followed by a more gradual falloff. |
|
||||
|
||||
<a name="DebugSettings"></a>
|
||||
### Debug Settings
|
||||
|
||||
The debug section exposes some of the shader’s internal properties. They can be helpful for troubleshooting problems you encounter with the shader.
|
||||
|
||||
|
||||

|
||||
|
||||
| Property: | | Description |
|
||||
|----------------------------------|-----------|-------------|
|
||||
| **Font Atlas** | | Points to the atlas texture used by the font Asset. |
|
||||
| **Gradient Scale** | |Represents the spread / range of the font’s [signed distance field](FontAssetsSDF.md).<br/><br/>This determines the effective range of material properties such as **Outline > Width** and **Underlay > Offset X/Y**.<br/><br/>This value is equal to Padding +1, with Padding being the **Padding** value set when the font Asset was created.<br/><br/>**Note:** This value is displayed for debugging purposes. You should not edit it manually. |
|
||||
| **Texture Width/Texture Height** | | Displays the texture atlas width and height specified in the **Atlas Resolution** settings when the font Asset was created. |
|
||||
| **Scale X/Scale X** | | Set multipliers for the SDF scale.<br/><br/>When set to **0**, characters are rendered as blocks.<br/><br/>Negative values soften the characters, while positive values make them appear sharper. |
|
||||
| **Perspective Filter** | | When using a perspective camera, adjust this setting to make text look softer when viewed at sharp angles.<br/><br/>The default setting of **0.875** is adequate in most cases.<br/><br/>When using orthographic cameras, set this to **0**. |
|
||||
| **Offset X/Offset Y** | | Offset the vertex positions of each character in X and Y.<br/><br/>You can change these values using a script to create simulated crawl or scrolling FX. |
|
||||
@@ -0,0 +1,91 @@
|
||||
# Sprites
|
||||
|
||||
TextMesh Pro allows you to include sprites in your text via [rich text tags](RichTextSprite.md).
|
||||
|
||||
To use sprites in your Scene, you need a Sprite Asset. You create sprite assets from atlas textures that each contain a given set of sprites.
|
||||
|
||||
<br/>
|
||||
_A sprite atlas texture_
|
||||
|
||||
You can use as many sprite atlases and assets as you like, but keep in mind that using multiple atlases per text object results in multiple draw calls for that object, which consumes more system resources. As a rule, try to stick to one atlas per object.
|
||||
|
||||
**Note:** Sprites are regular bitmap textures, so make sure that their resolution is high enough to display correctly on your target platforms.
|
||||
|
||||
## Using Sprite Assets
|
||||
|
||||
To use a sprite Asset in your project, put it in a `Resources/Sprites` folder. This allows TextMesh Pro to find it.
|
||||
|
||||
Once you've added/created your sprite assets, you can set one as the default source for sprites in the project. You set the default sprite Asset in the [TextMesh Pro Settings](Settings.md#DefaultSprite).
|
||||
|
||||
You can also choose sprite assets to use with specific text objects. Edit a [TexMesh Pro 3D]() or [TextmeshPro UI]() Asset to specify a sprite Asset to use with the font.
|
||||
|
||||
## Creating a Sprite Asset
|
||||
|
||||
You create sprite assets from atlas textures. Although sprite assets and their source textures are separate entities, you must keep the source textures in the project after creating the sprite assets.
|
||||
|
||||
1. Select the texture you want to use for the Sprite Asset.
|
||||
|
||||
1. In the Inspector, change the following Texture Importer properties.
|
||||
|
||||
* Set the **Texture Type** to **Sprite (2D and UI)**.
|
||||
|
||||
* Set the **Sprite Mode** to **Multiple**.<br/><br/>
|
||||
|
||||
1. Open the Sprite Editor from the Inspector, or choose **Window > 2D > Sprite Editor** from the menu, and use it to divide the texture into individual sprites.
|
||||
|
||||
1. With the texture still selected, choose **Asset > Create > TextMesh Pro > Sprite Asset** from the menu to create a new sprite Asset.
|
||||
|
||||
After creating the sprite Asset, you can revert the atlas texture's **Texture Type**
|
||||
to its original setting.
|
||||
|
||||
## Sprite Asset Properties
|
||||
|
||||

|
||||
|
||||
The Sprite Asset properties are divided into the following groups:
|
||||
|
||||
 **[Sprite Info](#SpriteInfo):** Provides references to the sprite Asset's material and source texture.
|
||||
|
||||
 **[Fallback Sprite Assets](#FallbackSpriteAssets):** Provides references to the sprite Asset's material and source texture.
|
||||
|
||||
 **[Sprite List](#SpriteList):** Provides references to the sprite Asset's material and source texture.
|
||||
|
||||
<a name="FallbackFont"></a>
|
||||
### Sprite Info
|
||||
|
||||

|
||||
|
||||
|Property:|Function:|
|
||||
|-|-|
|
||||
|**Sprite Atlas**|A reference to the sprite Asset's source texture.|
|
||||
|**Default Material**|A reference to the sprite Asset's material, which it uses to render sprites.|
|
||||
|
||||
<a name="FallbackFont"></a>
|
||||
### Fallback Sprite Assets
|
||||
|
||||

|
||||
|
||||
When TextMesh Pro can't find a glyph in this sprite assets, it searches the fallback sprite assets that you specify here.
|
||||
|
||||
|Property:|Function:|
|
||||
|-|-|
|
||||
|**Fallback Sprite Asset List**|Manage the fallback sprite assets.<br/><br/>Click **+** and **-** to add and remove font slots.<br/><br/>Click the circle icon next to a font to choose a font Asset using the Object Picker.<br/><br/>Drag the handles on the left side of any font Asset to reorder the list.|
|
||||
|
||||
<a name="FallbackFont"></a>
|
||||
### Sprite List
|
||||
|
||||

|
||||
|
||||
|Property:||Function:|
|
||||
|-|-|-|
|
||||
|**Sprite Search**||Search the sprite list by **ID** or **Name**.<br/><br/>Search results are ordered by **ID**, lowest to highest.|
|
||||
|**Previous Page / Next Page**||Long sprite lists are split into pages, which you can navigate using these buttons (also located at the bottom of the section).|
|
||||
|**Sprite Properties**||Manage the sprites in this Asset.<br/><br/>Click a sprite to make it active.<br/><br/>Click **Up** or **Down** to move the sprite up or down in the list.<br/><br/>Enter an **ID** in the text field and click **Goto** to move the sprite to that position in then list.<br/><br/>**Note:** Moving a sprite updates its **ID** and the **ID**s of all preceding sprites accordingly.<br/><br/>Click **+** to add a copy of the sprite to the list.<br/><br/>Click **-** to remove the sprite from the list.|
|
||||
||ID|A unique ID for the sprite, based on its portion in the list.<br/><br/>You can use this value in [rich text tags](RichTextSprite.md) tags to add this sprite to text.<br/><br/>Reordering the list updates the **ID**s of any affected sprites|
|
||||
||Unicode||
|
||||
||Name|A unique name for the sprite.<br/><br/>You can change this value, but it must be unique in the list<br/><br/>You can use this value in [rich text tags](RichTextSprite.md) to add this sprite to text.|
|
||||
||X, Y, W, H|The rectangular area the character occupies in the sprite atlas.|
|
||||
||OX, OY|Control the placement of the sprite, defined at its top-left corner relative to its origin on the baseline.|
|
||||
||Adv.|Specify how far to advance along the baseline before placing the next sprite.|
|
||||
||SF|Change this scaling factor value to adjust the size of the sprite.|
|
||||
|**Global Offsets & Scale**||Use these settings to override the following values for all sprites in the Asset: **OX**, **OY**, **ADV.**, and **SF.**|
|
||||
@@ -0,0 +1,40 @@
|
||||
# Style Sheets
|
||||
|
||||
Use style sheets to create custom text styles that you can apply to text using the [`<style>` rich text tag](RichTextStyle.md).
|
||||
|
||||
A custom style can include opening and closing rich text tags, as well as leading and trailing text.
|
||||
|
||||
For example, you might want headings in your text to be big, red, bold, with an asterisk to either side and a line break at the end.
|
||||
|
||||

|
||||
|
||||
Instead of typing this for every heading:
|
||||
|
||||
`<font-weight=700><size=2em><color=#FF0000>*Heading*</color></size></font-weight><br>`
|
||||
|
||||
You can create a style, called `H1` that includes all of that formatting:
|
||||
|
||||

|
||||
|
||||
You can then format all of your headings with a single `<style>` tag:
|
||||
|
||||
`<style="H1">Heading</style>`
|
||||
|
||||
|
||||
## The default style sheet
|
||||
|
||||
The default style sheet is the style sheet that every TextMesh Pro object in your
|
||||
|
||||
TextMesh Pro ships with a default style sheet stored in the **TextMesh Pro > Resources > Style Sheets** folder, but you can set any style sheet to be the default.
|
||||
|
||||
To change the default style sheet, set the **Default Style Sheet > Default Style Sheet** option in the [TextMesh Pro settings](Settings.md).
|
||||
|
||||
## Per-object style sheets
|
||||
|
||||
|
||||
|
||||
## Creating custom style sheets
|
||||
|
||||
To create a new style sheet, choose **Assets > Create > TextMesh Pro > Style Sheet** from the menu.
|
||||
|
||||
This adds a new TextMesh Pro style sheet to the Project. Open it in the Inspector to add custom styles.
|
||||
@@ -0,0 +1,49 @@
|
||||
# 3D Text GameObjects
|
||||
|
||||
By default, a TextMesh Pro 3D Text GameObject has the following components:
|
||||
|
||||
* **Rect Transform:** Controls the GameObject's position and size. For more information, see the [Rect Transform](https://docs.unity3d.com/Manual/class-RectTransform.html) documentation in the Unity Manual.
|
||||
|
||||
> [!NOTE]
|
||||
> **Note:** If you want to use the Rect Transform component's anchoring system, the TextMesh Pro component's parent GameObject must also have a Rect Transform component.
|
||||
|
||||
* **Mesh Renderer:** Renders the GameObject. For more information, see the [Mesh Renderer](https://docs.unity3d.com/Manual/class-MeshRenderer.html) documentation in the Unity Manual.
|
||||
* **TextMesh Pro UGUI (Script):** Contains the text to display, and the properties that control its appearance and behavior. These properties are described [below](#properties).
|
||||
* **Material:** A Unity material that uses one of the TextMesh Pro shaders to further control the text's appearance. For more information see the [Shaders](Shaders.md) section.
|
||||
|
||||
## Properties Overview
|
||||
|
||||

|
||||
|
||||
[!include[](include-tmpobject-legend.md)]
|
||||
|
||||
[!include[](include-tmpobject-text.md)]
|
||||
|
||||
[!include[](include-tmpobject-main-settings.md)]
|
||||
|
||||
[!include[](include-tmpobject-font.md)]
|
||||
|
||||
[!include[](include-tmpobject-color.md)]
|
||||
|
||||
[!include[](include-tmpobject-spacing.md)]
|
||||
|
||||
[!include[](include-tmpobject-alignment.md)]
|
||||
|
||||
[!include[](include-tmpobject-wrapping.md)]
|
||||
|
||||
[!include[](include-tmpobject-uv-mapping.md)]
|
||||
|
||||
[!include[](include-tmpobject-extra-settings-3d.md)]
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
# UI Text GameObjects
|
||||
|
||||
By default, a TextMesh Pro UI Text GameObject has the following components:
|
||||
|
||||
* **Rect Transform:** Controls the GameObject's position and size on the canvas. For more information, see the [Rect Transform](https://docs.unity3d.com/Manual/class-RectTransform.html) documentation in the Unity Manual.<br/><br/>
|
||||
* **Canvas Renderer:** Renders the GameObject on the canvas. For more information, see the [Canvas Renderer](https://docs.unity3d.com/Manual/class-CanvasRenderer.html) documentation in the Unity Manual.<br/><br/>
|
||||
* **TextMesh Pro UGUI (Script):** Contains the text to display, and the properties that control its appearance and behavior. These properties are described [below](properties).<br/><br/>
|
||||
* **Material:** A Unity material that uses one of the TextMesh Pro shaders to further control the text's appearance. For more information see the [Shaders](Shaders.md) section.
|
||||
|
||||
## Properties Overview
|
||||
|
||||

|
||||
|
||||
[!include[](include-tmpobject-legend.md)]
|
||||
|
||||
[!include[](include-tmpobject-text.md)]
|
||||
|
||||
[!include[](include-tmpobject-main-settings.md)]
|
||||
|
||||
[!include[](include-tmpobject-font.md)]
|
||||
|
||||
[!include[](include-tmpobject-color.md)]
|
||||
|
||||
[!include[](include-tmpobject-spacing.md)]
|
||||
|
||||
[!include[](include-tmpobject-alignment.md)]
|
||||
|
||||
[!include[](include-tmpobject-wrapping.md)]
|
||||
|
||||
[!include[](include-tmpobject-uv-mapping.md)]
|
||||
|
||||
[!include[](include-tmpobject-extra-settings-ui.md)]
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
# Creating text
|
||||
|
||||
To create text, add TextMesh Pro GameObjects to a Scenes. There are two types of TextMesh Pro GameObject:
|
||||
|
||||
- [TextMesh Pro UI Text GameObjects](TMPObjectUIText.md) use [Unity's UI system](https://docs.unity3d.com/Manual/UISystem.html), and are designed for use on a [Canvas](https://docs.unity3d.com/Manual/UICanvas.html).
|
||||
|
||||
- [TextMesh Pro 3D Text GameObjects](TMPObject3DText.md) behave like regular 3D GameObjects in the Scene.
|
||||
|
||||
|
||||
## TextMesh Pro UI Text GameObjects
|
||||
|
||||
TextMesh Pro UI text objects use [Unity's UI system](https://docs.unity3d.com/Manual/UISystem.html). When you create one, it is placed on a [Canvas](https://docs.unity3d.com/Manual/UICanvas.html) in the Scene. If the Scene does not have a canvas, Unity creates one automatically when you create the TexMesh Pro UI text GameObject.
|
||||
|
||||
**To create a new TextMesh Pro UI Text GameObject:**
|
||||
|
||||
1. From the menu, choose **GameObject > UI > TextMesh Pro - Text**.
|
||||
1. In the **TextMesh Pro (UGUI)** Inspector, enter your text.
|
||||
1. Adjust the [UI text properties](TMPObjectUIText.md) as needed.
|
||||
|
||||
### Other TextMesh Pro UI GameObjects
|
||||
|
||||
In addition to the UI text GameObject, you can create TextMesh Pro **Dropdown** and **Input Field** components from the **GameObject > UI** menu.
|
||||
|
||||
These components are nearly identical to regular Unity UI components, but have a few key differences:
|
||||
|
||||
* The TextMesh Pro Dropdown GameObject uses [TextMesh Pro font assets](FontAssets.md) instead of regular Unity font assets. <br/><br/> For more information about Unity dropdowns, see the [Dropdown](https://docs.unity3d.com/Manual/script-Dropdown.html) documentation in the Unity manual. <br/><br/>
|
||||
* The TextMesh Pro Input Field GameObject uses uses [TextMesh Pro font assets](FontAssets.md) instead of regular Unity font assets, and has more options for defining the input field. <br/><br/> For more information about Unity input fields, see the [Input Field](https://docs.unity3d.com/Manual/script-InputField.html) documentation in the Unity manual.
|
||||
|
||||
## TextMesh Pro 3D Text GameObjects
|
||||
|
||||
TextMesh Pro 3D text objects are nearly identical to their UI counterparts, but rather than being positioned on a Canvas, they behave like regular 3D objects in the Scene.
|
||||
|
||||
**To create a new TextMesh Pro 3D Text GameObject:**
|
||||
|
||||
1. From the menu, choose **GameObject > 3D GameObject > TextMesh Pro - Text**.
|
||||
1. In the **TextMesh Pro** Inspector, enter your text.
|
||||
1. Adjust the [3D text properties](TMPObject3DText.md) as needed.
|
||||
|
||||
## OpenType FontFeature
|
||||
Font Features define the typographic capabilities of a font asset. These features define potential substitutions or positional adjustments of glyphs. The following are the currently supported Font Features:
|
||||
|
||||
- **Ligatures:** Defines the substitution of multiple glyphs by a single glyph, such as 'fi' or 'ffl'. This features is identified as "liga".
|
||||
|
||||
- **Kerning:** Defines positional adjustments between two glyphs relative to each other. This features is identified as "kern".
|
||||
|
||||
- **Diacritical Marks:** Defines positional adjustments between Base glyphs and Mark glyphs.
|
||||
|
||||
The Mark-to-Base feature "mark" defines the positional adjustments of Mark glyphs relative to Base glyphs.
|
||||
|
||||
The Mark-to-Mark feature "mkmk" defines the positional adjustments of Mark glyphs relative to Base Mark glyphs.
|
||||
|
||||
You can enable or disable the Font Features through the Font Features field in the Text component's Extra Settings section shown in the image below:
|
||||
|
||||

|
||||
@@ -0,0 +1,35 @@
|
||||
# **_TextMesh Pro User Guide_**
|
||||
|
||||
#### **Overview**
|
||||
This User Guide was designed to provide first time users of TextMesh Pro with a basic overview of the features and functionality of the tool.
|
||||
|
||||
#### **Installation**
|
||||
The TextMesh Pro UPM package is already included with the Unity Editor and as such does not require installation. TextMesh Pro "TMP" does however require adding resources to your project which are essential for using TextMesh Pro.
|
||||
|
||||
To import the "*TMP Essential Resources*", please use the "*Window -> TextMeshPro -> Import TMP Essential Resources*" menu option. These resources will be added at the root of your project in the "*TextMesh Pro*" folder.
|
||||
|
||||
The TextMesh Pro package also includes additional resources and examples that will make discovering and learning about TextMesh Pro's powerful features easier. It is strongly recommended that first time users import these additional resources.
|
||||
|
||||
To import the "*TMP Examples & Extras*", please use the "*Window -> TextMeshPro -> Import TMP Examples & Extras*" menu option. These resources will also be added in the same "*TextMesh Pro*" folder inside your project.
|
||||
|
||||
|
||||
#### **Quick Start**
|
||||
There are two TextMesh Pro components available. The first TMP text component is of type <TextMeshPro> and designed to work with the MeshRenderer. This component is an ideal replacement for the legacy TextMesh component.
|
||||
|
||||
To add a new <TextMeshPro> text object, go to: “*GameObject->3D Object->TextMeshPro Text*”.
|
||||
|
||||
The second TMP text component is of type <TextMeshProUGUI> and designed to work with the CanvasRenderer and Canvas system. This component is an ideal replacement for the UI.Text component.
|
||||
|
||||
To add a new <TextMeshProUGUI> text object, go to: “*GameObject->UI->TextMeshPro Text*”.
|
||||
|
||||
You may also wish to watch this [Getting Started](https://youtu.be/olnxlo-Wri4) short video which covers this topic.
|
||||
|
||||
We strongly recommend that you also watch the [Font Asset Creation](https://youtu.be/qzJNIGCFFtY) video as well as the [Working with Material Presets](https://youtu.be/d2MARbDNeaA) as these two topics is also key to working and getting the most out of TextMesh Pro.
|
||||
|
||||
As mentionned in the Installation section of this guide, it is recommended that you import the "*TMP Examples & Extras*" and take the time to explore each of the examples as they provide a great overview of the functionality of the tool and the many text layout and [rich text tags](http://digitalnativestudios.com/textmeshpro/docs/rich-text/) available in TextMesh Pro.
|
||||
|
||||
#### **Support & API Documentation**
|
||||
Should you have questions or require assistance, please visit the [Unity UI & TextMesh Pro](https://forum.unity.com/forums/unity-ui-textmesh-pro.60/) section of the Unity forum as well as the [TextMesh Pro User Forum](http://digitalnativestudios.com/forum/index.php) where you will find additional information, [Video Tutorials](http://digitalnativestudios.com/forum/index.php?board=4.0) and [FAQ](http://digitalnativestudios.com/forum/index.php?topic=890.0). In the event you are unable to find the information you seek, always feel free to post on the [Unity UI & TextMesh Pro](https://forum.unity.com/forums/unity-ui-textmesh-pro.60/) section user forum.
|
||||
|
||||
[Online Documentation](http://digitalnativestudios.com/textmeshpro/docs/) is also available on TextMesh Pro including Rich Text tags, Shaders, Scripting API and more.
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
fileFormatVersion: 2
|
||||
guid: ca77d26d10b9455ca5a4b22c93be2a31
|
||||
TextScriptImporter:
|
||||
externalObjects: {}
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,39 @@
|
||||
| Tag: | Description: | Notes:|
|
||||
|-------------|-------------|-|
|
||||
|[`<align>`](RichTextAlignment.md)|Changes the text's horizontal alignment.||
|
||||
|[`<allcaps>`](RichTextAlignment.md)|Converts text to uppercase before rendering.|Functionally identical to `<uppercase>`.|
|
||||
|[`<alpha>`](RichTextOpacity.md)|Changes text opacity.||
|
||||
|[`<b>`](RichTextBoldItalic.md)|Renders text in boldface.||
|
||||
|[`<br>`](RichTextLineBreak.md) | Forces a line break in text. | |
|
||||
|[`<color>`](RichTextColor.md)|Changes text color or color and opacity.||
|
||||
|[`<cspace>`](RichTextCharacterSpacing.md)|Changes spacing between characters.||
|
||||
|[`<font>`](RichTextFont.md)|Changes text font and, optionally, material.||
|
||||
|[`<font-weight>`](RichTextFontWeight.md) | Changes the text's font weight to any of the weights defined in the [font Asset](FontAssetsProperties.md). | |
|
||||
|[`<gradient>`](RichTextGradient.md) | Applies a [gradient preset](ColorGradientsPresets.md) to text. | |
|
||||
|[`<i>`](RichTextBoldItalic.md)|Renders text in italics.||
|
||||
|[`<indent>`](RichTextIndentation.md)|Indents all text between the tag and the next hard line break.||
|
||||
|[`<line-height>`](RichTextLineHeight.md)|Modifies the line height relative to the default line height specified in the font Asset.||
|
||||
|[`<line-indent>`](RichTextLineIndentation.md)|Indents the first line after every hard line break.|New lines created by word-wrapping are not indented.|
|
||||
|[`<link>`](RichTextLink.md)|Specifies a link ID for a text segment.||
|
||||
|[`<lowercase>`](RichTextLetterCase.md)|Converts text to lowercase before rendering.||
|
||||
|[`<margin>`](RichTextMargins.md)|Gives the text horizontal margins.|You can set margins for both sides together or each side individually|
|
||||
|[`<mark>`](RichTextMark.md)|Highlights the text with a colored overlay.|The overlay must be translucent (alpha less than 1) for the text to show through.|
|
||||
|[`<mspace>`](RichTextMonospace.md)|Renders the text as monospace.||
|
||||
|[`<nobr>`](RichTextNoBreak.md)|Keeps a segment of text together.||
|
||||
|[`<noparse>`](RichTextNoParse.md)|Prevents parsing of text that TextMesh Pro would normally interpret as rich text tags.||
|
||||
|[`<page>`](RichTextPageBreak.md)|Adds a page break to the text.|The text's [**Overflow** mode](TMPObjectUIText.md#wrapping) must be set to **Page** for page breaks to work.|
|
||||
|[`<pos>`](RichTextPos.md)|Sets the horizontal caret position on the current line.||
|
||||
|[`<rotate>`](RichTextRotate.md) | Rotates each character about its center. | |
|
||||
|[`<s>`](RichTextStrikethroughUnderline.md)|Renders a line across the text.||
|
||||
|[`<size>`](RichTextSize.md)|Adjusts the font size for a specified portion of the text.||
|
||||
|[`<smallcaps>`](RichTextLetterCase.md)|Converts text to uppercase before rendering.||
|
||||
|[`<space>`](RichTextSpace.md)|Adds a horizontal offset between itself and the rest of the text.||
|
||||
|[`<sprite>`](RichTextSprite.md)|Adds a [sprite](Srites.md) to the text.|By default, TextMesh Pro looks in the default sprite assets, but you can use tag attributes to retrieve sprites from other assets.|
|
||||
|[`<strikethrough>`](RichTextStrikethroughUnderline.md) | Draws a line slightly above the baseline so it crosses out the text. ||
|
||||
|[`<style>`](RichTextStyle.md)|Applies a custom style to the text.||
|
||||
|[`<sub>`](RichTextSubSuper.md)|Converts the text to subscript.||
|
||||
|[`<sup>`](RichTextSubSuper.md)|Converts the test to superscript.||
|
||||
|[`<u>`](RichTextStrikethroughUnderline.md)|Draws a line slightly below the baseline to underline the text.||
|
||||
|[`<uppercase>`](RichTextLetterCase.md)|Converts text to uppercase before rendering.|Functionally identical to `<allcaps>`.|
|
||||
|[`<voffset>`](RichTextVOffset.md)|Gives the baseline a vertical offset.||
|
||||
|[`<width>`](RichTextWidth.md)|Changes the horizontal size of text area.||
|
||||
@@ -0,0 +1,18 @@
|
||||
### Alignment
|
||||
|
||||
The horizontal and vertical alignment options control how text is placed in the display area.
|
||||
|
||||

|
||||
|
||||
|Property:||Function:|
|
||||
|---------|-|---------|
|
||||
|**[Horizontal Alignment Options]**||
|
||||
||Left, Center, Right|Position the text horizontally in the display area, without changing the text itself.|
|
||||
||Justified, Flush|Stretch the text to fill the width of the display area by increasing the distance between words and characters. <br/><br/> The **Wrap Mix** option controls the balance between word and character spacing. <br/><br/> **Justified** mode does not stretch the last lines of paragraphs, while **Flush** mode does.|
|
||||
||Geometry Center| Centers the text based on the mesh rather than the text metrics. <br/><br/> The difference is not always noticeable, but in some cases this mode yields better looking results than regular Center alignment.|
|
||||
|**[Vertical Alignment Options]**|||
|
||||
||Top, Middle, Bottom| Position the text vertically in the display area, without changing the text itself.|
|
||||
||Baseline| Position the text so the baseline of the line is aligned with the middle of the display area. <br/><br/> This is useful when working with a single line of text. |
|
||||
||Midline| Use this as an alternative to Middle alignnment. <br/><br/> This option determine vertical placement using the bounds of the text mesh, rather than [line metrics](FontAssets.md#LineMetrics). This is useful in tight spaces when ascenders and descenders might otherwise extend too far. |
|
||||
||Capline| Position the text so the middle of the first the line is aligned with the middle of the display area.|
|
||||
|**Wrap Mix (W <-> C)**||Adjust the balance between extra word spacing and extra character spacing when horizontal alignment is set to **Justified** or **Flush**.|
|
||||
@@ -0,0 +1,17 @@
|
||||
### Color
|
||||
TextMesh Pro uses vertex colors to tint the text. You can apply a uniform color as well a [gradient](ColorGradients.md) of up to four colors.
|
||||
|
||||

|
||||
|
||||
|Property:||Function:|
|
||||
|---------|-|---------|
|
||||
|**Vertex Color**||Choose the main color for the text. <br/><br/> Any colors and textures defined in the TextMesh Pro GameObject or its material ar multiplied with this color. |
|
||||
|**Color Gradient**||Enable this option to apply a [color gradient](ColorGradients.md) to each character sprite. <br/><br/> You can then set the gradient’s type and colors, or apply a [color gradient preset](ColorGradientsPresets.md). <br/><br/> Gradient colors are multiplied with the **Vertex Color**. If **Vertex Color** is set to white you see only the gradient colors. If it’s set to black you don’t see the gradient colors at all.|
|
||||
|**Color Preset**||Choose a [color gradient preset](ColorGradientsPresets.md). <br/><br/> When you apply a preset its **Color Mode** and **Colors** replace the text's local properties in the Inspector. <br/><br/> Editing these properties modifies the preset, which affects every TextMesh Pro GameObject that uses it. <br/><br/> Set this property to **None** to revert to the text’s local gradient properties.|
|
||||
|**Color Mode**||Choose the type of color gradient to apply. <br/><br/> TextMesh Pro applies gradients to each character individually.|
|
||||
||Single|A uniform color that modifies the base **Vertex Color**.|
|
||||
||Horizontal Gradient|A two-color gradient with each color emanating from one side of the character.|
|
||||
||Vertical Gradient|A two-color gradient with one color emanating from the top of the character, and the other from the bottom.|
|
||||
||Four Corners Gradient|A four-color gradient with each color emanating from a different corner of the character.|
|
||||
|**Colors**||Choose each gradient color. <br/><br/> The number of available colors depends on the type of gradient, and the color fields are arranged to match the position of each color in the gradient (left and right, top and bottom, 2 rows of 2 for four-corner gradients). <br/><br/> You can set the color in any of the following ways:<br/><br/> **Swatch:** Click to open a color picker. <br/><br/> **Eyedropper:** Click to choose a color from any part of the screen. <br/><br/> **Hex Value:** Enter the RGBA hex value directly.|
|
||||
|**Override Tags**||Enable this option to ignore any [rich text tags](RichText.md) that change text color.|
|
||||
@@ -0,0 +1,20 @@
|
||||
### Extra Settings
|
||||
This section contains assorted options for further controlling the appearance and behavior of text.
|
||||
|
||||

|
||||
|
||||
|Property:||Function:|
|
||||
|---------|-|---------|
|
||||
|**Margins**||Set positive values to increase the distance between the text and the boundaries of the text container. <br/><br/> Set negative values to make the text extend beyond the boundaries of the text container. <br/><br/> You set the **Left**, **Top**, **Right**, and **Bottom** margins separately. <br/><br/> You can also adjust the margins by dragging the handles of the text container Widget (yellow rectangle) in the Scene view.|
|
||||
|**Sorting Layer** | | |
|
||||
|**Order in Layer** | | |
|
||||
|**Geometry Sorting**||Each character is contained in a quad. **Geometry Sorting** controls how TextMesh Pro sorts these quads. This determines which character appears on top when two quads overlap.|
|
||||
||Normal| TextMesh Pro draws quads in the order that they appear in the mesh. When two quads overlap, the "later" quad appears on top of the "earlier" one.|
|
||||
||Reverse| TextMesh Pro draws quads in reverse order. When two quads overlap, the "earlier" quad appears on top of the "later" one.|
|
||||
|**Othographic Mode** | | Enable this option when creating camera-aligned text with an orthographic camera. <br/><br/> It prevents the TextMesh Pro shader from using perspective correction.|
|
||||
|**Rich Text**||Enable this option to turn off rich text support for the TextMesh Pro GameObject. <br/><br/> When rich text support is disabled, tags are not parsed and are rendered as plain text.|
|
||||
|**Parse Escape Characters**||Enable this option to make TextMesh Pro interpret backslash-escaped characters as special characters. <br/><br/> For example `\n` is interpreted as a newline, `\t` as a tab, and so on. <br/><br/> **Note:** This applies to rendered text. In code, escaped characters are already parsed by the compiler.|
|
||||
|**Visible Descender**|| Use this option when using a script to slowly reveal text. <br/><br/> Enable it to reveal the text at the bottom and move up as new lines are revealed. <br/><br/> Disable it to reveal the text from top to bottom. <br/><br/> To set up this type of text reveal, you must also set the vertical alignment to Bottom.|
|
||||
| **Sprite Asset** |||
|
||||
| **Kerning**||Enable this option to toggle kerning on for this TextMesh Pro GameObject. <br/><br/> If new objects use a font with no kerning data, enabling this setting has no effect.|
|
||||
|**Extra Padding**|| Enable this option to add extra padding to character sprites. <br/><br/> TextMesh Pro creates sprites to fit the visible text, but the results isn't always perfect. This setting reduces the chances that glyphs are cut off at the boundaries of their sprites.|
|
||||
@@ -0,0 +1,18 @@
|
||||
### Extra Settings
|
||||
This section contains options for further controlling how text looks and behaves.
|
||||
|
||||

|
||||
|
||||
|Property:||Function:|
|
||||
|---------|-|---------|
|
||||
|**Margins**||Set positive values to increase the distance between the text and the boundaries of the text container. <br/><br/> You set the **Left**, **Top**, **Right**, and **Bottom** margins separately. <br/><br/> Negative values make the text extend beyond the boundaries of the text container. <br/><br/> You can also adjust the margins by dragging the handles of the text container Widget (yellow rectangle) in the Scene view.|
|
||||
|**Geometry Sorting**||Each character is contained in a quad. **Geometry Sorting** controls how TextMesh Pro sorts these quads. This determines which character appears on top when two quads overlap.|
|
||||
||Normal| TextMesh Pro draws quads in the order that they appear in the mesh. When two quads overlap, the "later" quad appears on top of the "earlier" one.|
|
||||
||Reverse| TextMesh Pro draws quads in reverse order. When two quads overlap, the "earlier" quad appears on top of the "later" one.|
|
||||
|**Rich Text**||Disable this option to turn off [rich text](RichText.md) support for the TextMesh Pro GameObject. <br/><br/> When rich text support is disabled, tags are not parsed and are rendered as regular text.|
|
||||
|**Raycast Target**||Enable this option to make this TextMesh Pro GameObject a raycast target. <br/><br/> Disabling this option causes the UI to ignores this TextMesh Pro GameObject when determining what the cursor interacts with.|
|
||||
|**Parse Escape Characters**||Enable this option to make TextMesh Pro interpret backslash-escaped characters as special characters. <br/><br/> For example `\n` is interpreted as a newline, `\t` as a tab, and so on. <br/><br/> **Note:** This applies to rendered text. In code, escaped characters are already parsed by the compiler.|
|
||||
|**Visible Descender**|| Use this option when using a script to slowly reveal text. <br/><br/> Enable it to reveal the text at the bottom and move up as new lines are revealed. <br/><br/> Disable it to reveal the text from top to bottom. <br/><br/> To set up this type of text reveal, you must also set the vertical alignment to Bottom.|
|
||||
| **Sprite Asset** |||
|
||||
| **Kerning**||Enable this option to toggle kerning on for this TextMesh Pro GameObject. <br/><br/> Kerning is defined in the GameObject's **[Font Asset](FontAssets.md)**. If new objects use a font with no kerning data, enabling this setting has no effect.|
|
||||
|**Extra Padding**|| Enable this option to add extra padding to character sprites. <br/><br/> TextMesh Pro creates sprites to fit the visible text, but the result isn't always perfect. This setting reduces the chances that glyphs are cut off at the boundaries of their sprites.|
|
||||
@@ -0,0 +1,24 @@
|
||||
### Font
|
||||
The fonts settings panel is where you choose a font for your text, and customize the font style.
|
||||
|
||||

|
||||
|
||||
|Property:||Function:|
|
||||
|---------|-|---------|
|
||||
|**Font Asset**||Choose a [font Asset](FontAssets.md) for the TextMesh Pro GameObject to use. <br/><br/> TextMesh Pro ships with several font assets, and you can create others from standard font files such as truetype (ttf) fonts. <br/><br/> **Note:** You can set the default font Asset for new text objects in the [TextMesh Pro settings](Settings.md).|
|
||||
|**Material Preset**|| Choose a material for your font. <br/><br/> Each font Asset has a default material, but you can also create customized materials for it. <br/><br/> This preset list includes all materials whose names contain the font Asset's name, and use the corresponding font atlas texture.|
|
||||
|**Font Style**|| Enable standard text styling options. <br/><br/> You can use these options in any combination, except for the casing options (lowercase, uppercase, and small caps), which are mutually exclusive. |
|
||||
||B|Bold the text. <br/><br/> The appearance of bold text is defined in the font Asset properties.|
|
||||
||I|Italicize the text. <br/><br/> The appearance of italicized text is defined in the font Asset properties.|
|
||||
||U| Underline the text. <br/><br/> This renders an extra line below the baseline.|
|
||||
||S|Add a strikethrough line to the text. <br/><br/> This renders an extra line above the baseline.|
|
||||
||ab| Convert the text to lowercase before rendering. <br/><br/> This does not change text casing in the **Text** field.|
|
||||
||AB|Convert the text to uppercase before rendering. <br/><br/> This does not change text casing in the **Text** field. |
|
||||
||SC|Use small caps. <br/><br/> The text is displayed in all uppercase, but letters you actually entered in uppercase are larger.|
|
||||
|**Font Size**||Specify the text display size, in points.|
|
||||
|**Auto Size**||Enable this option to set the font size automatically, based on the **Auto Size Options**. <br/><br/> When this option is enabled, TextMesh Pro lays out the text multiple times to find a good fit. This is a resource intensive process, so avoid auto-sizing dynamic text that changes frequently. <br/><br/> **Tip:** For static text, you can enable **Auto Size**, note the calculated font size (displayed in the Font Size field), then disable Auto Size and apply the calculated size manually.
|
||||
|**Auto Size Options**||Define the basic rules for auto-sizing text.|
|
||||
||Min|Specify the smallest acceptable font size, in points.|
|
||||
||Max|Specify the largest acceptable font size, in points.|
|
||||
||WD%|Specify the maximum acceptable amount to reduce character width when sizing the text. <br/><br/> TextMesh Pro squeezes characters to make them taller. This is usually only acceptable for digits.|
|
||||
||Line|Adjust the line height. <br/><br/> This is useful for fitting a larger font into a given space.|
|
||||
@@ -0,0 +1,12 @@
|
||||
|||
|
||||
|-|-|
|
||||
| | **Text input** |
|
||||
|**A**|**[Text](#text):** Where you enter the text to display, along with any [rich text markup](RichText.md).|
|
||||
| | **Main settings** |
|
||||
|**B** | **[Font](#font):** Specifies the font to use, as well as basic font attributes (size, style, and so on). |
|
||||
|**C** | **[Color](#color):** Defines the base color or [color gradient](ColorGradients.md) for the text |
|
||||
|**D** | **[Spacing](#spacing):** Controls spacing between characters, words, lines and, paragraphs. |
|
||||
|**E** | **[Alignment](#alignment):** Controls horizontal and vertical text alignment. |
|
||||
|**F** | **[Wrapping and Overflow](#wrapping):** Controls word wrapping and defines what happens when text doesn't fit inside its display area. |
|
||||
|**G** | **[UV Mapping](#uv-mapping):** Controls how textures are mapped to the face and outline of the text. |
|
||||
|**H** | **[Extra Settings](#extra-settings):** Additional options for controlling the appearance and behavior of text. |
|
||||
@@ -0,0 +1,3 @@
|
||||
## Main Settings
|
||||
|
||||
The Main Settings section contains the properties needed to define the basic appearance of text. You can further customize the look of text by changing or editing its [material](Shaders.md).
|
||||
@@ -0,0 +1,13 @@
|
||||
### Spacing
|
||||
These options control spacing between characters, words, lines and, paragraphs. You can use them to fine-tune the text for individual TextMesh Pro GameObjects, without adjusting their [font assets](FontAssets.md).
|
||||
|
||||

|
||||
|
||||
To control spacing within a single TextMesh Pro GameObject, use [rich text tags](RichText.md).
|
||||
|
||||
|Property:||Function:|
|
||||
|---------|-|---------|
|
||||
|Character||Set the spacing between characters for this TextMesh Pro GameObject.|
|
||||
|Word||Set the spacing between words for this TextMesh Pro GameObject.|
|
||||
|Line||Set the spacing between lines for this TextMesh Pro GameObject.|
|
||||
|Paragraph||Set the spacing between paragraphs for this TextMesh Pro GameObject. <br/><br/> Paragraphs are defined by explicit line breaks.|
|
||||
@@ -0,0 +1,10 @@
|
||||
## Text Input
|
||||
|
||||
The text section is where you enter the text to display, and optionally customize it using [rich text markup](RichText.md).
|
||||
|
||||

|
||||
|
||||
|Property:| |Function:|
|
||||
|---------|-|---------|
|
||||
|**Text**||The input field for text to display.|
|
||||
|**Enable RTL Editor**||Enable this option to display text right-to-left instead of left-to-right. <br/><br/>The Inspector displays an additional input field where you can view the reversed text and edit it directly. <br/><br/>The text is reversed before it is displayed on screen or rendered.|
|
||||
@@ -0,0 +1,22 @@
|
||||
### UV Mapping
|
||||
Some [TextMesh Pro shaders](Shaders.md) allow you to apply one or more image textures to text. These options control how those textures stretch to fit the text.
|
||||
|
||||

|
||||
|
||||
You can also edit shader-specific texturing options in the shaders themselves. The available options depend on the shader you use.
|
||||
|
||||
When texturing text, make sure that your texture assets have their **Wrap Mode** set to **Repeat**. Otherwise the texture is likely to be heavily distorted when applied to the text. See the [Render Texture documentation](https://docs.unity3d.com/Manual/class-RenderTexture.html) in the Unity Manual for more information.
|
||||
|
||||
|Property:||Function:|
|
||||
|---------|-|---------|
|
||||
|**Horizontal Mapping**||Specify how textures map to text horizontally when you use a shader that supports textures.|
|
||||
||Character|Stretches the texture horizontally across each character's sprite.|
|
||||
||Line|Stretches the texture horizontally across the entire width of each line.|
|
||||
||Paragraph|Stretches the texture horizontally across the entire text.|
|
||||
||Match Aspect|Scales the texture horizontally so it maintains its aspect ratio, and is not deformed. <br/><br/> When you use this horizontal mapping mode, the **Vertical Mapping** setting determines how the texture is mapped to the text, and must be set to something other than **Match Aspect**.|
|
||||
|**Vertical Mapping**||Specify how textures map to text vertically when you use a shader that supports textures.|
|
||||
||Character|Stretches the texture vertically across each character's sprite.|
|
||||
||Line|Stretches the texture vertically across the entire width of each line.|
|
||||
||Paragraph|Stretches the texture vertically across the entire text.|
|
||||
||Match Aspect|Scales the texture vertically so it maintains its aspect ratio, and is not deformed. <br/><br/> When you use this vertical mapping mode, the **Horizontal Mapping** setting determines how the texture is mapped to the text, and must be set to something other than **Match Aspect**.|
|
||||
|**Line Offset**||When Horizontal Mapping is set to Line, **Paragraph**, or **Match Aspect**, set this value to add a horizontal texture offset to each successive line. <br/><br/> This value is added to the **Offset X** value you specify in the shader.|
|
||||
@@ -0,0 +1,18 @@
|
||||
### Wrapping and Overflow
|
||||
Wrapping splits lines of text to ensure that they don't get wider than the display area. Lines are normally wrapped at word boundaries, but words that are longer than an entire line are split as well. Overflow controls what happens when the text doesn't fit inside the display area.
|
||||
|
||||

|
||||
|
||||
Some overflow options supersede wrapping. For example, if Overflow is set to truncate, the text is truncated when it reaches the edge of the display area, irrespective of whether Wrapping is enabled.
|
||||
|
||||
|Property:||Function:|
|
||||
|---------|-|---------|
|
||||
|**Wrapping**||**Enable** or **Disable** word wrapping. |
|
||||
|**Overflow**||Specify what happens when the text doesn't fit inside the display area.|
|
||||
||Overflow|Extends the text beyond the bounds of the display area, but still wraps it if **Wrapping** is enabled.|
|
||||
||Ellipsis|Cuts off the text and inserts an ellipsis (…) to indicate that some of the text is omitted.|
|
||||
||Masking|Like **Overflow**, but the shader hides everything outside of the display area.|
|
||||
||Truncate|Cuts off the text when it no longer fits.|
|
||||
||Scroll Rect|A legacy mode that’s similar to **Masking**. This option is available strictly for compatibility with older TextMesh Pro projects. For new projects, use Masking mode instead.|
|
||||
||Page|Cuts the text into several pages that each fit inside the display area. <br/><br/> You can choose which page to display. You can also use rich text to manually insert page breaks. <br/><br/> **Note:** The vertical alignment options work on a per-page basis.|
|
||||
||Linked|Extends the text into another TextMesh Pro GameObject that you select. <br/><br/> This is useful for creating multi-column text.|
|
||||
@@ -0,0 +1,43 @@
|
||||
# TextMesh Pro Documentation
|
||||
|
||||
TextMesh Pro is a set of Unity tools for 2D and 3D text.
|
||||
|
||||
TextMesh Pro provides better control over text formatting and layout than to Unity's UI Text & Text Mesh systems. It includes features such as:
|
||||
|
||||
* Character, word, line, and paragraph spacing.
|
||||
* Kerning.
|
||||
* Justified text.
|
||||
* Links.
|
||||
* More than thirty rich text tags.
|
||||
* Support for multiple fonts.
|
||||
* Support for sprites.
|
||||
* Custom styles.
|
||||
* Advanced text rendering using custom [shaders](Shaders.md).
|
||||
|
||||
## Getting started
|
||||
|
||||
The TextMesh Pro package is included in the Unity Editor. You do not need to install it.
|
||||
|
||||
To use TextMesh Pro, you must import the TMP Essential Resources package (see the next section).
|
||||
|
||||
You can also import the TMP Examples & Extras package to help you learn TextMesh Pro.
|
||||
|
||||
### Importing required resources into projects
|
||||
|
||||
To use TextMesh Pro in your projects, you need to import the **TMP Essential Resources**.
|
||||
|
||||
- From the menu, select **Window > TextMeshPro > Import TMP Essential Resources**
|
||||
|
||||
This adds the essential resources to the **TextMesh Pro** folder in the Project.
|
||||
|
||||
### Importing examples and additional resources
|
||||
|
||||
TextMesh Pro also includes additional resources and examples to help you learn about various features.
|
||||
|
||||
You can import these into your projects as well.
|
||||
|
||||
- From the menu, select **Window > TextMeshPro > Import TMP Examples & Extras**
|
||||
|
||||
This adds the examples and additional resources to the **TextMesh Pro > Examples & Extras** folder in the Project.
|
||||
|
||||
Installing the TMP Examples & Extras is not mandatory, but is strongly recommended for first-time TextMesh Pro users.
|
||||
@@ -0,0 +1,33 @@
|
||||
# Animation Integration
|
||||
|
||||
Animation allows for each transition between control states to be fully animated using Unity's animation system. This is the most powerful of the transition modes due to the number of properties that can be animated simultaneously.
|
||||
|
||||

|
||||
|
||||
To use the Animation transition mode, an Animator Component needs to be attached to the controller element. This can be done automatically by clicking "Auto Generate Animation". This also generates an Animator Controller with states already set up, which will need to be saved.
|
||||
|
||||
The new Animator controller is ready to use straight away. Unlike most Animator Controllers, this controller also stores the animations for the controller's transitions and these can be customised, if desired.
|
||||
|
||||

|
||||
|
||||
For example, if a Button element with an Animator controller attached is selected, the animations for each of the button's states can be edited by opening the Animation window (**Window>Animation**).
|
||||
|
||||
There is an Animation Clip pop-up menu to select the desired clip. Choose from "Normal", "Highlighted", "Pressed" and "Disabled".
|
||||
|
||||

|
||||
|
||||
The Normal State is set by the values on button element itself and can be left empty. On all other states, the most common configuration is a single keyframe at the start of the timeline. The transition animation between states will be handled by the Animator.
|
||||
|
||||
As an example, the width of the button in the Highlighted State could be changed by selecting the Highlighted state from the Animation Clip pop up menu and with the playhead at the start of the time line:
|
||||
|
||||
* Select the record Button
|
||||
* Change the width of the Button in the inspector
|
||||
* Exit the record mode.
|
||||
|
||||
Change to play mode to see how the button grows when highlighted.
|
||||
|
||||
Any number of properties can have their parameters set in this one keyframe.
|
||||
|
||||
Several buttons can share the same behaviour by sharing Animator Controllers.
|
||||
|
||||
**The UI Animation transition mode is not compatible with Unity's legacy animation system.** You should only use the *Animator* Component.
|
||||
@@ -0,0 +1,134 @@
|
||||
# Auto Layout
|
||||
|
||||
The Rect Transform layout system is flexible enough to handle a lot of different types of layouts and it also allows placing elements in a complete freeform fashion. However, sometimes something a bit more structured can be needed.
|
||||
|
||||
The auto layout system provides ways to place elements in nested layout groups such as horizontal groups, vertical groups, or grids. It also allows elements to automatically be sized according to the contained content. For example a button can be dynamically resized to exactly fit its text content plus some padding.
|
||||
|
||||
The auto layout system is a system built on top of the basic Rect Transform layout system. It can optionally be used on some or all elements.
|
||||
|
||||
## Understanding Layout Elements
|
||||
|
||||
The auto layout system is based on a concept of **layout elements** and **layout controllers**. A layout element is an Game Object with a Rect Transform and optionally other components as well. The layout element has certain knowledge about which size it should have. Layout elements don't directly set their own size, but other components that function as layout controllers can use the information they provide in order to calculate a size to use for them.
|
||||
|
||||
A layout element has properties that defines its own:
|
||||
|
||||
* Minimum width
|
||||
* Minimum height
|
||||
* Preferred width
|
||||
* Preferred height
|
||||
* Flexible width
|
||||
* Flexible height
|
||||
|
||||
Examples of layout controller components that use the information provided by layout elements are **Content Size Fitter** and the various **Layout Group** components. The basic principles for how layout elements in a layout group are sized is as follows:
|
||||
|
||||
* First minimum sizes are allocated.
|
||||
* If there is sufficient available space, preferred sizes are allocated.
|
||||
* If there is additional available space, flexible size is allocated.
|
||||
|
||||
Any Game Object with a Rect Transform on it can function as a layout element. They will by default have minimum, preferred, and flexible sizes of 0. Certain components will change these layout properties when added to the Game Object.
|
||||
|
||||
The Image and Text components are two examples of components that provide layout element properties. They change the preferred width and height to match the sprite or text content.
|
||||
|
||||
|
||||
### Layout Element Component
|
||||
|
||||
If you want to override the minimum, preferred, or flexible size, you can do that by adding a Layout Element component to the Game Object.
|
||||
|
||||

|
||||
|
||||
The Layout Element component lets you override the values for one or more of the layout properties. Enable the checkbox for a property you want to override and then specify the value you want to override with.
|
||||
|
||||
See the reference page for [Layout Element](script-LayoutElement.md) for more information.
|
||||
|
||||
|
||||
## Understanding Layout Controllers
|
||||
|
||||
Layout controllers are components that control the sizes and possibly positions of one or more layout elements, meaning Game Objects with Rect Transforms on. A layout controller may control its **own layout element** (the same Game Object it is on itself) or it may control **child layout elements**.
|
||||
|
||||
A component that functions as a layout controller may also itself function as a layout element at the same time.
|
||||
|
||||
|
||||
### Content Size Fitter
|
||||
|
||||
The Content Size Fitter functions as a layout controller that controls the size of its own layout element. The simplest way to see the auto layout system in action is to add a Content Size Fitter component to a Game Object with a Text component.
|
||||
|
||||

|
||||
|
||||
If you set either the Horizontal Fit or Vertical Fit to Preferred, the Rect Transform will adjust its width and/or height to fit the Text content.
|
||||
|
||||
See the reference page for [Content Size Fitter](script-ContentSizeFitter.md) for more information.
|
||||
|
||||
|
||||
### Aspect Ratio Fitter
|
||||
|
||||
The Aspect Ratio Fitter functions as a layout controller that controls the size of its own layout element.
|
||||
|
||||

|
||||
|
||||
It can adjust the height to fit the width or vice versa, or it can make the element fit inside its parent or envelope its parent. The Aspect Ratio Fitter does not take layout information into account such as minimum size and preferred size.
|
||||
|
||||
See the reference page for [Aspect Ratio Fitter](script-AspectRatioFitter.md) for more information.
|
||||
|
||||
|
||||
### Layout Groups
|
||||
|
||||
A layout group functions as a layout controller that controls the sizes and positions of its child layout elements. For example, a Horizontal Layout Group places its children next to each other, and a Grid Layout Group places its children in a grid.
|
||||
|
||||
A layout group doesn't control its own size. Instead it functions as a layout element itself which may be controlled by other layout controllers or be set manually.
|
||||
|
||||
Whatever size a layout group is allocated, it will in most cases try to allocate an appropriate amount of space for each of its child layout elements based on the minimum, preferred, and flexible sizes they reported. Layout groups can also be nested arbitrarily this way.
|
||||
|
||||
See the reference pages for [Horizontal Layout Group](script-HorizontalLayoutGroup.md), [Vertical Layout Group](script-VerticalLayoutGroup.md) and [Grid Layout Group](script-GridLayoutGroup.md) for more information.
|
||||
|
||||
|
||||
### Driven Rect Transform properties
|
||||
|
||||
Since a layout controller in the auto layout system can automatically control the sizes and placement of certain UI elements, those sizes and positions should not be manually edited at the same time through the Inspector or Scene View. Such changed values would just get reset by the layout controller on the next layout calculation anyway.
|
||||
|
||||
The Rect Transform has a concept of **driven properties** to address this. For example, a Content Size Fitter which has the Horizontal Fit property set to Minimum or Preferred will drive the width of the Rect Transform on the same Game Object. The width will appear as read-only and a small info box at the top of the Rect Transform will inform that one or more properties are driven by Conten Size Fitter.
|
||||
|
||||
The driven Rect Transforms properties have other reasons beside preventing manual editing. A layout can be changed just by changing the resolution or size of the Game View. This in turn can change the size or placement of layout elements, which changes the values of driven properties. But it wouldn't be desirable that the Scene is marked as having unsaved changes just because the Game View was resized. To prevent this, the values of driven properties are not saved as part of the Scene and changes to them do not mark the scene as changed.
|
||||
|
||||
|
||||
## Technical Details
|
||||
|
||||
The auto layout system comes with certain components built-in, but it is also possible to create new components that controls layouts in custom ways. This is done by having a component implement specific interfaces which are recognized by the auto layout system.
|
||||
|
||||
|
||||
### Layout Interfaces
|
||||
A component is treated as a layout element by the auto layout system if it implements the interface **ILayoutElement**.
|
||||
|
||||
A component is expected to drive the Rect Transforms of its children if it implements the interface **ILayoutGroup**.
|
||||
|
||||
A component is expected to drive its own RectTransform if it implements the interface **ILayoutSelfController**.
|
||||
|
||||
|
||||
### Layout Calculations
|
||||
|
||||
The auto layout system evaluates and executes layouts in the following order:
|
||||
|
||||
1. The minimum, preferred, and flexible widths of layout elements are calculated by calling CalculateLayoutInputHorizontal on ILayoutElement components. This is performed in bottom-up order, where children are calculated before their parents, such that the parents may take the information in their children into account in their own calculations.
|
||||
2. The effective widths of layout elements are calculated and set by calling SetLayoutHorizontal on ILayoutController components. This is performed in top-down order, where children are calculated after their parents, since allocation of child widths needs to be based on the full width available in the parent. After this step the Rect Transforms of the layout elements have their new widths.
|
||||
3. The minimum, preferred, and flexible heights of layout elements are calculated by calling CalculateLayoutInputVertical on ILayoutElement components. This is performed in bottom-up order, where children are calculated before their parents, such that the parents may take the information in their children into account in their own calculations.
|
||||
4. The effective heights of layout elements are calculated and set by calling SetLayoutVertical on ILayoutController components. This is performed in top-down order, where children are calculated after their parents, since allocation of child heights needs to be based on the full height available in the parent. After this step the Rect Transforms of the layout elements have their new heights.
|
||||
|
||||
As can be seen from the above, the auto layout system evaluates widths first and then evaluates heights afterwards. Thus, calculated heights may depend on widths, but calculated widths can never depend on heights.
|
||||
|
||||
|
||||
### Triggering Layout Rebuild
|
||||
|
||||
When a property on a component changes which can cause the current layout to no longer be valid, a layout recalculation is needed. This can be triggered using the call:
|
||||
|
||||
LayoutRebuilder.MarkLayoutForRebuild (transform as RectTransform);
|
||||
|
||||
The rebuild will not happen immediately, but at the end of the current frame, just before rendering happens. The reason it is not immediate is that this would cause layouts to be potentially rebuild many times during the same frame, which would be bad for performance.
|
||||
|
||||
Guidelines for when a rebuild should be triggered:
|
||||
|
||||
* In setters for properties that can change the layout.
|
||||
* In these callbacks:
|
||||
* OnEnable
|
||||
* OnDisable
|
||||
* OnRectTransformDimensionsChange
|
||||
* OnValidate (only needed in the editor, not at runtime)
|
||||
* OnDidApplyAnimationProperties
|
||||
@@ -0,0 +1,71 @@
|
||||
# Basic Layout
|
||||
|
||||
In this section we'll look at how you can position UI elements relative to the Canvas and each other. If you want to test yourself while reading, you can create an Image using the menu **GameObject -> UI -> Image**.
|
||||
|
||||
## The Rect Tool
|
||||
Every UI element is represented as a rectangle for layout purposes. This rectangle can be manipulated in the Scene View using the **Rect Tool** in the toolbar. The Rect Tool is used both for Unity's 2D features and for UI, and in fact can be used even for 3D objects as well.
|
||||
|
||||

|
||||
|
||||
The Rect Tool can be used to move, resize and rotate UI elements. Once you have selected a UI element, you can move it by clicking anywhere inside the rectangle and dragging. You can resize it by clicking on the edges or corners and dragging. The element can be rotated by hovering the cursor slightly away from the corners until the mouse cursor looks like a rotation symbol. You can then click and drag in either direction to rotate.
|
||||
|
||||
Just like the other tools, the Rect Tool uses the current pivot mode and space, set in the toolbar. When working with UI it's usually a good idea to keep those set to **Pivot** and **Local**.
|
||||
|
||||

|
||||
|
||||
## Rect Transform
|
||||
The **Rect Transform** is a new transform component that is used for all UI elements instead of the regular **Transform** component.
|
||||
|
||||

|
||||
|
||||
Rect Transforms have position, rotation, and scale just like regular Transforms, but it also has a width and height, used to specify the dimensions of the rectangle.
|
||||
|
||||
### Resizing Versus Scaling
|
||||
When the Rect Tool is used to change the size of an object, normally for Sprites in the 2D system and for 3D objects it will change the local _scale_ of the object. However, when it's used on an object with a Rect Transform on it, it will instead change the width and the height, keeping the local scale unchanged. This resizing will not affect font sizes, border on sliced images, and so on.
|
||||
|
||||
### Pivot
|
||||
Rotations, size, and scale modifications occur around the pivot so the position of the pivot affects the outcome of a rotation, resizing, or scaling. When the toolbar Pivot button is set to Pivot mode, the pivot of a Rect Transform can be moved in the Scene View.
|
||||
|
||||

|
||||
|
||||
|
||||
### Anchors
|
||||
Rect Transforms include a layout concept called **anchors**. Anchors are shown as four small triangular handles in the Scene View and anchor information is also shown in the Inspector.
|
||||
|
||||
If the parent of a Rect Transform is also a Rect Transform, the child Rect Transform can be anchored to the parent Rect Transform in various ways. For example, the child can be anchored to the center of the parent, or to one of the corners.
|
||||
|
||||

|
||||

|
||||
The anchoring also allows the child to stretch together with the width or height of the parent. Each corner of the rectangle has a fixed offset to its corresponding anchor, i.e. the top left corner of the rectangle has a fixed offset to the top left anchor, etc. This way the different corners of the rectangle can be anchored to different points in the parent rectangle.
|
||||
|
||||

|
||||
The positions of the anchors are defined in fractions (or percentages) of the parent rectangle width and height. 0.0 (0%) corresponds to the left or bottom side, 0.5 (50%) to the middle, and 1.0 (100%) to the right or top side. But anchors are not limited to the sides and middle; they can be anchored to any point within the parent rectangle.
|
||||
|
||||

|
||||
You can drag each of the anchors individually, or if they are together, you can drag them together by clicking in the middle in between them and dragging. If you hold down **Shift** key while dragging an anchor, the corresponding corner of the rectangle will move together with the anchor.
|
||||
|
||||
A useful feature of the anchor handles is that they automatically snap to the anchors of sibling rectangles to allow for precise positioning.
|
||||
|
||||
|
||||
### Anchor presets
|
||||
|
||||
In the Inspector, the **Anchor Preset** button can be found in the upper left corner of the Rect Transform component. Clicking the button brings up the Anchor Presets dropdown. From here you can quickly select from some of the most common anchoring options. You can anchor the UI element to the sides or middle of the parent, or stretch together with the parent size. The horizontal and vertical anchoring is independent.
|
||||
|
||||

|
||||
|
||||
The Anchor Presets buttons displays the currently selected preset option if there is one. If the anchors on either the horizontal or vertical axis are set to different positions than any of the presets, the custom options is shown.
|
||||
|
||||
|
||||
### Anchor and position fields in the Inspector
|
||||
|
||||
You can click the Anchors expansion arrow to reveal the anchor number fields if they are not already visible. **Anchor Min** corresponds to the lower left anchor handle in the Scene View, and **Anchor Max** corresponds to the upper right handle.
|
||||
|
||||
The position fields of rectangle are shown differently depending on whether the anchors are together (which produces a fixed width and height) or separated (which causes the rectangle to stretch together with the parent rectangle).
|
||||
|
||||

|
||||
|
||||
When all the anchor handles are together the fields displayed are Pos X, Pos Y, Width and Height. The Pos X and Pos Y values indicate the position of the pivot relative to the anchors.
|
||||
|
||||
When the anchors are separated the fields can change partially or completely to Left, Right, Top and Bottom. These fields define the padding inside the rectangle defined by the anchors. The Left and Right fields are used if the anchors are separated horizontally and the Top and Bottom fields are used if they are separated vertically.
|
||||
|
||||
Note that changing the values in the anchor or pivot fields will normally counter-adjust the positioning values in order to make the rectangle stay in place. In cases where this is not desired, enable **Raw edit mode** by clicking the **R** button in the Inspector. This causes the anchor and pivot value to be able to be changed without any other values changing as a result. This will likely cause the rectangle to be visually moved or resized, since its position and size is dependent on the anchor and pivot values.
|
||||
@@ -0,0 +1,34 @@
|
||||
# Canvas
|
||||
|
||||
The **Canvas** is the area that all UI elements should be inside. The Canvas is a Game Object with a Canvas component on it, and all UI elements must be children of such a Canvas.
|
||||
|
||||
Creating a new UI element, such as an Image using the menu **GameObject > UI > Image**, automatically creates a Canvas, if there isn't already a Canvas in the scene. The UI element is created as a child to this Canvas.
|
||||
|
||||
The Canvas area is shown as a rectangle in the Scene View. This makes it easy to position UI elements without needing to have the Game View visible at all times.
|
||||
|
||||
**Canvas** uses the EventSystem object to help the Messaging System.
|
||||
|
||||
## Draw order of elements
|
||||
|
||||
UI elements in the Canvas are drawn in the same order they appear in the Hierarchy. The first child is drawn first, the second child next, and so on. If two UI elements overlap, the later one will appear on top of the earlier one.
|
||||
|
||||
To change which element appear on top of other elements, simply reorder the elements in the Hierarchy by dragging them. The order can also be controlled from scripting by using these methods on the Transform component: SetAsFirstSibling, SetAsLastSibling, and SetSiblingIndex.
|
||||
|
||||
## Render Modes
|
||||
|
||||
The Canvas has a **Render Mode** setting which can be used to make it render in screen space or world space.
|
||||
|
||||
### Screen Space - Overlay
|
||||
This render mode places UI elements on the screen rendered on top of the scene. If the screen is resized or changes resolution, the Canvas will automatically change size to match this.
|
||||
|
||||

|
||||
|
||||
### Screen Space - Camera
|
||||
This is similar to **Screen Space - Overlay**, but in this render mode the Canvas is placed a given distance in front of a specified **Camera**. The UI elements are rendered by this camera, which means that the Camera settings affect the appearance of the UI. If the Camera is set to **Perspective**, the UI elements will be rendered with perspective, and the amount of perspective distortion can be controlled by the Camera **Field of View**. If the screen is resized, changes resolution, or the camera frustum changes, the Canvas will automatically change size to match as well.
|
||||
|
||||

|
||||
|
||||
### World Space
|
||||
In this render mode, the Canvas will behave as any other object in the scene. The size of the Canvas can be set manually using its Rect Transform, and UI elements will render in front of or behind other objects in the scene based on 3D placement. This is useful for UIs that are meant to be a part of the world. This is also known as a "diegetic interface".
|
||||
|
||||

|
||||
@@ -0,0 +1,11 @@
|
||||
# UI How Tos
|
||||
In this section, you can learn about solutions to common UI tasks.
|
||||
|
||||
|**Topic** |**Description** |
|
||||
|:---|:---|
|
||||
| [Designing UI for Multiple Resolutions](HOWTO-UIMultiResolution.md)| Learn how to design UI that adapts to different screen resolutions.|
|
||||
| [Making UI elements fit the size of their content](HOWTO-UIFitContentSize.md)| Learn how to make UI elements fit the size of their content.|
|
||||
| [Creating a World Space UI](HOWTO-UIWorldSpace.md) | Learn how to create a World Space UI.|
|
||||
| [Creating UI elements from scripting](HOWTO-UICreateFromScripting.md)| Learn how to create UI elements from scripting.|
|
||||
| [Creating Screen Transitions](HOWTO-UIScreenTransition.md)| Learn how to create screen transitions.|
|
||||
| [Creating Custom UI Effects With Shader Graph](HOWTO-ShaderGraph.md) | Learn how to create custom UI effects with Shader Graph.|
|
||||
@@ -0,0 +1,84 @@
|
||||
# Interaction Components
|
||||
|
||||
This section covers components in the UI system that handles interaction, such as mouse or touch events and interaction using a keyboard or controller.
|
||||
|
||||
The interaction components are not visible on their own, and must be combined with one or more [visual components](UIVisualComponents.md) in order to work correctly.
|
||||
|
||||
## Common Functionality
|
||||
|
||||
Most of the interaction components have some things in common. They are selectables, which means they have shared built-in functionality for visualising transitions between states (normal, highlighted, pressed, disabled), and for navigation to other selectables using keyboard or controller. This shared functionality is described on the [Selectable](script-Selectable.md) page.
|
||||
|
||||
The interaction components have at least one UnityEvent that is invoked when user interacts with the component in specific way. The UI system catches and logs any exceptions that propagate out of code attached to UnityEvent.
|
||||
|
||||
## Button
|
||||
|
||||
A Button has an **OnClick** UnityEvent to define what it will do when clicked.
|
||||
|
||||

|
||||
|
||||
See the [Button](script-Button.md) page for details on using the Button component.
|
||||
|
||||
## Toggle
|
||||
|
||||
A Toggle has an **Is On** checkbox that determines whether the Toggle is currently on or off. This value is flipped when the user clicks the Toggle, and a visual checkmark can be turned on or off accordingly. It also has an **OnValueChanged** UnityEvent to define what it will do when the value is changed.
|
||||
|
||||

|
||||
|
||||
See the [Toggle](script-Toggle.md) page for details on using the Toggle component.
|
||||
|
||||
|
||||
## Toggle Group
|
||||
|
||||
A Toggle Group can be used to group a set of [Toggles](script-Toggle.md) that are mutually exclusive. Toggles that belong to the same group are constrained so that only one of them can be selected at a time - selecting one of them automatically deselects all the others.
|
||||
|
||||

|
||||
|
||||
See the [Toggle Group](script-ToggleGroup.md) page for details on using the Toggle Group component.
|
||||
|
||||
|
||||
## Slider
|
||||
|
||||
A Slider has a decimal number **Value** that the user can drag between a minimum and maximum value. It can be either horizontal or vertical. It also has a **OnValueChanged** UnityEvent to define what it will do when the value is changed.
|
||||
|
||||

|
||||
|
||||
See the [Slider](script-Slider.md) page for details on using the Slider component.
|
||||
|
||||
|
||||
## Scrollbar
|
||||
|
||||
A Scrollbar has a decimal number **Value** between 0 and 1. When the user drags the scrollbar, the value changes accordingly.
|
||||
|
||||
Scrollbars are often used together with a [Scroll Rect](script-ScrollRect.md) and a [Mask](script-Mask.md) to create a scroll view. The Scrollbar has a **Size** value between 0 and 1 that determines how big the handle is as a fraction of the entire scrollbar length. This is often controlled from another component to indicate how big a proportion of the content in a scroll view is visible. The Scroll Rect component can automatically do this.
|
||||
|
||||
The Scrollbar can be either horizontal or vertical. It also has a **OnValueChanged** UnityEvent to define what it will do when the value is changed.
|
||||
|
||||

|
||||
|
||||
See the [Scrollbar](script-Scrollbar.md) page for details on using the Scrollbar component.
|
||||
|
||||
## Dropdown
|
||||
|
||||
A Dropdown has a list of options to choose from. A text string and optionally an image can be specified for each option, and can be set either in the Inspector or dynamically from code. It has a **OnValueChanged** UnityEvent to define what it will do when the currently chosen option is changed.
|
||||
|
||||

|
||||
|
||||
See the [Dropdown](script-Dropdown.md) page for details on using the Dropdown component.
|
||||
|
||||
## Input Field
|
||||
|
||||
An Input Field is used to make the text of a [Text Element](script-Text.md) editable by the user. It has a UnityEvent to define what it will do when the text content is changed, and an another to define what it will do when the user has finished editing it.
|
||||
|
||||

|
||||
|
||||
See the [Input Field](script-InputField.md) page for details on using the Input Field component.
|
||||
|
||||
## Scroll Rect (Scroll View)
|
||||
|
||||
A Scroll Rect can be used when content that takes up a lot of space needs to be displayed in a small area. The Scroll Rect provides functionality to scroll over this content.
|
||||
|
||||
Usually a Scroll Rect is combined with a [Mask](script-Mask.md) in order to create a scroll view, where only the scrollable content inside the Scroll Rect is visible. It can also additionally be combined with one or two [Scrollbars](script-Scrollbar.md) that can be dragged to scroll horizontally or vertically.
|
||||
|
||||

|
||||
|
||||
See the [Scroll Rect](script-ScrollRect.md) page for details on using the Scroll Rect component.
|
||||
@@ -0,0 +1,13 @@
|
||||
# UI Reference
|
||||
|
||||
This section goes into more depth about Unity’s UI features.
|
||||
|
||||
| **Topic** | **Description** |
|
||||
|:---|:---|
|
||||
| [Rect Transform](class-RectTransform.md) | Learn about the Rect Transform component. |
|
||||
| [Canvas Components](comp-CanvasComponents.md) | Learn about the Canvas component and its related components. |
|
||||
| [Visual Components](comp-UIVisual.md) | Learn about the visual components of Unity UI. |
|
||||
| [Interaction Components](comp-UIInteraction.md) | Learn about the interaction components of Unity UI. |
|
||||
| [Auto Layout](comp-UIAutoLayout.md) | Learn about the auto layout components of Unity UI. |
|
||||
| [Events](EventSystemReference.md) | Learn about the event system components of Unity UI. |
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
# Visual Components
|
||||
|
||||
With the introduction of the UI system, new Components have been added that will help you create GUI specific functionality. This section will cover the basics of the new Components that can be created.
|
||||
|
||||
## Text
|
||||
|
||||

|
||||
|
||||
The **Text** component, which is also known as a Label, has a Text area for entering the text that will be displayed. It is possible to set the font, font style, font size and whether or not the text has rich text capability.
|
||||
|
||||
There are options to set the alignment of the text, settings for horizontal and vertical overflow which control what happens if the text is larger than the width or height of the rectangle, and a Best Fit option that makes the text resize to fit the available space.
|
||||
|
||||
## Image
|
||||
|
||||

|
||||
|
||||
An Image has a Rect Transform component and an **Image** component. A sprite can be applied to the Image component under the Target Graphic field, and its colour can be set in the Color field. A material can also be applied to the Image component. The Image Type field defines how the applied sprite will appear, the options are:
|
||||
|
||||
* **Simple** - Scales the whole sprite equally.
|
||||
|
||||
* **Sliced** - Utilises the 3x3 sprite division so that resizing does not distort corners and only the center part is stretched.
|
||||
|
||||
* **Tiled** - Similar to Sliced, but tiles (repeats) the center part rather than stretching it. For sprites with no borders at all, the entire sprite is tiled.
|
||||
|
||||
* **Filled** - Shows the sprite in the same way as Simple does except that it fills in the sprite from an origin in a defined direction, method and amount.
|
||||
|
||||
The option to Set Native Size, which is shown when Simple or Filled is selected, resets the image to the original sprite size.
|
||||
|
||||
Images can be imported as **UI sprites** by selecting Sprite( 2D / UI) from the 'Texture Type' settings. Sprites have extra import settings compared to the old GUI sprites, the biggest difference is the addition of the sprite editor. The sprite editor provides the option of **9-slicing** the image, this splits the image into 9 areas so that if the sprite is resized the corners are not stretched or distorted.
|
||||
|
||||

|
||||
|
||||
## Raw Image
|
||||
|
||||
The Image component takes a sprite but **Raw Image** takes a texture (no borders etc). Raw Image should only be used if necessary otherwise Image will be suitable in the majority of cases.
|
||||
|
||||
## Mask
|
||||
|
||||
A Mask is not a visible UI control but rather a way to modify the appearance of a control’s child elements. The mask restricts (ie, “masks”) the child elements to the shape of the parent. So, if the child is larger than the parent then only the part of the child that fits within the parent will be visible.
|
||||
|
||||
## Effects
|
||||
|
||||
Visual components can also have various simple effects applied, such as a simple drop shadow or outline. See the [UI Effects](comp-UIEffects.md) reference page for more information.
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user