Cosmic Trader: Un juego creado con Xojo Web

A continuación encontrarás traducido al castellano el artículo escrito por Ricardo Cruz y publicado originalmente en el Blog Oficial de Xojo.

Verdaderamente disfruto creando cosas con Xojo. En esta ocasión he creado un pequeño juego con Xojo Web, sólo para ver si era posible. En este artículo te hablaré sobre lo que me ha gustado y en qué áreas me he topado con dificultados a la hora de programarlo.

La razón para crear este tipo de proyectos, como mantenedor del framework Xojo Web, es encontrar los puntos de dificultad y también bugs en proyectos de gran tamaño, dado que los informes de problemas con los que suelo trabajar normalente son ejemplos de proyectos muy específicos para mostrar la existencia de un bug. La próxima release de Xojo, 2024r3, llegará con algunos de los problemas ya solucionados con los que me he topado a la hora de crear Cosmic Trader.

El Resultado Final

Empecemos por el final. Dale un tiento al juego y vuelve luego a este artículo. Se trata de un juego de comercio espacial muy simple, no esperes mucho de él… aunque espero que lo disfrutes.

Puedes jugar desde el siguiente URL: https://cosmictrader.rcruz.es

El Reto

Crear un juego simple con Xojo Web, sin tener que escribir una sola línea de JavaScript, o incluso sin usar el SDK Web.

De igual modo, si bien se podría haber realizado con un par de controles WebListBox y WebButton, realmente quería que este juego tuviese el aspecto y ofreciese las sensaciones de un juego real. Como puedes ver en las capturas de pantalla, y salvo que compruebes el código, nadie advertirá (¡o bien le importará!) si se trata de una aplicación normal creada con Xojo Web.

Como puedes imaginar, Xojo Web no fue creado con la idea de crear juegos basados en Web. Para que resultase más sencillo al desarrollador, todo se procesa del lado del servidor: cuando pulsas un botón, el navegador enviará una notificación al servidor, tu código escrito en Xojo se ejecutará y, finalmente, la respuesta se enviará de vuelta al navegador.

Eso es lo que ya sabemos; y también sabía que la latencia sería un problema, pero me encontré con más retos.

Lo que he disfrutado

La implementación del primer prototipo fue realmente fácil, utilizando para ello las herramientas que Xojo Web ofrece. Por ejemplo, en el prototipo, en vez de un popover personalizado para comprar y vender, he optado por usar simplemente algunos menús contextuales:

Puedes llegar muy lejos y prototipar tu idea rápidamente de esta forma. Esto me permitió desplegar y compartir el juego con unos cuantos amigos para obtener de esta forma algo de feedback inicial.

Una vez que tienes las mecánicas del juego, puedes iterar tanto como quieras hasta que el juego esté listo. La pantalla de bienvenida con el logo del juego no se añadió hasta el final. Sólo para que puedas comparar, así es como se ve la versión actual:

¡Mucho mejor! 😎

Realmente he disfrutado con la posibilidad de utilizar Contenedores a la hora de crear los controles personalizados y reutilizarlos. De igual forma, la capacidad de simplemente arrastrar algunas imágenes en el IDE y asignarlas a visores de imágenes es realmente satisfactorio.

Mediante la previsualización del IDE es realmente fácil identificar dónde se encuentra la entidad de la nave, hacer clic sobre ella y editar el código en caso necesario:

Navegar por el proyecto es una delicia si lo comparas con el hecho de tener que saltar entre montones de código en archivos de texto plano.

También he encontrado útil disponer de Control Sets, permitiéndome implementar el evento Pressed sólo una vez para todos los planetas, por ejemplo.

Algunas pegas… y como las gestioné

Dicho lo anterior, también me topé con algunas dificultades; todas ellas provocadas por la naturaleza de los proyectos web. Cuando viajas de un planeta a otro escucharás el sonido de un motor. Habría sido mucho (¡mucho!) más sencillo saber cuando debería de detener la reproducción del sonido en un proyecto Desktop o Mobile.

Tener que lidiar con la latencia implica que tuve que utilizar un temporizador y “adivinar” más o menos una cantidad razonable de milisegundos para detener el sonido. Si hubiese utilizado la misma cantidad de tiempo que el empleado en la animación habría provocado que el sonido aun siguiese sonando después de que la nave llegase a su destino, nuevamente debido a la latencia.

Donde pasé la mayor parte del tiempo fue optimizando las imágenes; especialmente enviando las imágenes. Cuando juegas al juego en local… todo funciona realmente rápido; pero me encontré con algunos problemas de parpadeo en el uso de los popover personalizados cuando desplegué el juego por primera vez:

Esto es algo sobre lo que no necesitas pensar con la clásica aplicación de bases de datos que generalmente creas utilizando Xojo Web; pero si creas una buena cantidad de imágenes al vuelo, significa que el navegador tendrá que descargarlas una y otra vez.

Para optimizarlo, en vez de utilizar la propiedad WebImageViewer.Image puedes almacenar las instancias WebImage. Al utilizar WebImageViewer.URL para que apunte a la propiedad WebImage.URL de dichas instancias permitirá que el navegador compruebe en primer lugar si ha descargado ese URL con anterioridad. De ser así, ¡bingo! la reutilizará sin tener que volver a descargar toda la imagen de nuevo.

Si vuelves al juego, la cache es el motivo tras el botón “New Game” en la pantalla de bienvenida, y el botón “Sell Everything” tiene el mismo ancho. No es una coincidencia, dado que se hace con vistas a un mejor aprovechamiento de la cache.

Por último, pero no por ello menos importante, cuando compartí el URL con algunos amigos estos me dijeron que no se veía bien en dispositivos móviles; de modo que tuve que cambiar ligeramente las estadísticas para que cupiesen mejor en la pantalla de los dispositivos móviles. Si bien en este caso no supuso un gran problema, en Xojo sabemos que la capacidad de crear aplicaciones Web adaptables (Responsive) debería de ser más sencillo, y mejoraremos el flujo de trabajo en futuras versiones de Xojo.

Habría resultado mucho más sencillo utilizar el SDK Web para alguno de estos controles. Si estuviese creando un juego en serio, habría preferido al 100% crear algunos controles personalizados para permitir la ejecución de algún código en el lado del navegador, utilizando para ello el SDK Web con JavaScript o TypeScript, evitando así los problemas asociados con la latencia.

Utilizar la IA con creatividad

Personalmente no me gusta utilizar la IA en la programación. Siempre he terminado frustrado sobre el modo en el que alucina y continúa proponiendo cosas que simplemente no existen con total confianza. Entiendo que a algunas personas les resulte interesante pero, en el fondo, me gusta programar.

Pero cuando se trata de contar con un segundo cerebro que me ayude con mi (falta de) creatividad… chico, esa es otra historia. La idea del juego se produjo tras una conversación con Claude AI. Inicialmente propuso decenas de características e ideas que me habrían requerido trabajar en dicho juego durante varios años (y contar con un equipo de otras 100 personas). Continué preguntando para simplificarlo hasta que sentí que se trataba de algo abarcable:

Tras implementar algunas mecánicas sentí que el juego no tenía sentido. Es decir, ¿por qué exactamente 30 turnos? ¿por qué 5 planetas? ¿Por qué no puedo ir a otras partes para comerciar? ¿Por qué tengo que comerciar?… si bien se trata de ficción, la IA escribió un argumento razonable que proporcionaba alguna base al juego. Eso será lo que estés leyendo cuando juegues a Cosmic Trader.

No quiero hacer spolers, pero aun hay unas cuantas características y mecánicas del juego recomendadas por la IA que he dejado para futuras revisiones.

Durante la creación de este juego tuve una pequeña invasión de hormigas en casa. La IA me propuso un juego multijugador del tipo simulador de colonia de hormigas que probablemente nunca implemente, pero… ¡quien sabe!

En cuanto al logo, tenía algo de dinero para utilizar en DreamStudio. Tuve que retocarlo utilizando Affinity Photo, y este es el resultado:

En definitiva, y si bien un equipo real de personas siempre será mucho mejor, he de reconocer que la IA me ayudó mucho con este experimento.

Créditos y Reconocimientos

Me pude centrar en la creación del juego gracias al uso de los materiales para el juego de Kenney. El autor de la música de fondo es Dmitrii Kolesnikov, asegúrate de echar un vistazo a su perfil.

Gracias a Claude por ser mi segundo cerebro en este proyecto; y, por supuesto, gracias a Xojo. No habría sido tan divertido sin él.

Conclusión

Disfruté un montón creando este proyecto, he aprendido cosas y he solucionado algunos fallos que me he encontrado por el camino. ¿Sabías que no puedes añadir una transición WebStyle CSS sin añadir otros estilos? Yo tampoco, pero será solucionado para la release 2024r3.

¡Feliz programación!