Skinning GUI

¡Oh, hermosa GUI!

Este tutorial trata sobre el revestimiento avanzado de la interfaz de usuario. La mayoría de los juegos generalmente no necesitan esto, ya que terminan confiando en Label, TextureRect, TextureButton y TextureProgress.

Sin embargo, muchos tipos de juegos suelen necesitar interfaces de usuario complejas, como los MMO, los juegos de rol tradicionales, los simuladores, la estrategia, etc. Estos tipos de interfaz también son comunes en algunos juegos que incluyen editores para crear contenido, o interfaces para la conectividad de la red.

La interfaz de usuario de Godot utiliza estos tipos de control con el tema predeterminado, pero se pueden adaptar para que se asemejen a cualquier tipo de interfaz de usuario.

Tema

La GUI se muestra a través del recurso Theme. El tema contiene toda la información necesaria para cambiar el estilo visual de todos los controles. Las opciones del tema se nombran, así que no es obvio qué nombre cambia qué (especialmente del código), pero se proporcionan varias herramientas. El lugar definitivo para ver qué es cada opción de tema para cada control, que siempre estará más actualizado que cualquier documentación, es el archivo scene/resources/default_theme/default_theme.cpp. En el resto de este documento se explicarán las diferentes herramientas utilizadas para personalizar el tema.

El tema puede aplicarse a cualquier control en la escena. Como resultado, todos los controles de niños y nietos utilizarán también ese mismo tema (a menos que se especifique otro tema más abajo en el árbol). Si no se encuentra un valor en un tema, se buscará en los temas más altos de la jerarquía, hacia la raíz. Si no se encuentra nada, se utiliza el tema predeterminado. Este sistema permite la anulación flexible de temas en interfaces de usuario complejas.

Atención

No uses la opción de tema personalizado en la configuración del proyecto, ya que hay errores conocidos de propagación del tema. En su lugar, aplica tu tema a la propiedad Theme del nodo de control raíz. Se propagará a las escenas instanciadas automáticamente. Para obtener la temática correcta en el editor de escenas instanciadas, también puedes aplicar el recurso del tema al nodo raíz de la escena instanciada.

Opciones de temas

Cada tipo de opción en una plantilla puede ser:

  • Una constante entera: Una única constante numérica. Generalmente se usa para definir el espacio entre componentes o la alineación.

  • A Color: Un solo color, con o sin transparencia. Los colores se aplican generalmente a las fuentes e iconos.

  • A Texture: Una sola imagen. Las texturas no se usan a menudo, pero cuando lo hacen, representan manijas para elegir o iconos en un control complejo (como un diálogo de archivo).

  • A Font: A cada control que usa texto se le pueden asignar las fuentes utilizadas para dibujar las strings.

  • A StyleBox: Stylebox es un recurso que define cómo dibujar un panel en varios tamaños (más información sobre ellos más adelante).

Cada opción está asociada con:

  • Un nombre (el nombre de la opción)

  • A Control (el nombre del control)

Un ejemplo de uso:

var theme = Theme.new()
theme.set_color("font_color", "Label", Color.red)

var label = Label.new()
label.theme = theme
var theme = new Theme();
theme.SetColor("fontColor", "Label", new Color(1.0f, 0.0f, 0.0f));

var label = new Label();
label.Theme = theme;

En el ejemplo anterior, se crea un nuevo tema. Se cambia la opción "font_color" y se aplica a una etiqueta. Por lo tanto, el texto de la etiqueta (y todas las etiquetas de los hijos y nietos) será rojo.

Es posible anular esas opciones sin usar el tema directamente, y sólo para un control específico, usando la API de anulación en Control.add_color_override():

var label = Label.new()
label.add_color_override("font_color", Color.red)
var label = new Label();
label.AddColorOverride("fontColor", new Color(1.0f, 0.0f, 0.0f));

En la ayuda en línea de Godot (en la pestaña Script), puede verificar qué opciones de tema son reemplazables, o verificar la referencia de clase Control.

Personalizando un control

Si sólo hay que personalizar unos pocos controles, a menudo no es necesario crear un nuevo tema. Los controles ofrecen sus opciones de temas como tipos especiales de propiedades. Si están marcados, se anulan:

../../_images/themecheck.png

Como se puede ver en la imagen de arriba, las opciones temáticas tienen pequeñas casillas de verificación. Si están marcadas, pueden usarse para anular el valor del tema sólo para ese control.

Creando un tema

La forma más simple de crear un tema es editar un recurso temático. Crea un tema desde el menú de recursos; el editor aparecerá inmediatamente. Después de eso, guárdalo (por ejemplo, con el nombre mitema.tema):

../../_images/sb2.png

Esto creará un tema vacío que más tarde podrá ser cargado y asignado a los controles.

Ejemplo: tematizar un botón

Descarga estos recursos (skin_assets.zip) y agréguelos a su proyecto. Abre el editor de temas, haz clic en "Editar tema" y selecciona "Añadir Elementos de Clase":

../../_images/themeci.png

Aparecerá un menú que indicará el tipo de control a crear. Seleccione "Botón":

../../_images/themeci2.png

Inmediatamente, todas las opciones del tema de los botones aparecerán en el editor de propiedades, donde pueden ser editadas:

../../_images/themeci3.png

Desde Styles, abre el menú desplegable "Normal" al lado de donde probablemente diga "null" y crea un "New StyleBoxTexture", luego edítalo. Un cuadro de estilo de textura contiene una textura y el tamaño de los márgenes que no se estirarán cuando la textura se estire. Esto se llama estiramiento de nueve parches o "3x3":

../../_images/sb1.png

Repita los pasos y añada los otros activos. No hay ninguna imagen hover o desactivada en los archivos de ejemplo, así que utiliza el mismo cuadro de estilo que en el normal. Establezca la fuente suministrada como fuente de botón y cambie el color de la fuente a negro. Pronto, tu botón tendrá un aspecto diferente y retro:

../../_images/sb2.png

Guarda este tema en el archivo .theme. Ve al editor 2D y crea algunos botones:

../../_images/skinbuttons1.png

Ahora, ve al nodo raíz de la escena y localiza la propiedad "theme", reemplázala por el tema que se acaba de crear. Debería verse así:

../../_images/skinbuttons2.png

¡Felicidades! ¡Has creado un tema GUI reutilizable!