1. Introducción a la biblioteca RightGui
Bienvenidos a la presentación de RightGui, una biblioteca CUI de modo inmediato para el desarrollo de herramientas. RightGui es una biblioteca de alto rendimiento que es sin estado y utiliza funciones pequeñas y autocontenidas para procesar entradas y dibujar controles. Puede ser utilizada en múltiples plataformas y tiene una huella de memoria baja. La biblioteca se compila a través de mscript a web assembly, lo que le permite ejecutarse eficientemente en plataformas web. También proporciona una variedad de iconos y estilos personalizables.
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 el eso 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, entonces empecemos. ¿Qué puedes hacer con RightGui? ¿Qué es exactamente RightGui? Bueno, RightGui es en realidad una biblioteca de modo inmediato. Esto significa que no almacena información internamente. Es sin estado. Así que en realidad todo el sistema de interfaz de usuario se basa en pequeñas funciones que son autocontenidas y que pueden no solo procesar todas las entradas, sino también dibujar todos los controles en modo inmediato. Aquí tienes un ejemplo. Este fragmento de código en C 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á en el lado del usuario. Y si esa variable está habilitada, en realidad muestra otro control de interfaz de usuario 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. 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 backend, utiliza otra de mis tecnologías que es Riley, que es una biblioteca C popular, muy de alto rendimiento en sí misma. Es código en C. Y ese código se compila a través de mscript a web assembly, lo que permite ejecutar de manera muy eficiente 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 se puede ejecutar el mismo código exactamente 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 compatibles con, con Riley, con el backend. En ese sentido, la biblioteca, RI-D, al ser una biblioteca de modo inmediato, tiene una huella de memoria muy, muy baja. 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 que proporciona la biblioteca, como puedes ver aquí, esos iconos son proporcionados por la biblioteca, hay hasta 250 iconos definidos pero
2. Fuente, Herramientas de Soporte y Controles
La fuente es el elemento más costoso en memoria de la biblioteca, con una huella total de memoria de 145 kilobytes. RightGui incluye un conjunto de herramientas de soporte para editar estilos, crear iconos y definir diseños. La biblioteca, las herramientas y las herramientas de soporte son todas gratuitas y de código abierto. Puedes encontrarlas en este enlace. RightGui proporciona una amplia gama de controles, incluyendo etiquetas, botones desplegables, casillas de verificación, selectores, cuadros de texto, cuadros combinados, selectores de color, deslizadores, barras de progreso, paneles de desplazamiento, cuadrículas y cuadros de texto enriquecido.
puedes agregar más si quieres. 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 se pueden cambiar en tiempo real. Ves que todos esos estilos suman hasta 136 kilobytes, incluyendo el atlas de texturas de la fuente y todas las propiedades del atlas para un renderizado adecuado de la fuente. Por lo tanto, la huella total de memoria es de 145 kilobytes. Además, la biblioteca incluye un conjunto de herramientas de soporte que permiten 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 RightGui. Veremos más sobre eso. También hay otra herramienta que es un editor de iconos que se ha utilizado para crear todos los iconos que puedes ver en los botones y en todas partes. Y finalmente, hay una tercera herramienta que es un editor de diseños. Debo mencionar que RightGui no tiene un mecanismo de diseño automático. Solo el diseño debe ser definido por el usuario. Por lo tanto, el usuario tiene control total sobre cómo se coloca todo. Veremos un poco más sobre esas herramientas más adelante. Y finalmente, todo lo que has visto, RightLib, RightGui y todas las herramientas que interactúan con RightGui y todas las herramientas de soporte, todo es gratuito y de código abierto. Y puedes encontrarlo aquí en este enlace. Eso es todo sobre las características. ¿Qué hay de los controles? Bueno, aquí tienes un ejemplo en vivo de algunos o la mayoría de los controles disponibles en RightGui. Tienes etiquetas. En realidad, esas cosas son etiquetas. Tienes botones desplegables, casillas de verificación. También tienes selectores, cuadros de texto, cuadros combinados, selectores de color, deslizadores, barras de progreso, paneles de desplazamiento, cuadrículas y cuadros de texto enriquecido.
3. Controles, Estilos y Herramientas de Soporte
En el sistema de interfaz de usuario de modo inmediato, los controles son simplemente llamadas a funciones y devuelven variables como el elemento seleccionado o la posición de la barra de desplazamiento. Los estilos en RightGui son altamente personalizables, con opciones para diferentes fuentes, tamaños y espaciado. Las herramientas de soporte, Geo Styler, Geo Icons y Geo Layout, te permiten configurar aplicaciones RightGui y ver los cambios de estilo en tiempo real.
En realidad, un punto interesante sobre los controles es que todos los controles son simplemente una llamada a función. Eso es lo que te ofrece la interfaz de usuario 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, el rectángulo que define el área del control, el texto contenido en el control y finalmente alguna variable de estado del control que debe 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. Por lo general, hay una o dos variables como máximo para cada control. Y finalmente, tenemos una variable de retorno que es un estado interno para el control que se devuelve según sea necesario como un número entero. Como puedes ver, en realidad es bastante simple el uso de ese sistema de interfaz de usuario de modo inmediato. Eso se refiere a los controles disponibles como puedes ver aquí. En realidad, puedes escalarlos, moverlos, lo que sea, ya que es una pantalla interactiva. Sí, eso es todo. Sobre los estilos, ya te he mostrado lo que está disponible, pero por defecto he creado un conjunto de estilos como una muestra, mostrando cómo se puede cambiar todo 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 fuente, el espaciado, el espaciado de línea para varias líneas. Puedes configurar casi todos los aspectos de estilo que te puedas imaginar para la interfaz de usuario. Como puedes ver, estos son algunos de los estilos que he creado. Personalmente, realmente me gusta ese estilo de interfaz de usuario de arte pixelado, estilo retro para mis herramientas y todos los estilos que he creado siguiendo esas pautas. Pero en realidad, puedes cargar cualquier formulario estándar, y puedes personalizar el estilo según tus necesidades para que no sea tan retro. Eso es todo. Entonces, eso es lo que tenemos sobre los estilos. Sobre las herramientas de soporte, como dije, hay tres herramientas de soporte que te permiten configurar cualquier aplicación RightGui desarrollada según tus necesidades. En realidad, hay tres herramientas, el Geo Styler, el Geo Icons y el Geo Layout.
4. Herramientas y Configuración de Estilos
Las tres herramientas son gratuitas y de código abierto. Puedes configurar el estilo en tiempo real y ver los cambios al instante. Tienes control total sobre el estilo predeterminado y cada control específico.
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 tiempo real y en la misma herramienta, puedes ver en vivo cómo cambia el estilo de la herramienta. Por ejemplo, si cambio el color del borde, si cambio el color base del texto de los controles, por ejemplo. Ahora, así, puedes cambiar algún control específico que afecta a todos los controles, pero también 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. Ahora puedo cambiar solo los botones y bueno, puedes cambiar todas las propiedades. También puedes cambiar la fuente. Bueno, tienes control total, no solo sobre todos los controles como estilo predeterminado, sino también sobre cada control específico, ¿de acuerdo? Puedes arrastrar y soltar una fuente TTF y se carga
5. Gear Styler, Icons Editor y Layout Creator
El Gear Styler y el Icons Editor son dos herramientas útiles en RaiGui. El Icons Editor te permite editar los iconos predeterminados incluidos en RaiGui, con 256 espacios disponibles. La herramienta Layout Creator es particularmente interesante porque te permite crear diseños personalizados colocando controles y generando código C para el diseño. Puedes exportar el diseño como un archivo autocontenido para agregarlo a cualquier proyecto. Además de estas herramientas, hay un conjunto de herramientas creadas por el presentador, la mayoría de las cuales están publicadas y se pueden utilizar en línea de forma gratuita.
y todo. Eso es el Gear Styler, pero, oh sí, también tienes el Icons Editor. Es un editor de iconos simple. Así es, aquí puedes editar los iconos. Esos son los iconos que están incluidos por defecto en RaiGui. Hay 256 espacios para iconos en realidad. En este momento todavía hay algunos espacios sin llenar. 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í se puede incrementar a cualquier número. Sí, y eso es un editor de iconos que ves. Sí, y finalmente, probablemente la herramienta más útil y más interesante considerando que Reiki no tiene un sistema de diseño automático. El diseño debe ser creado por el usuario. Es una herramienta creadora de diseños. Por ejemplo, podemos colocar aquí controles En realidad, se puede editar Podemos colocar un cuadro de texto, por ejemplo, y hacerlo más grande. Puedes crear el diseño y en realidad 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. En realidad, eso es lo interesante cuando presionas exportar diseño actual. En realidad, genera código, genera automáticamente el código C para ese diseño. Puedes configurar si es código C, si contiene solo un archivo de encabezado, si quieres exportar anclajes, rectángulos, tienes varias opciones de configuración para exportar el código de la manera que deseas agregarlo a tu proyecto. Eso es el diseño en realidad. Con esa herramienta puedes crear diseños autocontenidos. Por ejemplo, navegador de archivos, importador, exportador, ventana. Puedes crear ventanas autocontenidas que se pueden exportar como un archivo autocontenido para agregarlo a cualquier proyecto. Eso es algo que hago con mis proyectos. Además de las herramientas de soporte de Reiki, también tenemos todas esas herramientas. En realidad, 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 durante los últimos cinco años, me he centrado en el desarrollo de herramientas utilizando mis tecnologías. Aquí, hay un conjunto de herramientas que he creado. La mayoría de ellas están publicadas y se pueden utilizar en línea de forma gratuita, y algunas son solo internas. Por ejemplo, esa es una herramienta para crear herramientas de manera visual, etc. Ese es un editor de texto que aún no se ha publicado. Algunas herramientas no están listas, pero no se han publicado, pero la mayoría de ellas
6. Herramientas y Capacidades de Reiki
Reiki ofrece una variedad de herramientas, incluyendo un editor de sonido, un lienzo para la manipulación de imágenes, un empaquetador de texturas, una herramienta de estereografía, un empaquetador de recursos y un creador de instaladores. Estas herramientas están disponibles en línea y se pueden descargar como aplicaciones independientes. Han sido utilizadas en producción durante aproximadamente cinco años, demostrando su eficacia en la web. Si tienes alguna pregunta, no dudes en hacerla.
están publicadas y en realidad se pueden utilizar 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. En realidad, esta herramienta es como un lienzo para ver imágenes, aplicar sombreadores, 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. Se ejecuta 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
video juegos, para empaquetar recursos, imágenes, texto, sombreadores, modelos, audios, para empacar herramientas en un paquete autocontenido, con diferentes compresiones, encriptaciones, para cada archivo. Y también tienes un creador de instaladores, y así sucesivamente. En realidad, el conjunto de herramientas disponibles, es bastante amplio. Y en realidad, demuestra que, bueno, esas tecnologías funcionan y funcionan en la web, y se han utilizado en producción durante aproximadamente cinco años. Y, sí, eso es todo. Ok. 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 hacerla. Muchas gracias. Y sí, eso es todo.
JSNation 2023
