> For the complete documentation index, see [llms.txt](https://docs.decentraland.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.decentraland.org/creator/content-creator-es/scenes-sdk7/fundamentos-del-contenido-3d/text.md). # Texto Cómo añadir texto a tu escena Añade texto a una escena usando el `TextShape` componente. Este texto se sitúa en una posición El texto en Decentraland admite todos los *utf8* caracteres, esto incluye caracteres orientales y especiales. {% hint style="warning" %} **📔 Nota**: Este componente es útil para etiquetas en el mundo y UIs que existen en el espacio 3D de la escena, no para la UI HUD 2D del jugador. {% endhint %} Para añadir texto como una etiqueta en una entidad existente, una buena práctica es crear una segunda entidad que tenga el `TextShape` componente y establecerla como hija de la otra entidad. ## Usa Scene Editor en Creator Hub La forma más fácil de colocar texto en el mundo es añadir un **Text** [Smart item](/creator/content-creator-es/scene-editor/interactividad/smart-items.md) visualmente en Scene Editor. Luego puedes configurar todos los campos disponibles en la UI de Scene Editor. ![](https://1216664193-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-e555db49c09743be8685fc9f249cfd2ab00480f0%2Ftext-smart-item.png?alt=media) ## Crear un componente de texto El siguiente ejemplo muestra cómo crear un `TextShape` componente y añadirlo a una entidad mediante código. ```ts const sign = engine.addEntity() Transform.create(sign, { position: Vector3.create(8, 1, 8), }) TextShape.create(sign, { text: 'Hello World', }) ``` {% hint style="warning" %} **📔 Nota**: Si la entidad con el componente de texto es hija de otra entidad, entonces se verá afectada por la escala del padre. Si el padre está escalado de forma desigual a lo largo de su eje, esto hará que el texto también se estire o se comprima. {% endhint %} {% hint style="warning" %} **📔 Nota**: `TextShape` los componentes no son clicables. `PointerEvents` los componentes no se activan cuando se usan en entidades que tienen un `TextShape` componente. {% endhint %} {% hint style="warning" %} **📔 Nota**: `TextShape` deben importarse mediante > `import { TextShape } from "@dcl/sdk/ecs"` Consulta [Imports](/creator/content-creator-es/scenes-sdk7/primeros-pasos/coding-scenes.md#imports) para saber cómo manejarlos fácilmente. {% endhint %} ## Cambiar el valor del texto Al crear un nuevo componente de texto, le asignas una cadena para mostrar. Esta cadena se almacena en el `texto` campo. Si quieres cambiar la cadena mostrada por el componente, puedes hacerlo en cualquier momento cambiando el `texto` campo en una versión [mutable](/creator/content-creator-es/scenes-sdk7/patrones-de-programacion/mutable-data.md) del componente. ```ts const mutableText = TextShape.getMutable(myEntity) mutableText.text = 'new string' ``` ## Propiedades básicas del texto El `TextShape` componente tiene varias propiedades que se pueden configurar para estilizar el texto. A continuación se muestran algunas de las más comunes: * `font`: Valor del enum `Font`. * `fontSize`: *number*. Una entidad con font 10 mide 1 metro de alto. * `textColor`: *Color4* objeto. *Color4* objetos almacenan un *RBG* color como tres números de 0 a 1, más *alpha* para transparencia. Ver [tipos de color](/creator/content-creator-es/scenes-sdk7/fundamentos-del-contenido-3d/color-types.md) para ver más detalles. ```ts TextShape.create(sign, { text: 'Hello World', textColor: { r: 1, g: 0, b: 0, a: 1 }, fontSize: 5, font: Font.F_SANS_SERIF, }) ``` ## Fuentes Las formas de texto pueden usar fuentes del enum `Font`. Este enum actualmente incluye las siguientes fuentes: * `Font.F_SANS_SERIF` * `Font.F_SERIF` * `Font.F_MONOSPACE` Por defecto se usa `Font.F_SANS_SERIF`. ```ts TextShape.create(sign, { text: 'Hello World', textColor: { r: 1, g: 0, b: 0, a: 1 }, fontSize: 5, font: Font.F_SANS_SERIF, }) ``` {% hint style="warning" %} **📔 Nota**: Actualmente, todas las fuentes se renderizan como Sans Serif. Este es un problema conocido que se corregirá en el futuro. {% endhint %} {% hint style="info" %} **💡 Consejo**: Si usas VS Studio o algún otro IDE, escribe `Font.` y deberías ver una lista de sugerencias con todas las fuentes disponibles. {% endhint %} ## Propiedades de alineación del texto y relleno El `TextShape` componente crea un cuadro de texto que tiene un tamaño, relleno, etc. * `textAlign`: Selecciona un valor del `TextAlignMode` enum. Los valores posibles incluyen todas las combinaciones entre alineación vertical (*arriba*, *medio*, *abajo*) y horizontal (*left*, *center*, *right*) alineación. * `ancho`: *number*. El ancho del cuadro de texto. * `alto`: *number*. La altura del cuadro de texto. * `paddingTop`: *number*. Espacio entre el texto y el contorno del cuadro de texto. * `paddingRight`: *number*. Espacio entre el texto y el contorno del cuadro de texto. * `paddingBottom`: *number*. Espacio entre el texto y el contorno del cuadro de texto. * `paddingLeft`: *number*. Espacio entre el texto y el contorno del cuadro de texto. {% hint style="info" %} **💡 Consejo**: Si un texto está pensado para flotar en el espacio, es una buena idea añadir un [`Billboard` componente](/creator/content-creator-es/scenes-sdk7/fundamentos-del-contenido-3d/entity-positioning.md#face-the-user) para que el texto gire y siempre mire al jugador y sea legible. {% endhint %} ## Propiedades de sombra y contorno del texto El texto no tiene sombra por defecto, pero puedes configurar los siguientes valores para darle un efecto similar a una sombra. * `shadowBlur`: *number* * `shadowOffsetX`: *number* * `shadowOffsetY`: *number* * `shadowColor`: *Color3* objeto. *Color3* objetos almacenan un *RBG* color como tres números de 0 a 1. ```ts TextShape.create(sign, { text: 'Texto con sombra', shadowColor: { r: 1, g: 0, b: 0 }, shadowOffsetY: 1, shadowOffsetX: -1, }) ``` Las letras del texto también pueden tener un contorno de un color diferente alrededor de su perímetro. * `outlineWidth`: *number*. Qué tan ancho será el contorno del texto, en todas las direcciones, como un número de 0 a 1. Por defecto *0*, lo que lo hace invisible. * `outlineColor`: *Color3* objeto. *Color3* objetos almacenan un *RBG* color como tres números de 0 a 1. ## Varias líneas Si quieres que tu texto abarque varias líneas, usa `\n` como parte de la cadena. El siguiente ejemplo tiene dos líneas de texto separadas: ```ts TextShape.create(sign, { text: 'Esta es una línea. \nEsta es otra línea', }) ``` También puedes configurar las siguientes propiedades relacionadas con textos con varias líneas: * `lineCount`: *number*. Cuántas líneas de texto caben como máximo en el cuadro de texto. Si no se configura, no hay límite en el número de líneas. La `textWrapping` debe estar *true* habilitada para usar más de una línea. * `lineSpacing`: *number*. Cuánto espacio hay entre cada línea. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.decentraland.org/creator/content-creator-es/scenes-sdk7/fundamentos-del-contenido-3d/text.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.