Today we discuss about some e question regarding Text Mesh Pro like
What is Text Mesh Pro in unity?
Advantages of using Text Mesh Pro?
You will see how to use Text Mesh Pro is an example?
How to use Text Mesh Pro in a 3D Game?
How to create a custom font asset in Text Mesh Pro?
How to create a glow effect in unity?
How to outline and shadow effect in Text.
You will learn the Text Mesh Pro with a step by step guide.+
Text Mesh Pro Introduction:
- In Unity 2019.4 TextMesh Pro is available by default.
- TextMesh Pro is the ultimate text solution for Unity.
- It provides so many features for text formatting and your layouts. It’s very flexible during text styling and texturing.
- you can create 2D/3D fonts with effects in the TextMesh Pro.
- you can use the TextMesh Pro as UI Text Element and also as a 3D game object.
Text Mesh Pro Demo
Open unity hub and create a new unity project with a 3D template.
TextMesh Pro as 3D Object
- In Hierarchy Window, create a new 3D text object as below.
- If you are using TextMesh Pro for the first time in the current project then you see popup box about TextMesh Import settings as below
- Import TMP Essentials(useful library and class).
- Also, Import the example files of TextMesh Pro
- TextMesh Pro Package imported in the root folder.
- Now you have 3D Text as 3D object.
Create a 3D Environment in scene.
Change Directional Light Color to White.
Add a 3d object – plane in the current scene and rename it as “Ground”.
Set properties of “Ground” object as below.
Create a new folder with name “Materials”.
Create a new material for the Ground object in the Materials folder.
Change the material name as “Ground_Material”.
Change the material properties as below.
Open Lighting setting menu from the window menu
Adjust Lighting window with Inspector window.
Change properties of Environment lighting for better lighting condition.
Change the color of the ground material as below
Add a 3d cube object in the current scene.
rename this cube object as “Player”.
Create a material for the Player Object and rename it as “Player_Material”.
Change properties of Player_Material as below image.
Create a new material for the skybox in Materials folder.
Assign a new skybox material in lighting settings.
Output after scene setup.
- Rename the TextMesh Pro text as “Name_TMP_Text” in the hierarchy window.
- Change the width and the height of Name_TMP_Text as below.
Properties of the TextMesh Pro Text component
- Change the properties of the TextMesh Pro Text component of the Name_TMP_Text as below.
Change Text Input
- If RTL Editor is enabled then you can write in reverse order.
- Text Input Box: Here you can type text which will be rendered. You can write multiple lines here. you can use special characters & Rich Text tags like
- \n – new line
- \t – tab
- <b>Bold</b>
- <i>Italics</i>
- <u>Underline</u>
- <s>Strikethrough</s>
- <sup>Superscript</sup>
- <sub>Subscript</sub>
- <size=48>Point size 48</size>
- <size=+18>Point size increased by 18</size>
- <size=-18>Point size decreased by 18</size>
- <pos=5.5>Characters positioned about 5.5 characters from left side. <color=yellow>Yellow text</color>
Change font style
- here you see that Font style applied on text.
- Font Style : applies different font styles like Bold, Italic, Underline, Lowercase, Uppercase, Smallcaps, etc…
Change Font Size
- if you want to adjust your text as per the Text component’s width and height, enable the Auto Size feature as below.
Change Vertex Color
- Apply color on each character in the text.
- here word “Player” did not change its color because we set the color tag in Text Input Field. Note: Vertex Color was not applied to the character which has the color tag.
Change Color Gradient
- By default this property is disabled.
- If you enable this property then it will show you more sub-properties as in the image below
Here you can select already created color gradient from the “Color Present” field or you create your own gradient using the Color Mode & the Colors field.
- Let’s select one gradient color from the Color Present Field as below image
Output :
Here you notice that Vertex color + Color Gradient mix together so give another color.
Color of Player word not changed due to color tag.
How to create own customize gradient color for TextMesh Pro Text
- Remove the Color Preset and select Color Mode property.
- choose the color mode from the list.
- set Vertex Color as white.
- Now you see the original gradient color.
Override Tags
By default this property is disabled. If you enable this property then you will get output like
Now you notice that the Player Word also changes into the new gradient color. it means if you enable the “Override Tags” property then colors which you applied by tag in the Text Input Box will no longer work, as they are overridden.
Spacing Options
- Spacing Option Property is used to set space between two words or lines or characters or even paragraphs.
- Here we change the text and Spacing option to understand its process.
Alignments
- It will control the alignment of the text. Options are Left, Center, Right, and Justified. When Justified is selected, the ratio controls how additional spacing is added between words and characters.
Wrapping
- It wraps text to the next line when reaching the edge of the container.
Example:
Wrapping – Enable
Wrapping – Disable
Overflow
- It will provide ways to display text which past edge of the container.
- example: if we select Ellipsis type then the extra text will be display as (… ellipses) format.
Mapping
Mapping is used to map characters or words or lines or whole paragraphs with shader. We will discuss later in shader topics.
Extra Settings
- Margins – space between text and text container.
- Sorting in Layer – when we work with many texts, it helps in sorting.
- Order in Layer – A higher number means higher priority Here In the image, we add another text in the scene and set different color modes and order in the layer so the second text sets the front side of the first text.
- Remove the second text.
- Orthographic Mode – It is useful when you are working with an orthographic camera.
- Rich Text – It will enable the use of Rich Tags like <font>, <color> in TextMesh text otherwise rich tags will not work and it looks like normal text.
Example:
Rich Text = disabled
Rich Text = enabled
- Parse Escape Character – If enabled then “\n” works as escape character otherwise just a simple Text.
- Extra Padding – it will add extra padding between the characters and the edge of Textmesh so it reduces graphical errors.
How to Create Custom Font in TextMesh Pro???
- If you want to use custom font then you have to create font asset for TextMesh Pro Text.
- Download free font from website which offer free fonts.
- Create a new folder with name as “Fonts” and add new font file here.
- Open the Font Asset Creator Menu from window.
Font Asset Creator
- Here you can add and create new font assets with various settings.
- Source Font File: assign a font that you want to create as an asset.
- Sampling Point Size determines at what point size the font will be created. You can either manually select the size of the font or use the Auto Sizing mode which will find the largest possible font size to fit in the given Atlas Resolution. It is recommended to use Auto Sizing.
- Font Padding determines how much space in pixel units between each character. For an Atlas Resolution of 512 X 512, a value of 5 for padding is perfect.
- Atlas Resolution determines the size of the Font Atlas. For most fonts which include the full ASCII character set, a size of 512 X 512 works usually well for Signed Distance Field Render Mode.
- Character Set determines what characters will be included in the font atlas.
- Click on save button.
- Select file path to Asset>TextMesh Pro> Fonts
- Now Select a Text object and assign a new Font in Font Asset Property
Now change few property for perfect text as below.
Final Output
How to create new material for Text Mesh Pro Text??
create new material in the Materials folder with the name “Text Glow Material”.
In-Text Glow Material,
Change shader
Open debug setting part & assign font atlas file which you created in Font Asset Creator.
How to create Glow Text Effect in Unity
- Create a new scene with name as “Glow Text”.
- Create another material for the skybox.
- Duplicate current skybox material and create another material with the name “Skybox_black“.
- Assign this skybox material in the current lighting setting.
- Add new TextMesh Pro Text in Hierarchy Window.
- Rename this text as “TextGlowEffect“.
- Change properties of the Rect transform of “TextGlowEffect” text.
- Change properties of TextMesh Pro Component of “TextGlowEffect” text.
- Change properties of the material of the “TextGlowEffect” text.
Final Output
How to create an Outline effect in TextMesh Pro
- Create a new scene with name as “Outline Text“.
- Add a new TextMesh Pro text object with name as “TextOutlineEffect” in the Hierarchy Window.
- Create a new skybox for this “Outline Text” scene.
- Create a new material for text for the “TextOutlineEffect” text.
- Go to the materials folder, Duplicate the “Text Glow Material”.
- Reset value of duplicated material and rename it as “Text Outline Material”
Assign this newly created material in the TextMesh Pro Component.
Change properties of the TextMesh Pro component of the “TextOutlineEffect” text as below.
- Now change properties of shader values in material for Outline Effect.
Final Output
How to create a Shadow effect in TextMesh Pro
- Create a new scene with name as “Shadow Text“.
- Add a new TextMesh Pro text object with name as “TextShadowEffect” in the Hierarchy Window.
- Assign white skybox material to the scene.
- Create a new material for text for the “TextShadowEffect” text.
- Go to the materials folder, Duplicate the “Text Glow Material”.
- Reset value of duplicated material and rename it as “Text Shadow Material”
- Assign this newly created material in the TextMesh Pro component.
- Change properties of the TextMesh Pro component of TextShadowEffect” text as below.
Now change properties of shader values in material for Shadow Effect.
Final Output
How to apply 3D text effect in unity
- Create a new scene with a name as “3d Text”.
- Add a new TextMesh Pro text object with name as “TextOutlineEffect” in the Hierarchy Window.
- Assign a black skybox in this scene.
- Create a new material for text for the “Text3DEffect” text.
- Go to the materials folder, Duplicate the “Text Glow Material”.
- Reset value of duplicated material and rename it as “Text 3D Material”
- Assign this new created material in TextMesh Pro Component.
- Change properties of the TextMesh Pro component of the “Text3DEffect” text as below.
- Now change properties of shader values in material for 3D Effect.
Final Output
Summary
In this Article, we learn about TextMesh Pro with all its properties in details.