Por si no se han enterado, Astrocade.com es una plataforma donde pueden crear juegos via Vibe Coding. Si quieren saber un poco más les dejo mi post donde explico más a detalle: ¡DETENGAN LAS PRENSAS!... La plataforma que lo cambia todo: Astrocade.com pone el poder de la IA en manos de los gamers.
Ahora sí, al tutorial.
Primero hay que saber diferenciar lo que es el juego en sí de lo que es la UI. El área de juego es donde sucede toda la acción, aparecen los personajes, animaciones, etc. Mientras que la UI son los indicadores de stats, récords, etc.
Este 'truco' es casi 100% infalible con la UI... pero ojo, sólo puede hacerse en PC. Este tutorial está basado en Firefox, pero en Brave y Chrome es muy similar todo el proceso.
- Presiona F12 en tu navegador para abrir la ventana de Inspector de elementos, la cual aparecerá a la derecha.
Fíjate muy bien en que estén visibles Inspector y Reglas.
Selecciona la Flecha para elegir elemento de la página.
Ahora al moverte por la el sitio, los elementos se van a ver así.
La idea es seleccionar el elemento del juego que quieras modificar, en mi caso esta barra de arriba:
Ahí ya se ve claramente que esa barra se identifica en la UI como #hudBar. Con eso ya podemos darle a Astra un prompt como: Make the #hudBar blue (funciona en español también pero es más certero en inglés).
Sin embargo podemos ir mucho más allá. A la derecha en el panel del inspector, podemos ver todos los detalles de #hudBar, posición, tamaño, color de fondo, color del borde, etc.
Algunos de esos estilos son menos 'entendibles', así que para efectos de este tutorial nos centraremos en los más básicos.
Por ejemplo, vamos a despalomear las opiones de background, border-bottom y box-shadow, para ver como queda.
A mi sinceramente me gusta más. Así que procedo a decirle a Astra: Remove background, border-bottom and box-shadow on #hudBar
De esta manera Astra sabe exactamente lo que quieres hacer y el % de fallo es realmente muy mínimo.
Si quieren probar este juego en el que estoy trabajando actualmente pueden probarlo aqui: Match 3+Z(ombies); solo consideren que está en construcción así que podría estar comportándose de manera errática cuando lo intenten jugar. Igual me vendría muy bien su retroalimentación.
¡Gracias por leer, espero que les sirva y también espero ver sus creaciones pronto!
🌌 ¡Únete a la comunidad de Astrocade!
Si quieres saber más sobre Astrocade, compartir tus creaciones o recibir ayuda de otros creadores de juegos y jugadores, únete a la comunidad oficial en Discord. Es el mejor lugar para mantenerte al día, intercambiar ideas y ser parte del futuro del gaming con IA.
👉 Únete al Discord de ASTROCADE
I will show you how to talk more clearly with Astra (Astrocade AI)
Just in case you haven’t heard, Astrocade.com is a platform where you can create games through Vibe Coding.
If you want to learn more, check out my post where I explain it in detail (sorry, no English version):
¡DETENGAN LAS PRENSAS!... La plataforma que lo cambia todo: Astrocade.com pone el poder de la IA en manos de los gamers.
Now then, let’s get to the tutorial.
First, you need to know how to differentiate between the game itself and the UI. The game area is where all the action happens — characters appear, animations play, etc. Meanwhile, the UI (user interface) shows stats, records, and other indicators.
This “trick” is almost 100% foolproof with the UI... but it can only be done on PC.
This tutorial is based on Firefox, but the process is very similar in Brave and Chrome.
- Press F12 in your browser to open the Element Inspector window, which will appear on the right.
Make sure that both Inspector and Rules are visible.
Select the Arrow icon to pick an element from the page.
Now, as you move over the site, the elements will highlight like this.
The goal is to select the game element you want to modify — in my case, this top bar:
You can clearly see that this bar is identified in the UI as #hudBar.
With that, you can give Astra a prompt like:
Make the #hudBar blue
However, we can go even further. On the right side of the inspector panel, you can see all the details for #hudBar: position, size, background color, border color, etc.
Some of these styles are less “readable,” so for the sake of this tutorial, we’ll focus on the simpler ones.
For example, let’s uncheck the options for background, border-bottom, and box-shadow to see how it looks.
Personally, I like it better this way. So I tell Astra:
Remove background, border-bottom and box-shadow on #hudBar
This way Astra knows exactly what you want to do, and the failure rate is really minimal.
If you want to try out the game I’m currently working on, you can play it here:
👉 Match 3+Z(ombies)
Just keep in mind it’s still under construction, so it might behave a bit erratically when you try to play.
Your feedback would be super helpful!
Thanks for reading — I hope this helps, and I can’t wait to see your creations soon!
🌌 Join the Astrocade Community!
If you want to learn more about Astrocade, share your creations, or get help from other game makers and players, join the official Discord community. It's the best place to stay updated, exchange ideas, and be part of the future of AI gaming.
👉 Join the ASTROCADE Discord
🍯 My Games and apps:
🐝 My games on Astrocade 🐝 Motitta's House 🐝 in.Zana sound designer
🍯 Social Media:
🐝 Instagram 🐝 Threads 🐝 TikTok 🐝 YouTube 🐝 X/Twitter
🍯 My Art:
🐝 Merch with my art 🐝 Objkt collections 🐝 Zero One 🐝 AkaSwap 🐝 Zora
Image sources:
- Screenshots from astrocade.com.
- ChatGPT.