raygui es una interfaz de usuario inmediata muy ligera diseñada para el desarrollo de herramientas, combinada con raylib, permite la creación de pequeñas herramientas web Wasm de alto rendimiento. En esta charla analizaremos este caso de uso específico para el desarrollo de herramientas.
This talk has been presented at JS GameDev Summit 2023, check out the latest edition of this JavaScript Conference.
FAQ
RightGui es una biblioteca CUI de modo inmediato destinada al desarrollo de herramientas para la industria de los videojuegos. Facilita la creación de interfaces de usuario dinámicas que no almacenan información internamente, lo que permite un alto rendimiento y versatilidad al desarrollar aplicaciones web y otros programas.
RightGui utiliza código en C que se compila a través de mscript a WebAssembly, permitiendo así su ejecución eficiente en diferentes plataformas como Windows, Linux, MacOS, Android y Raspberry Pi, entre otras.
RightGui tiene una huella de memoria muy baja, requiriendo solo alrededor de 145 kilobytes de memoria RAM, incluyendo los estilos y propiedades que proporciona.
RightGui ofrece una variedad de controles como etiquetas, botones desplegables, casillas de verificación, cuadros de texto, selectores de color, deslizadores y barras de progreso, entre otros. Todos los controles son manejados mediante llamadas a funciones.
Sí, RightGui es completamente gratuito y de código abierto. Esto permite a los desarrolladores utilizar y modificar la biblioteca según sus necesidades sin coste alguno.
RightGui incluye herramientas como un editor de estilos, un editor de iconos y un creador de diseños. Estas herramientas ayudan a personalizar y configurar las aplicaciones desarrolladas con RightGui.
Bienvenido a la presentación de RightGui, una biblioteca de interfaz de usuario de modo C inmediata para el desarrollo de herramientas. RightGui es una biblioteca de alto rendimiento que no tiene estado y utiliza funciones pequeñas y autocontenidas para procesar entradas y dibujar controles. Proporciona una variedad de controles, estilos personalizables y herramientas de soporte para la configuración en vivo de estilos. Además, hay herramientas como el editor de iconos y el creador de diseños que permiten personalizaciones y generación de código. Reiki ofrece una variedad de herramientas, incluido un editor de sonido, un lienzo de manipulación de imágenes y un empaquetador de recursos.
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
Short description:
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
Short description:
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
Short description:
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
Short description:
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
Short description:
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.
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
Little.js is a super lightweight and fast JavaScript game engine that has everything included to start making games right away. It has a tiny footprint and no dependencies, making it perfect for size-coding competitions like JS13K. Little.js is built with an object-oriented structure and comes with several classes. It provides a fast rendering system, a comprehensive audio system, and various starter projects for different game types. Little.js is designed to be simple and easy to understand, allowing you to look at and modify the code.
The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.
The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.
The Talk discusses the use of the canvas element in games and web applications to improve performance. It compares the Canvas API and WebGL API, highlighting the advantages and disadvantages of each. The Canvas API allows for both CPU and GPU rendering, while WebGL API only uses GPU and hardware acceleration. Using the canvas element can significantly enhance performance, but it comes with increased complexity and development costs.
En esta masterclass, construiremos un juego utilizando el motor WebGL de PlayCanvas desde el principio hasta el final. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la escritura de scripts, la creación de UI y mucho más. Tabla de contenido:- Introducción- Introducción a PlayCanvas- Lo que vamos a construir- Agregando un modelo de personaje y animación- Haciendo que el personaje se mueva con scripts- 'Falsa' carrera- Agregando obstáculos- Detectando colisiones- Agregando un contador de puntuación- Fin del juego y reinicio- ¡Resumen!- Preguntas Nivel de la masterclassSe recomienda familiaridad con los motores de juegos y los aspectos del desarrollo de juegos, pero no es obligatorio.
En esta masterclass, construiremos un juego completo utilizando el motor PlayCanvas mientras aprendemos las mejores prácticas para la gestión de proyectos. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la gestión de activos, scripting, audio, depuración, y mucho más.
¿Cuántas veces has dicho o escuchado 'esta es lógica de negocio, no debería estar aquí'?En este masterclass, crearemos una aplicación frontend moderna utilizando patrones antiguos y aprenderás cómo construir aplicaciones que tengan una interfaz de usuario y servicios desacoplados.Comenzaremos con una aplicación React que tiene toda su lógica en la interfaz de usuario. Luego, paso a paso, extraeremos las reglas y operaciones para alcanzar ese punto óptimo de independencia.
En este masterclass, te presentaremos los conceptos básicos de la construcción de experiencias de Realidad Mixta con WebXR y Babylon.js. Aprenderás lo siguiente:- Cómo agregar objetos de malla 3D y botones a una escena- Cómo utilizar texturas procedurales- Cómo agregar acciones a objetos- Cómo aprovechar la experiencia predeterminada de Realidad Cruzada (XR)- Cómo agregar física a una escena Para el primer proyecto en este masterclass, crearás una experiencia interactiva de Realidad Mixta que mostrará estadísticas de jugadores de baloncesto a fanáticos y entrenadores. Para el segundo proyecto en este masterclass, crearás una aplicación WebXR activada por voz utilizando Babylon.js y Azure Speech-to-Text. Luego, desplegarás la aplicación web utilizando el alojamiento de sitios web estáticos proporcionado por Azure Blob Storage.
Sumérgete en el cautivador mundo del desarrollo de microjuegos con Frank Force en este interactivo masterclass de codificación en vivo. Diseñado tanto para desarrolladores experimentados como para curiosos principiantes, esta sesión explora los desafíos únicos y las alegrías de crear juegos y demos con restricciones extremas de tamaño.
Walt te mostrará 2 formas de crear rápidamente un servidor de juegos en Vultr: una con nuestra instalación de Minecraft con un solo clic en el Marketplace de Vultr, y otra a través de la Terminal después de implementar un servidor de Vultr.
JS GameDev Summit 2022
React Summit 2023
JSNation 2023
Comments