Text - Lumberyard Guía del usuario

Si proporcionásemos una traducción de la versión en inglés de la guía, prevalecerá la versión en inglés de la guía si hubiese algún conflicto. La traducción se proporciona mediante traducción automática.

Text

Puedes utilizar un Texto componente 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 la Proyecto de ejemplos, abra el nivel UiFeatures.

  2. Pulse Control+G para jugar al juego y luego elegir en orden Componentesde Componentes visuales, y Texto. El nivel tiene ejemplos de alineación de texto, color y alfa, marcado de estilo, desbordamiento y encapsulamiento, y espaciado entre caracteres y líneas.

  3. Pulse [EMPTY] para salir del juego.

Para ver los mismos lienzos en la UI Editor, ve a el lumberyard_version\dev\Gems\LyShineExamples\Assets\UI\Canvases\LyShineExamples\Comp\Text del directorio.

Puede abrir los siguientes lienzos:

  • Alignment.uicanvas – Ejemplos de alineación del texto en su rectángulo de 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 en una sola cadena

  • ImageMarkup.uicanvas – Ejemplo de anidamiento de imágenes en texto

  • OverflowWrap.uicanvas – Ejemplos de diferentes opciones de envoltura y desbordamiento

Utiliza el botón Propiedades de la Editor de interfaz de usuario de configure los siguientes ajustes para el Texto componente.

Configuración de texto
Nombre Descripción
Texto

Introduzca la cadena de texto preferida y pulse [EMPTY]. También puede solicitar marca de estilo de texto.

Activar marcado

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

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

[EMPTY]

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

[EMPTY]

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

Ruta de fuente

Haga clic en el botón y seleccione una fuente .font del archivo. Para obtener más información, consulte Adición de nuevas fuentes.

Tamaño de fuente

Introduzca un tamaño de fuente y pulse [EMPTY].

Efecto de fuente

Seleccione un efecto de la lista. Los efectos de fuente disponibles son dictados por la fuente .font del archivo.

Alineación de texto horizontal

Seleccionar Izquierdade Centro, o bien Derecha para alinear el texto con los bordes izquierdo y derecho del elemento.

Alineación de texto vertical

Seleccionar Parte superiorde Centro, o bien Inferior para alinear el texto con los bordes superior e inferior del elemento.

Modo de rebose

Seleccionar Desbordamiento para permitir que el texto se muestre más allá de los bordes del elemento.

Seleccionar Texto del clip para ocultar, o recortar, cualquier texto que fluya más allá de los bordes del elemento.

Ajustar texto

Seleccionar Sin envoltura para evitar que el texto se ajuste a las líneas posteriores.

Seleccionar Ajustar texto para permitir que el texto se divida en líneas separadas.

Margen de beneficio de texto

Puede personalizar el aspecto del texto en la interfaz de usuario del juego con un estilo en negrita y cursiva, varios colores de texto y varias fuentes en una sola cadena de texto. También puede incrustar imágenes en el texto.

Para ello, introduce etiquetas específicas directamente en el campo Texto junto con la cadena. El lenguaje de marcado sencillo se basa en HTML.

Para utilizar la función de marcado de estilo de texto, debe utilizar una familia de fuentes *.fontfamily del archivo de activos en la Ruta de fuente (en lugar de una de la persona .font del recurso de red). Para obtener más información sobre cómo agregar familias de fuentes a sus proyectos, consulte Implementación de nuevas fuentes.

Para utilizar el marcado de estilo de texto

  1. En la pestaña UI Editor, añade un Texto componente a un elemento en el lienzo (o modificar un componente existente).

  2. Con el elemento seleccionado, en la pestaña Propiedades , establece el Ruta de fuente propiedad a un *.fontfamily del archivo.

  3. Introduce una cadena con estilo de marcado en el campo Texto caja. Consulte la siguiente sección para ver ejemplos.

Etiquetas de estilo y atributos

ejemplo

Puede utilizar las siguientes etiquetas y atributos al diseñar texto con marcas de revisión:

En negrita etiqueta: <b>

                                        Ejemplo que utiliza un Texto componente para añadir negrita en el UI Editor.
Cursiva etiqueta: <i>

                                        Ejemplo que utiliza un Texto componente para añadir cursiva en el UI Editor.
Color de fuente etiqueta: <color de fuente>

                                        Ejemplo que utiliza un Texto componente para agregar color de fuente en el UI Editor.
Cara de fuente etiqueta: <font face>

                                        Ejemplo que utiliza un Texto para agregar diferentes fuentes en el componente UI Editor.

Etiqueta de imagen y atributos

Utiliza el botón <img> para incrustar una imagen en el 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 su imagen. Solo el src El atributo es obligatorio. Todos los demás atributos son opcionales.

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

Ruta de recurso de la textura que se mostrará.

vAlign vAlign="center"

Alineación de la imagen en el área de texto. El área de texto hace referencia a la altura total del glifo más grande de la fuente. Si no especifica este atributo, el valor predeterminado la alineación es baseline.

  • "top" – Alinea la parte superior de la imagen con la parte superior del área de texto

  • "center" – Alinea el centro de la imagen con el centro del área de texto

  • "bottom" – Alinea la parte inferior de la imagen con la parte inferior del área de texto

  • "baseline" – Alinea la parte inferior de la imagen con la línea base del área de texto

height height="100"

Establece la altura de la imagen y ajusta su ancho 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 en la altura del área de texto total

  • "fontAscent" – Establece la altura de la imagen en el ascenso de la fuente

  • "<float value>" – Establece la altura de la imagen en el valor flotante especificado en píxeles

scale scale="0.8" Escala la imagen según el factor de escala especificado. Si no se especifica, este atributo se establece de forma predeterminada en 1.0.
yOffset yOffset="-3"

Desplaza la imagen verticalmente por el valor flotante especificado en píxeles. Si no se especifica, este atributo se establece de forma predeterminada en 0.

xPadding xPadding="6" Añade el mismo espaciado antes y después de la imagen por el valor flotante especificado en píxeles. Si no se especifica, este atributo se establece de forma predeterminada en 0.0.
lPadding lPadding="10" Añade el espaciado a la izquierda de la imagen por el valor flotante especificado en píxeles. Si no se especifica, este atributo se establece de forma predeterminada en 0.0.
rPadding rPadding="2" Añade el espaciado a la derecha de la imagen por el valor flotante especificado en píxeles. Si no se especifica, este atributo se establece de forma predeterminada en 0.0.