Diseño Automático
Referencia UI

Rich Text (Texto Enriquecido)

El texto para los elementos UI y text meshes pueden ser incorporados por múltiples estilos de fuente y tamaños. El Rich text es soportado para ambos el sistema UY y el viejo sistema GUI legacy. Las clases Text, GUIStyle, GUIText y TextMesh tienen unas configuraciones Rich Text que instruyen a Unity para mirar por las etiquetas de markup dentro del texto. La función Debug.Log puede también utilizar estas etiquetas markup para aumentar los reportes de error de código. Las etiquetas no son mostrados pero indican cambios en el estilo par ser aplicados al texto.

Formato de Marcado

El sistema de marcado está inspirado por HTML pero no está intencionado en ser estrictamente compatible con HTML estándar. La idea básica es que una sección del texto puede ser encerrado a dentro de un par de etiquetas de marcado:-

   We are <b>not</b> amused

Como el ejemplo muestra, las etiquetas son solo piezas de texto dentro los caracteres del “corchete angular”. El texto dentro de la etiqueta denota su nombre (que en este caso es b). Tenga en cuenta que la etiqueta al final de la sección tiene el mismo nombre como el que está en el principio pero con un carácter barra / agregado. Las etiquetas no son mostradas al usuario directamente pero son interpretadas como instrucciones para estilar el texto que encierran. La etiqueta b usada en el ejemplo arriba aplica negrilla a la palabra “not”, entonces el texto aparecerá en pantalla como:-

   No estamos sorprendidos

Una sección marcada de texto (incluyendo las etiquetas que la encierran) es referida como un element.

Elementos Anidados(Nested)

Es posible aplicar más de un estilo a una sección de texto al “nesting” un elemento adentro de otro

   We are <b><i>definitely not</i></b> sorprendido

La etiqueta i aplica un estilo itálico, entonces esto sería presentado en la pantalla como

   Nosotros definitivamente no estamos sorprendidos

Tenga en cuenta que el orden de las etiquetas finales, que está en reversa a la de las etiquetas de partida. La razón de esto es quizás más clara si tenemos en cuenta que las etiquetas interiores no necesitan abarcar la totalidad del texto del elemento exterior

   We are <b>absolutely <i>definitely</i> not</b> sorprendidos

que da

   Nosotros absolutamente definitivamente no estamos sorprendidos

Parámetros de Etiqueta

Algunas etiquetas tienen un efecto simple de todo-o-nada en el texto pero otras podrían permitir variaciones. Por ejemplo, la etiqueta color necesita saber qué color aplicar. Información como esta es agregada a las etiquetas mediante el uso de parameters:-

   We are <color=green>green</color> con envidia

Tenga en cuenta que la etiqueta de finalización no incluye el valor del parámetro. Opcionalmente, el valor puede ser rodeado por signos de interrogación pero esto no es requerido.

Etiquetas Soportadas

La siguiente lista describe todas las etiquetas de estilo soportadas por Unity.

Tag Description Example Notes
b Renderiza el texto en negrilla.    We are <b>not</b> sorprendidos.
i Renderiza el texto en itálico.    We are <i>usually</i> no está sorprendido.
size Establece el tamaño del texto de acuerdo al valor del parámetro, dado en píxeles.    We are <size=50>largely</size> no afectados. Aunque esta etiqueta está disponible para debug.log, usted encontrará que el interlineado en la barra de la ventana y la consola tienen un aspecto extraño, si el tamaño es demasiado grande.
color Configura el color del texto de acuerdo a su valor del parámetro. El color puede ser especificado en un formato tradicional HTML.    #rrggbbaa … dónde las letras corresponden a un par de dígitos hexadecimal denotando valores de rojo, verde azul y alpha (transparencia) del color. Por ejemplo, cyan con una completa opacidad debería ser especificada por    <color=#00ffffff>… Otra opción es utilizar el nombre del color. Esto es más fácil de entender pero por lo natural, el rango de sus colores es limitado y una opacidad completa siempre es asumida    <color=cyan>… Los nombres del color son dados en una tabla abajo.
Nombre del Color Valor Hex Swatch
aqua (el mismo que el cian(cyan)) #00ffffff
black #000000ff
blue #0000ffff
brown #a52a2aff
cian(cyan) (el mismo que el aqua) #00ffffff
darkblue #0000a0ff
fucsia(fuchsia) (el mismo que magenta) #ff00ffff
green #008000ff
grey #808080ff
lightblue #add8e6ff
lime #00ff00ff
magenta (el mismo que fuchsia) #ff00ffff
maroon #800000ff
navy #000080ff
olive #808000ff
orange #ffa500ff
purple #800080ff
red #ff0000ff
silver #c0c0c0ff
teal #008080ff
white #ffffffff
yellow #ffff00ff

material

Esto es solamente útil para meshes de texto y renderiza una sección del texto con un material especificado por el parámetro. El valor es un índice a la matriz del mesh de texto de los materias como es mostrado por el inspector.

   We are <material=2>texturally</material> sorprendido

quad

Esto es solamente útil para meshes de texto y renderiza una imagen enlinea con texto. Toma parámetros que especifican el material a usar para la imagen, la altura de la imagen en píxeles, y otros cuatro que denotan un área rectangular de la imagen para mostrar. A diferencia de las otras etiquetas, quad no rodea una parte del texto y por lo tanto no hay ninguna etiqueta final - el carácter de barra se coloca al final de la etiqueta inicial para indicar que se trata de “cierre automático”.

   <quad material=1 tamaño=20 x=0.1 y=0.1 anchura=0.5 altura=0.5 />

Esto selecciona el material en posición en la matriz del material renderizado y establece la altura de la imagen a 20 píxeles. El área rectangular de imagen comienza en los valores dados x,y, del ancho y altura, que son todos dados como un fracción de la anchura sin escala, y la altura de la textura.

El GUI del Editor

El Rich text es desactivado por defecto en el sistema GUI del editor pero puede ser activado explícitamente usando un GUIStyle personalizado. La propiedad richText debe ser establecida a true y el estilo pasado a la función GUI en cuestión:-

GUIStyle style = new GUIStyle ();
style.richText = true;
GUILayout.Label("<size=30>Some <color=yellow>RICH</color> text</size>",style);
Diseño Automático
Referencia UI