GTML - Godot Markup Language

Un complemento para Godot 4.x que te permite construir UI usando HTML y CSS. Crea menús de juego, HUDs y paneles con tecnologías web familiares.

Características

• Estructura de UI basada en HTML con más de 20 tipos de elementos
• Estilos CSS externos con más de 80 propiedades
• Recarga en vivo en el editor
• Sistema de diseño Flexbox
• Soporte para renderizado SVG
• Elementos de formulario con señales
• Transiciones CSS y pseudo-clases (:hover, :active, :focus)
• Fondos degradados y fuentes personalizadas

Inicio Rápido

1. Instalar

Copia addons/gtml/ a tu proyecto y habilítalo en Configuración del Proyecto → Plugins.

2. Crear Archivos

menu.html:

    
My Game
    Play
    Quit

menu.css:

.menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px;
    background-color: #1a1a2e;
}
h1 {
    font-size: 32px;
    color: #ffffff;
}
button {
    padding: 12px 24px;
    background-color: #00d4ff;
    border-radius: 4px;
    color: #000000;
    transition: background-color 200ms ease;
}
button:hover {
    background-color: #00a8cc;
}

3. Añadir el nodo GmlView

Añade un nodo GmlView y configura Ruta Html y Ruta Css en el Inspector.

4. Conectar señales

func _ready():
    $GmlView.button_clicked.connect(_on_button_clicked)
func _on_button_clicked(method_name: String):
    match method_name:
        "on_play":
            get_tree().change_scene_to_file("res://game.tscn")
        "on_quit":
            get_tree().quit()

Documentación

• Primeros pasos - Instalación y uso básico
• Elementos HTML - Etiquetas y atributos soportados
• Propiedades CSS - Referencia completa de propiedades
• Selectores CSS - Selectores y pseudo-clases
• Formularios y Entradas - Elementos y eventos de formularios
• Soporte SVG - Gráficos vectoriales
• Diseño y Flexbox - Sistema de diseño
• Transiciones - Transiciones CSS
• Fuentes y Tipografía - Fuentes personalizadas
• Extender GTML - Añadir nuevas funciones
• Limitaciones - Limitaciones conocidas

Ejemplos

Consulta addons/gtml/examples/ para demos funcionales:

• basic - Menú simple
• all_elements - Todos los elementos HTML
• css_features - Muestra de propiedades CSS
• flex_layout - Diseños con Flexbox
• transitions - Transiciones CSS

Licencia

Licencia MIT

--- Tranlated By Open Ai Tx | Last indexed: 2025-12-23 ---