zabloo/uiUna plataforma de UI para videojuegosGRATIS Y OPEN SOURCE

Aprende UI una vez.Publícala en todos los motores.

Construye la UI de tu juego en la web, con React. Expórtala una vez y úsala en tu motor favorito.

Empieza con el SDK Leer la documentación

Unity es una marca de Unity Technologies. Logo de Godot por Andrea Calabró (CC BY 4.0). Los nombres y las marcas identifican a cada motor; no implican ningún respaldo.

Renderer real

Componentes, movidos en vivo.

Esto no es un vídeo. El marco ejecuta el mismo renderer que ejecuta el SDK —mide el layout, construye su propia geometría y dibuja su propio texto— y un script está escribiendo en las rutas de datos que la pantalla enlaza. En cuanto lo tocas, el script se detiene: el panel de al lado escribe esas mismas rutas y la consola lee las acciones que la UI le devuelve al juego.

Un panel de ajustes de juego: un deslizador de volumen de música lleno hasta un tercio con un 30 leído a su lado, un interruptor de notificaciones apagado sobre otro de guardado en la nube encendido, y una lista de misiones de tres filas —Missing caravan en Dustfall, Wolves at the gate en North Road y Ledger audit en Guild hall—, cada una con su botón Track. — El renderer se carga cuando arranca la demo, y no antes: el marco en reposo es una imagen. El marco lleva la misma descripción en texto, y las pestañas de código son el equivalente accesible de la imagen.

Layout

Un subconjunto de Flexbox que todos los motores implementan igual. La fila que llega empuja el layout porque el layout se mide, no viene fijado de antemano.

Bindings

El texto, los valores y el estado de los interruptores leen de rutas de datos que posee el juego. El volumen de arriba es una ruta, leída por el deslizador y por el número de al lado.

Acciones con nombre

La UI emite nombres, no callbacks. El juego se suscribe a «track» y nunca sabe qué dibujó el botón que lo envió.

Tokens, recargados

Una pantalla. Cuatro temas. Sin recompilar.

El mismo panel de la sección de arriba, con otro tema y en vivo. Cada cambio de abajo entrega a la vista en marcha un archivo nuevo —la propia llamada de hot-update del SDK— con la misma pantalla y otro diccionario. El color, el radio de las esquinas, el espaciado, la duración de las transiciones y la escala tipográfica son valores de ese fichero: por eso cambiar la escala redimensiona el texto y recoloca el panel a su alrededor.

Tokens

Colores, espaciado, radios y duraciones se resuelven a través de un diccionario que viaja en el archivo. Cambiar de tema son datos nuevos, no una pantalla que alguien haya vuelto a abrir.

Degradación

Que el SDK sea más antiguo que el contenido que recibe es un caso normal. Los nodos desconocidos degradan por regla, y un archivo que el lector rechaza deja intacta la pantalla que ya estaba mostrando.

En el motor

Carga un archivo. Escucha las acciones.

Un ZablooDocument en un GameObject guarda el archivo exportado y lo dibuja; un script a su lado escucha las acciones y empuja los datos. Esa es toda la superficie de integración. El SDK es dueño del dibujo y de la entrada; tu juego, de los datos y de qué significa cada nombre.

Un componente por pantalla, no un árbol de prefabs
Una sola ruta de dibujado, sea cual sea la pantalla
Cambia el archivo con el juego en marcha y conserva la sesión

ShopDriver.csUnity

[RequireComponent(typeof(ZablooDocument))]
public sealed class ShopDriver : MonoBehaviour
{
    ZablooDocument _doc;

    void Start()
    {
        _doc = GetComponent<ZablooDocument>();
        _doc.OnAction += OnZablooAction;
        _doc.SetData("player.gold", 1250);
    }

    void OnZablooAction(string action)
    {
        if (action == "buy") Economy.Purchase();
    }
}

Pon tu UI en la próxima build.

El SDK es open source y gratis. Empieza con una pantalla y mira hasta dónde te lleva.

Empieza con el SDK Ver el código en GitHub