30/12/2014
En el mundo del desarrollo de videojuegos, la comunicación con el jugador es clave. No se trata solo de lo que dices, sino de cómo lo dices. Aquí es donde entra en juego el Rich Text, una herramienta increíblemente poderosa disponible en motores como Unity y plataformas como Roblox. A diferencia del texto plano, que es monótono y uniforme, el Rich Text te permite dar estilo, color y énfasis a tus cadenas de texto directamente desde el motor, sin necesidad de crear múltiples objetos de texto. Esta guía completa te enseñará todo lo que necesitas saber para convertirte en un experto en el uso de Rich Text y llevar la interfaz de usuario de tus juegos al siguiente nivel.

¿Qué es Exactamente el Rich Text?
El Rich Text, o texto enriquecido, es un sistema que utiliza un lenguaje de marcado simple, muy similar al HTML, para aplicar formato a porciones específicas de un texto. Mediante el uso de "etiquetas" (tags), puedes indicarle al motor del juego que renderice ciertas palabras o frases en negrita, cursiva, con un color diferente o incluso con un tamaño de fuente mayor. Esto es fundamental para resaltar información importante, como misiones, diálogos de personajes clave, tutoriales o notificaciones en la interfaz de usuario (UI).
La principal ventaja es la flexibilidad. Imagina que quieres mostrar el daño que recibe un enemigo: podrías mostrar el número en un color rojo brillante y más grande que el texto normal, todo dentro del mismo elemento de texto. Sin Rich Text, necesitarías varios elementos de UI, lo que complica la gestión y puede afectar al rendimiento. Con las etiquetas, todo se maneja en una sola cadena de texto.
Rich Text en Unity: Potenciado por TextMesh Pro
En Unity, aunque los elementos de texto básicos de la UI soportan Rich Text, el estándar de oro es TextMesh Pro (TMP). TMP ofrece un control mucho más avanzado y una calidad de renderizado superior. El sistema de etiquetas de TextMesh Pro es robusto y muy intuitivo.

Activación y Sintaxis Básica
Para usar Rich Text en un objeto de TextMesh Pro, simplemente asegúrate de que la propiedad "Rich Text" esté activada en la sección "Extra Settings" del inspector. Una vez activada, puedes empezar a insertar etiquetas directamente en tu campo de texto.
La sintaxis es simple y se basa en un par de etiquetas de apertura y cierre que envuelven el texto que deseas modificar:
<tag>Texto a modificar</tag>
Por ejemplo, la etiqueta <b> pone el texto en negrita, mientras que <i> lo pone en cursiva.
Este texto es normal, pero <b>este es negrita</b> y <i>este es cursiva</i>.
Se renderizará como: Este texto es normal, pero este es negrita y este es cursiva.

Etiquetas Comunes y sus Parámetros
Algunas etiquetas son directas, pero otras requieren parámetros para funcionar. Un parámetro es un valor que le das a la etiqueta para especificar su comportamiento.
<b>...</b>: Pone el texto en negrita.<i>...</i>: Pone el texto en cursiva.<u>...</u>: Subraya el texto.<s>...</s>:Tachael texto.<size=valor>...</size>: Cambia el tamaño del texto. El valor puede ser un número absoluto en píxeles (ej:<size=50>) o un porcentaje (ej:<size=150%>).<color=valor>...</color>: Cambia el color del texto. Este es uno de los más utilizados.
Profundizando en la Etiqueta de Color
La etiqueta <color> es especialmente versátil. Puedes especificar el color de dos maneras:
- Por nombre: Puedes usar nombres de colores predefinidos en inglés. Ejemplo:
<color=red>Texto en rojo</color>. - Por código hexadecimal: Para un control total, puedes usar códigos hexadecimales, similares a los que se usan en diseño web. El formato puede ser
#RRGGBB(Rojo, Verde, Azul) o#RRGGBBAA(Rojo, Verde, Azul, Alfa/Transparencia). Ejemplo:<color=#FF0000>Rojo puro</color>o<color=#00FF0080>Verde semitransparente</color>.
Tabla de Colores con Nombre Soportados
Aquí tienes una lista de los nombres de color que puedes usar directamente en Unity.
| Nombre del Color | Valor Hexadecimal | Muestra |
|---|---|---|
| aqua | #00ffffff | |
| black | #000000ff | |
| blue | #0000ffff | |
| green | #008000ff | |
| lime | #00ff00ff | |
| magenta | #ff00ffff | |
| red | #ff0000ff | |
| white | #ffffffff | |
| yellow | #ffff00ff |
Anidación y Alcance de las Etiquetas
Puedes combinar efectos anidando etiquetas. El orden en que cierras las etiquetas no tiene por qué ser el inverso al que las abriste, aunque es una buena práctica para mantener la legibilidad.

<color=blue>Este texto es azul y <b><i>esta parte</i></b> es además negrita y cursiva.</color>
Si no cierras una etiqueta, su efecto se aplicará a todo el texto que le sigue dentro del mismo objeto de texto. Por ejemplo, <color=green>Este texto es verde y seguirá siéndolo hasta el final.
Rich Text en Roblox
Roblox también ofrece un potente sistema de Rich Text para sus objetos de UI, como TextLabels, TextButtons y TextBoxs. El concepto es idéntico al de Unity: utilizas etiquetas para dar formato al texto.
¿Cómo se Activa en Roblox Studio?
Para habilitar el Rich Text, selecciona tu objeto de texto en el explorador y ve a la ventana de Propiedades. Busca la propiedad RichText y márcala como verdadera (activada). ¡Eso es todo! Ahora el objeto interpretará las etiquetas de formato.
Roblox Studio tiene una ventaja útil: al editar la propiedad Text con `RichText` activado, verás una vista previa en tiempo real del resultado final, lo que facilita la corrección de errores de sintaxis al instante.

Etiquetas Soportadas en Roblox
Roblox soporta un subconjunto de etiquetas muy similar a HTML. Las más comunes son:
<b>...</b>: Texto en negrita.<i>...</i>: Texto en cursiva.<u>...</u>: Texto subrayado.<s>...</s>: Textotachado.<font color="..." size="..." face="...">...</font>: Esta es la etiqueta más potente en Roblox. Te permite cambiar varias propiedades a la vez.color: Puedes usar valores RGB comorgb(255,0,0)o códigos hexadecimales como#FF0000.size: Define el tamaño del texto en píxeles.face: Cambia la fuente del texto a cualquiera de las disponibles en Roblox.
<stroke color="..." thickness="...">...</stroke>: Añade un contorno al texto, especificando su color y grosor.
Ejemplo en Roblox:
¡Alerta! <font color="rgb(255, 200, 0)"><b>Enemigo</b></font> detectado en el sector 7.
Buenas Prácticas y Consideraciones Importantes
- Cuidado con la localización: Un punto crucial a tener en cuenta es que los sistemas de localización automática suelen eliminar las etiquetas de Rich Text al traducir el texto. Si tu juego va a ser multilingüe, planifica cómo gestionarás el formato en diferentes idiomas.
- No abuses del formato: El Rich Text es poderoso, pero un uso excesivo puede hacer que tu UI sea difícil de leer y visualmente ruidosa. Úsalo para enfatizar, no para decorar cada palabra.
- Revisa tus etiquetas: Un error común es olvidar una etiqueta de cierre (
</tag>). Esto puede causar que el formato se aplique a todo el texto restante o que la etiqueta se muestre como texto plano. - Rendimiento: Aunque el impacto es generalmente bajo, analizar cadenas de texto complejas con muchas etiquetas en cada frame (por ejemplo, en un contador que se actualiza constantemente) puede tener un coste de rendimiento. Para textos estáticos o que cambian con poca frecuencia, es perfectamente seguro.
Preguntas Frecuentes (FAQ)
¿El Rich Text afecta el rendimiento del juego?
Mínimamente. El análisis de las etiquetas (parsing) consume recursos de la CPU. En textos estáticos o que cambian con poca frecuencia, el impacto es insignificante. Sin embargo, si se usa en un texto que se actualiza cada frame con muchas etiquetas complejas, podría notarse un pequeño impacto. La clave es usarlo con moderación en elementos dinámicos.
¿Puedo crear mis propias etiquetas personalizadas?
No directamente. Tanto Unity como Roblox solo reconocen un conjunto predefinido de etiquetas. No puedes inventar <mietiqueta> y esperar que funcione. Deberías utilizar las etiquetas soportadas por cada motor.
¿Qué pasa si olvido una etiqueta de cierre?
Generalmente, el formato que aplicaste con la etiqueta de apertura continuará hasta el final de la cadena de texto en ese objeto. En algunos casos, un anidamiento incorrecto o una sintaxis rota puede hacer que el motor no interprete las etiquetas y las muestre como texto literal.
¿Funcionan las etiquetas Rich Text en la consola de depuración de Unity?
¡Sí! La función Debug.Log() de Unity interpreta las etiquetas de Rich Text. Esto es extremadamente útil para depurar, ya que puedes imprimir mensajes de error en rojo, advertencias en amarillo y mensajes de éxito en verde, haciendo que tu consola sea mucho más legible. Por ejemplo: Debug.Log("<color=red>Error:</color> No se pudo encontrar al jugador.");
Si quieres conocer otros artículos parecidos a Domina el Rich Text en Roblox y Unity puedes visitar la categoría Juegos.
