UI - mgea/godot GitHub Wiki

UI (Interfaz de Usuario) / GUI (INterfaz gráfico de Usuario)

Control Nodes

Godot tiene nodos específicos de tipo Control que permiten construir el Interfaz de Usuario (UI) https://docs.godotengine.org/en/stable/classes/class_control.html#class-control

Los nodos se pueden clasificar en dos tipos:

• Nodos de contenido

  • Buttons de diferentes estilos

    • Button
    • CheckButton

  • Labels

  • LineEdits and TextEdits

• Nodos de layout

  • BoxContainers
  • Popups

GUI skinning and themes

https://docs.godotengine.org/en/stable/tutorials/ui/gui_skinning.html

GUI skinning (or theming), es el método de personalizar la apariencia de los controles. Esas características se almacenan en un recurso Theme resource. Un proyecto Godot tiene un tema por defecto que se puede personalizar.

Se puede crear un nuevo tema (new theme) o sobreescribir algunas propiedades del existente (Override)

• Editor de tema

Algunas de las propiedades más habituales son:

• Color

• Font

• Font size

• Style (estilo, propiedades de fondo, forma..)

• Info y pasos sobre theme editor: https://school.gdquest.com/courses/learn_2d_gamedev_godot_4/telling_a_story/all_theme_editor_areas#the-theme-editor

Se pueden guardar en un fichero con extensión .tres y aplicarlo a otros componentes.

Pasos para crear un Theme en Godot (video)

Link: https://godot.land/curso-crear-themes-en-godot-engine/

StyleBoxTexture (uso de texture sheets)

Un aspecto importante (y que ahorra mucho tiempo) es crear una hoja de texturas (una imagen) donde se contienen todas las texturas ordenadas en retícula. Se puede seleccionar una parte de esa hoja para aplicar al diseño del tema (estilo)

Recurso: Custom Panels Using Godot 4.0! https://www.youtube.com/watch?v=G98H_nai7F4

---

Referencias:

Ref: https://docs.godotengine.org/en/stable/tutorials/ui/index.html