Raygui: Una interfaz de usuario C de modo inmediato para el desarrollo de herramientas Wasm

Bienvenidos a todos. Mi nombre es Roman Santamaria. Soy ingeniero electrónico, profesor, emprendedor, y durante los últimos años he estado desarrollando herramientas y tecnología para la industria de los videojuegos.

Hoy voy a presentar una de esas tecnologías que es RightGui, que es una biblioteca CUI de modo inmediato destinada al desarrollo de herramientas. De hecho, esta misma presentación es una aplicación web, como pueden ver. Está ejecutándose en la web. Y esa es la herramienta. Y la presentación en sí ha sido creada con RightGui para demostrar las posibilidades y la versatilidad de esta herramienta.

Bien, comencemos. ¿Qué puedes hacer con RightGui? ¿Qué es exactamente RightGui? Bueno, RightGui en realidad es una biblioteca de modo inmediato. Significa que no almacena información internamente. Es sin estado. Así que en realidad todo el sistema de UI se basa en pequeñas funciones que son autónomas que pueden no solo procesar todas las entradas, sino también dibujar todo el control en modo inmediato. Aquí hay un ejemplo. Este fragmento de código en C en realidad define un botón al mismo tiempo que dibuja el botón y recibe de vuelta el estado del botón. Si el botón ha sido presionado, habilita una variable que está del lado del usuario. Y si esa variable está habilitada, en realidad muestra otro control de UI de modo inmediato que es un cuadro de mensaje con alguna información. Puedes ver que ese código genera el botón y cuando presionas el botón, ves que genera un cuadro de mensaje clave. Ese es todo el código necesario para el botón y el cuadro de mensaje, incluyendo en sí toda la lógica. Esa es una biblioteca de modo inmediato.

Además, la biblioteca es realmente de alto rendimiento. En el back end, utiliza otra de mis tecnologías que es Riley, que es una popular biblioteca C, de muy alto rendimiento en sí misma. Está codificada en C. Y ese código se compila a través de mscript a web assembly, permitiendo ejecutarse de manera muy eficiente en la web, de manera muy eficiente, todo ese código en, en una plataforma web, en un navegador. Además, gracias a ser una biblioteca C, es multiplataforma. Como dije, puedes ver que puede ejecutarse en la web, pero, en un navegador, pero también puede ejecutarse el mismo, exactamente el mismo código puede ser compilado para Windows, Linux, MacOS, FreeBSD, e incluso sistemas embebidos, Android, Raspberry Pi, sistemas operativos más esotéricos como haiku, o incluso otros sistemas operativos que son soportados por, por Riley, por el back end. En ese sentido, la biblioteca, RI-D, siendo una biblioteca de modo inmediato, tiene un consumo de memoria muy, muy bajo. En realidad, la biblioteca solo requiere alrededor de 145 kilobytes de memoria, de memoria RAM, ese es el requisito total para la biblioteca, y eso considera los estilos proporcionados. Es una variable global que contiene 348 propiedades para los estilos que en realidad puedes cambiar. Los iconos, la biblioteca proporciona, como puedes ver aquí, esos iconos son proporcionados por la biblioteca, hay hasta 250 iconos definidos pero puedes agregar más si lo deseas.

Y también la fuente, la fuente en realidad es el elemento más costoso en memoria porque incluye varias fuentes para múltiples idiomas. Pero en todos los estilos definidos, en realidad puedes ver aquí varios estilos que pueden cambiar en tiempo real. Ves que todos esos estilos son hasta 136 kilobytes incluyendo el atlas de textura de la fuente y todas las propiedades del atlas para una correcta representación de la fuente. Así que el total de memoria para la huella es de 145 kilobytes.

También la biblioteca incluye un conjunto de herramientas de soporte que permite editar estilos como has visto ahora mismo. Hay un editor de estilos. Todos los estilos que has visto han sido creados con ese editor de estilos. El editor de estilos también se ejecuta en línea y también ha sido creado usando ReiG. Veremos más sobre eso. También hay otra herramienta que es un editor de iconos que ha sido utilizado para crear todos los iconos que puedes ver en los botones y por todas partes. Y finalmente, hay una tercera herramienta que es un editor de diseño. Debo mencionar que ReiG no tiene un mecanismo de auto diseño. Solo el diseño debe ser definido por el usuario. Así que el usuario tiene control total sobre todo el diseño o cómo todo está colocado alrededor. Veremos un poco más sobre esas herramientas más adelante.

Y finalmente, todo lo que has visto, ReiLib, ReiG y todas las herramientas que interactúan con ReiG y todas las herramientas de soporte, todo es gratuito y de código abierto. Y puedes encontrarlo aquí en este enlace. Eso es sobre las características. ¿Qué hay de los controles? Bien, aquí tienes un ejemplo en vivo de algunos o la mayoría de los controles disponibles en ReiG. Tienes etiquetas. En realidad esas cosas son etiquetas. Tienes botones desplegables, casillas de verificación. También tienes spinners. Tienes un cuadro de texto. En realidad, puedes colocar las comillas o todo. Tienes un cuadro de texto. Tienes cuadros combinados, diferentes estados, una vista de guillies, un grupo de alternancia. También tienes un selector de color con barras alfa y algunas barras, deslizadores, barra de progreso, paneles de desplazamiento, cuadrículas. Incluso tienes un cuadro de texto más enriquecido. Esos son los controles disponibles.

De hecho, un punto interesante sobre los controles es que todos los controles en realidad son solo una llamada a función. Eso es lo que te da el UI de modo inmediato. Y todos los controles tienen estas, esas son en realidad las funciones, y esas son la estructura de las funciones para cada control. Es el nombre del control gig, el rectángulo, definiendo el rectángulo del control, el texto contenido en el control, y finalmente alguna variable de estado del control que debería ser devuelta al usuario. Por ejemplo, en el caso de ListView, el elemento seleccionado. Lo mismo para el grupo de alternancia. En el caso del panel, devuelve la posición de la barra de desplazamiento, el desplazamiento. Sí, esas son las variables devueltas. Usualmente hay una, dos variables como mucho para cada control. Y finalmente, tenemos una variable de retorno que es algún estado interno para el control que se devuelve según sea necesario como un entero. Así que como ves, en realidad es bastante simple el uso de ese sistema de UI de modo inmediato. Eso es respecto a los controles disponibles como ves aquí.

En realidad puedes escalarlos, mover lo que sea, mientras eso es una pantalla interactiva. Sí, eso es todo. Sobre los estilos, ya te he mostrado lo que está disponible, pero por defecto creé un conjunto de estilos como una vitrina, mostrando cómo todo, en realidad todo puede ser cambiado en el estilo. Por ejemplo, eso es una etiqueta con un tamaño específico, eso es una etiqueta con un color específico, aquí tienes los diferentes estilos, con diferentes fuentes puedes cambiar la fuente, el tamaño de la fuente, el espaciado, el espaciado de línea para múltiples líneas. Puedes configurar casi todos los aspectos del estilo que puedas imaginar para el UI. Como puedes ver, esos son algunos de los estilos que creé.

Personalmente, realmente, realmente me gusta ese estilo de UI de arte pixelado, estilo retro de UI para mis herramientas y todos los estilos que creé que siguen esas directrices. Pero en realidad, puedes cargar cualquier forma estándar, y puedes personalizar el estilo para tus necesidades para no ser tan retro. Eso es todo. Así que, eso es lo que tenemos sobre el estilo. Sobre las herramientas de soporte, como dije, hay tres herramientas de soporte que te permiten configurar cualquier aplicación de right-gui desarrollada para tus necesidades. De hecho, hay tres herramientas, el Geo Styler, el Geo Icons y el Geo Layout.

Las tres herramientas son gratuitas y de código abierto. De hecho, están disponibles en línea. No solo están disponibles en GitHub. De hecho, aquí puedes ver la herramienta en GitHub, pero también tienes la herramienta publicada en línea que se puede ejecutar. Y un punto interesante es que puedes configurar el estilo en vivo y en la misma herramienta, estás viendo en vivo cómo el estilo de la herramienta cambia. Por ejemplo, si cambio el color del borde, si cambio el color base del texto de los controles, por ejemplo. Ahora, de esa manera, puedes cambiar algún control específico que afecta a todos los controles, pero puedes cambiar algún control específico. Por ejemplo, el botón, si quiero que el botón sea un poco diferente ahora. El color del borde. Puedo cambiar solo los botones ahora y bueno, puedes cambiar todas las propiedades. También puedes cambiar la fuente. Bueno, tienes un control total, no solo sobre todos los controles como estilo predeterminado, sino también sobre cada control específico, ¿de acuerdo?

y todo. Eso es el gear styler pero, oh sí, también tienes el icons editor. Es un simple icons editor. Eso es todo, aquí puedes editar los iconos. Esos son los iconos que están por defecto incluidos en RaiGui. Hay 256 espacios para iconos actualmente. En este momento todavía hay algunos espacios no llenos. Algunos colaboradores añaden nuevos iconos.

De hecho, todos esos iconos han sido añadidos por colaboradores últimamente y bueno, en este momento hay 256 pero sí eso se puede incrementar a cualquier número. Sí, y eso es un icons editor, ves. Sí, así que finalmente probablemente la herramienta más útil y más interesante considerando que Reigi no tiene un sistema de diseño automático. Que el diseño debe ser creado por el usuario. Es una herramienta layout creator. Por ejemplo, podemos colocar aquí controles De hecho, se puede editar Podemos colocar un textbox por ejemplo y hacerlo más grande. Puedes crear el diseño y de hecho es interesante que todos los diseños están referenciados por un punto de anclaje y puedes preguntar cómo si es una biblioteca de modo inmediato que en realidad solo son funciones llamadas cómo puedo exportar ese diseño. De hecho, eso es lo interesante cuando presionas exportar diseño actual. De hecho, genera código, genera automáticamente el código C para ese diseño. Puedes configurar si es código C, si contiene un archivo solo de encabezado, si quieres exportar anclajes, rectángulos, tienes varias opciones de configuración para exportar el código de la manera que quieras que se añada a tu proyecto. Ese es el diseño en realidad. Con esa herramienta puedes crear diseños auto contenidos. Por ejemplo, navegador de archivos, importador, exportador, ventana. Puedes crear ventanas auto contenidas que pueden ser exportadas como un archivo autónomo para ser añadido a cualquier proyecto. Eso es algo que hago con mis proyectos. Además de las herramientas de soporte Reiki también tenemos todas esas herramientas. De hecho, como dije en los últimos años he estado trabajando no solo en esas tecnologías, Reiki y algunas otras tecnologías, sino que también he estado en los últimos cinco años, me he centrado en el desarrollo de herramientas usando mis tecnologías. Aquí, hay un conjunto de herramientas que he creado. La mayoría de ellas están publicadas y pueden ser usadas en línea de forma gratuita, y algunas son solo internas. Para mí, por ejemplo, esa es una herramienta para crear herramientas de manera visual, etc. Ese es un editor de texto que aún no ha sido publicado. Algunas herramientas no han sido...

Algunas herramientas no han sido... no están listas, pero no están publicadas, pero la mayoría de ellas están publicadas y de hecho se pueden usar en línea. Por ejemplo, ese es un editor de sonido que también ha sido creado con Reiki. También es gratuito y de código abierto, pero luego tienes herramientas más complejas como herramientas de texto. De hecho, esta herramienta es como un canvas para ver imágenes, aplicar shaders, aplicar transformaciones a las imágenes y organizarlas en una especie de tablero.

Aquí tienes algunas imágenes de ejemplo, porque no tengo imágenes cargadas, pero puedes ver lo que se puede hacer con esa herramienta. Funciona en línea, pero también está disponible para descargar como una herramienta independiente. Esa es la capacidad multiplataforma de Reiki. Un empaquetador de texturas, una herramienta de estereografía, un empaquetador de recursos, por ejemplo. Esa herramienta está destinada a empaquetar para videojuegos, empaquetar recursos, imágenes, texto, shaders, modelos, audios, empaquetar herramientas en un paquete autónomo con diferentes compresiones, encriptaciones, para cada archivo. Y también tienes un creador de instaladores, y etcétera. De hecho, el conjunto de herramientas disponibles, es bastante amplio. Y de hecho, demuestra que, bueno, esas tecnologías funcionan y funcionan en la web, y han sido utilizadas en producción durante unos cinco años.

Y, sí, eso es todo. Bien. Espera, espera, espera, espera. Vamos a pantalla completa. Y bueno, esa sería mi presentación de Rite Geek. Espero que la disfrutes, te guste. Y ahora, si hay alguna pregunta, no dudes en preguntar.