Texto - Guía del usuario de Lumberyard

Texto

Puede utilizar un componente Text (Texto) para agregar una cadena de texto a un elemento.

Para ver ejemplos en el juego de lienzos completados con componentes de texto

  1. En Lumberyard Editor, en Proyecto de ejemplos, abra el nivel UiFeatures.

  2. Pulse Ctrl+G para reproducir el juego y, a continuación, elija Components (Componentes), Visual Components (Componentes visuales) y Text (Texto). El nivel contiene ejemplos de alineación del texto, color y valor alfa, marcado de estilo, desbordamiento y encapsulamiento y espacios entre caracteres y líneas.

  3. Pulse Esc para salir del juego.

Para ver los mismos lienzos en UI Editor, vaya al directorio lumberyard_version\dev\Gems\LyShineExamples\Assets\UI\Canvases\LyShineExamples\Comp\Text.

Puede abrir los siguientes lienzos:

  • Alignment.uicanvas: ejemplos de alineación de texto en el rectángulo del elemento

  • ColorAlpha.uicanvas: ejemplos de configuración de diferentes colores y niveles de transparencia.

  • StylingMarkup.uicanvas: ejemplos de personalización del aspecto del texto con diferentes estilos, colores y fuentes dentro de una única cadena.

  • ImageMarkup.uicanvas: ejemplo de incrustación de imágenes en texto

  • OverflowWrap.uicanvas: ejemplos de diferentes opciones de encapsulado y desbordamiento.

Utilice el panel Properties (Propiedades) de UI Editor (Editor de interfaz de usuario) para configurar las siguientes opciones para el componente Text (Texto).

Configuración de texto
Nombre Descripción
Text

Escriba la cadena de texto que desee y pulse Intro. También puede aplicar el marcado de estilo de texto.

Enable markup (Habilitar marcado)

Si se selecciona, la cadena de texto se analiza para detectar etiquetas de marcado.

Para obtener más información, consulte Marcado de texto.

Color

Haga clic en la muestra de color para seleccionar un color diferente.

Alpha (Alfa)

Utilice el control deslizante para elegir un valor alfa entre 0 y 1.

Font path (Ruta de fuente)

Haga clic en el botón y seleccione un archivo de fuente .font. Para obtener más información, consulte el tema sobre cómo Añadir nuevas fuentes.

Font size (Tamaño de fuente)

Introduzca un tamaño de fuente y pulse Intro.

Font effect (Efecto de fuente)

Seleccione un efecto de la lista. Los efectos de fuente disponibles los dicta el archivo de fuentes .font.

Horizontal text alignment (Alineación de texto horizontal)

Seleccione Left (Izquierda), Center (Centrado) o Right (Derecha) para alinear el texto con respecto a los bordes izquierdo y derecho del elemento.

Vertical text alignment (Alineación de texto vertical)

Seleccione Top (Arriba), Center (Centrado) o Bottom (Abajo) para alinear el texto con respecto a los bordes superior e inferior del elemento.

Overflow mode (Modo de desbordamiento)

Seleccione Overflow (Desbordamiento) para permitir que el texto aparezca fuera de los bordes del elemento.

Seleccione Clip text (Acoplamiento de texto) para ocultar texto o acoplar el texto que se salga de los bordes del elemento.

Wrap text (Ajustar texto)

Seleccione No wrap (No ajustar) para evitar que el texto se ajuste en líneas subsecuentes.

Seleccione Wrap text (Ajustar texto) para permitir que el texto se separe en líneas.

Marcado de texto

Puede personalizar el aspecto del texto de la IU del juego aplicando estilos negrita y cursiva, colores distintos y muchas fuentes en una sola cadena de texto. También puede incrustar imágenes en el texto.

Incluya etiquetas específicas directamente en el cuadro Font (Fuente) junto con la cadena. El lenguaje de marcado sencillo se basa ligeramente en HTML.

Para utilizar la característica de marcado de estilo de texto, es preciso que use un archivo de recursos de familia de fuentes *.fontfamily en el parámetro Font path (Ruta de fuente) (en lugar de un archivo de recursos .font individual). Para obtener más información sobre cómo añadir familias de fuentes a los proyectos, consulte Implementación de nuevas fuentes.

Para utilizar el marcado de estilo de texto

  1. En UI Editor, añada un componente Text (Texto) a un elemento en el lienzo (o modifique un componente existente).

  2. Con el elemento seleccionado, en el panel Properties (Propiedades), establezca la propiedad Font path (Ruta de fuente) en un archivo *.fontfamily.

  3. Escriba una cadena con estilo de marcado en el cuadro Text (Texto). Consulte la siguiente sección para ver ejemplos.

Etiquetas y atributos de estilo

ejemplo

Puede utilizar las siguientes etiquetas y atributos para modificar el estilo del texto con marcado:

Etiqueta Bold (Negrita): <b>

                                        Ejemplo que utiliza un componente Text (Texto) para añadir la negrita en UI Editor.
Etiqueta Italic (Cursiva): <i>

                                        Ejemplo que utiliza un componente Text (Texto) para añadir la cursiva en UI Editor.
Etiqueta Font color (Color de fuente): <font color>

                                        Ejemplo que utiliza un componente Text (Texto) para añadir un color de fuente en UI Editor.
Etiqueta Font face (Tamaño de fuente): <font face>

                                        Ejemplo que utiliza un componente Text (Texto) para añadir diferentes fuentes en UI Editor.

Etiquetas y atributos de imagen

Utilice la etiqueta <img> para incrustar una imagen en texto.

ejemplo

<img src=”images/icons/button" vAlign="center" height=”fontHeight” scale="1.5" yOffset="5" xPadding="6"/> <img src=”images/icons/button" vAlign="bottom" height=”100” scale="0.8" yOffset="-3" lPadding="2" rPadding="6"/>

Utilice los siguientes atributos para personalizar la imagen. Solo es obligatorio el atributo src. Los demás atributos son opcionales.

Atributo Ejemplo Descripción
src src="images/icons/button"

Ruta de recurso a la textura que mostrar.

vAlign vAlign="center"

Alineamiento de imagen en el área de texto. El área de texto hace referencia a la altura total del glifo mayor en la fuente. Si no especifica este atributo, la alineación predeterminada es baseline.

  • "top": alinea la parte superior de la imagen a la parte superior del área de texto

  • "center": alinea el centro de la imagen al centro del área de texto

  • "bottom": alinea la parte inferior de la imagen a la parte inferior del área de texto

  • "baseline": alinea la parte inferior de la imagen a la línea de base del área de texto

height height="100"

Establece la altura de la imagen y ajusta su anchura para conservar la relación de aspecto. Si no especifica este atributo, la alineación predeterminada es fontAscent.

  • "fontHeight": establece la altura de la imagen a la altura del área de texto total

  • "fontAscent": establece la altura de la imagen al ascenso de la fuente

  • "<float value>": establece la altura de la imagen a valores flotantes especificados en píxeles

scale scale="0.8" Ajusta la escala de la imagen según el factor de escala especificado. Si no se especifica, toma el valor predeterminado 1.0.
yOffset yOffset="-3"

Desplaza la imagen verticalmente el valor flotante especificado en píxeles. Si no se especifica, toma el valor predeterminado 0.

xPadding xPadding="6" Añade espacio igual delante y detrás de la imagen según el valor flotante especificado en píxeles. Si no se especifica, toma el valor predeterminado 0.0.
lPadding lPadding="10" Añade espacio a la izquierda de la imagen según el valor flotante especificado en píxeles. Si no se especifica, toma el valor predeterminado 0.0.
rPadding rPadding="2" Añade espacio a la derecha de la imagen según el valor flotante especificado en píxeles. Si no se especifica, toma el valor predeterminado 0.0.