# Text Add text to a scene using the `TextShape` component. This text sits in a position Text in Decentraland supports all *utf8* characters, this includes oriental and special characters. {% hint style="warning" %} **📔 Note**: This component is useful for in-world labels and UIs that exist in the 3D space of the scene, not for the player's 2D HUD UI. {% endhint %} The `TextShape` component is mutually exclusive with other shape components like primitive shapes and glTF 3D models, see [Shape components](https://github.com/decentraland/docs/blob/main/creator/sdk7/sdk7/3d-essentials/shape-components.md) for more details. To add text as a label on an existing entity, you create a second entity that has the `TextShape` component and set it as a child of the other entity. ## Use the Scene Editor in Creator Hub The easiest way to place text in-world is add a **Text** [Smart item](https://github.com/decentraland/docs/blob/main/creator/sdk7/scene-editor/interactivity/smart-items.md) visually on the Scene Editor. You can then set all the available fields on the Scene Editor's UI. ![](https://45449780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-e555db49c09743be8685fc9f249cfd2ab00480f0%2Ftext-smart-item.png?alt=media) ## Create a text component The following example shows how to create a `TextShape` component and add it to an entity via code. ```ts const sign = engine.addEntity() Transform.create(sign, { position: Vector3.create(8, 1, 8), }) TextShape.create(sign, { text: 'Hello World', }) ``` {% hint style="warning" %} **📔 Note**: If the entity with the text component is a child of another entity, then it will be affected by the parent's scale. If the parent is scaled unevenly along its axis, this will result in the text also being stretched or compressed. {% endhint %} {% hint style="warning" %} **📔 Note**: `TextShape` components aren't clickable. `PointerEvents` comopnents aren't activated when used on entites that have a `TextShape` component. {% endhint %} {% hint style="warning" %} **📔 Note**: `TextShape` must be imported via > `import { TextShape } from "@dcl/sdk/ecs"` See [Imports](https://github.com/decentraland/docs/blob/main/creator/sdk7/sdk7/getting-started/coding-scenes.md#imports) for how to handle these easily. {% endhint %} ## Change the text value When creating a new text component, you assign it a string to display. This string is stored in the `text` field. If you want to change the string displayed by the component, you can do so at any time by changing the `text` field on a [mutable version](https://github.com/decentraland/docs/blob/main/creator/sdk7/sdk7/programming-patterns/mutable-data.md) of the component. ```ts const mutableText = TextShape.getMutable(myEntity) mutableText.text = 'new string' ``` ## Basic text properties The `TextShape` component has several properties that can be set to style the text. Below are some of the most common: * `font`: Value from the enum `Font`. * `fontSize`: *number*. An entiy with font 10 is 1 meter tall. * `textColor`: *Color4* object. *Color4* objects store an *RBG* color as three numbers from 0 to 1, plus *alpha* for transparency. See [color types](https://github.com/decentraland/docs/blob/main/creator/sdk7/sdk7/3d-essentials/color-types.md) for more details. ```ts TextShape.create(sign, { text: 'Hello World', textColor: { r: 1, g: 0, b: 0, a: 1 }, fontSize: 5, font: Font.F_SANS_SERIF, }) ``` ## Fonts Text shapes can use fonts from the enum `Font`. This enum currently includes the following fonts: * `Font.F_SANS_SERIF` * `Font.F_SERIF` * `Font.F_MONOSPACE` By default uses it uses `Font.F_SANS_SERIF`. ```ts TextShape.create(sign, { text: 'Hello World', textColor: { r: 1, g: 0, b: 0 }, fontSize: 5, font: Font.F_SANS_SERIF, }) ``` {% hint style="warning" %} **📔 Note**: Currently, all fonts are rendered as Sans Serif. This is a known issue to fix in the future. {% endhint %} {% hint style="info" %} **💡 Tip**: If using VS studio or some other IDE, type `Font.` and you should see a list of suggestions with all of the available fonts. {% endhint %} ## Text alignment and padding properties The `TextShape` component creates a text box that has a size, padding, etc. * `textAlign`: Select a value from the `TextAlignMode` enum. Possible values include all combinations between vertical (*top*, *bottom*, *center*) and horizontal (*left*, *right*, *center*) alignment. * `width`: *number*. The width of the text box. * `height`: *number*. The height of the text box. * `paddingTop`: *number*. Space between the text and the outline of the text box. * `paddingRight`: *number*. Space between the text and the outline of the text box. * `paddingBottom`: *number*. Space between the text and the outline of the text box. * `paddingLeft`: *number*. Space between the text and the outline of the text box. * `zIndex`: *number*. Useful for when multiple flat entities occupy the same space, it determines which one to show in front. {% hint style="info" %} **💡 Tip**: If a text is meant to float in space, it's a good idea to add a [`Billboard` component](https://github.com/decentraland/docs/blob/main/creator/sdk7/sdk7/3d-essentials/entity-positioning.md#face-the-user) so that the text rotates to always face the player and be legible. {% endhint %} ## Text shadow and outline properties The text has no shadow by default, but you can set the following values to give it a shadow-like effect. * `shadowBlur`: *number* * `shadowOffsetX`: *number* * `shadowOffsetY`: *number* * `shadowColor`: *Color3* object. *Color3* objects store an *RBG* color as three numbers from 0 to 1. ```ts TextShape.create(sign, { text: 'Text with shadow', shadowColor: { r: 1, g: 0, b: 0 }, shadowOffsetY: 1, shadowOffsetX: -1, }) ``` The letters in the text can also have an outline in a different color surrounding its perimeter. * `outlineWidth`: *number*. How wide the text outline will be, in all directions, as a number from 0 to 1. By default *0*, which makes it invisible. * `outlineColor`: *Color3* object. *Color3* objects store an *RBG* color as three numbers from 0 to 1. ## Multiple lines If you want your text to span multiple lines, use `\n` as part of the string. The following example has two separate lines of text: ```ts TextShape.create(sign, { text: 'This is one line. \nThis is another line', }) ``` You can also set up the following properties related to texts with multiple lines: * `lineCount`: *number*. How many lines of text to fit into the textbox as a maximum. By default *1*. The `textWrapping` property must be *true* to use more than one line. * `lineSpacing`: *string*. How much space between each line, expressed as a string. For example "30px".