Seis juegos portátiles para el ESP32 y el XIAO ESP32-S3, jugables en tu navegador

Una pantalla ILI9341 de 2,4 pulgadas, un D-pad hecho con cuatro pulsadores y dos botones más para A y B: eso es una consola portátil, y un ESP32 es más que suficiente para moverla. Construimos cinco juegos para esa disposición y luego un sexto, Skythread, para una portátil más grande con un stick analógico, y metimos los seis en la galería de ejemplos de Velxio. Cada uno es un sketch de Arduino, y cada uno se ejecuta en tu navegador: pulsa Run y juega, sin placa, sin pantalla, sin soldaduras.

El primero, Doom, llegó antes y funciona en el ESP32 clásico. Los cuatro siguientes funcionan en el Seeed Studio XIAO ESP32-S3, la placa del tamaño de un pulgar de nuestro socio Seeed, y comparten un pequeño motor. El último, Skythread, funciona en el XIAO ESP32-S3 Sense, el mismo chip con 8 MB de PSRAM, que necesita para mantener todo un paisaje en memoria. Este artículo explica cómo se juega a cada uno y cómo funciona por dentro.

Cómo jugar en Velxio

1. Abre cualquier juego de la tabla de arriba. El sketch, las librerías y el circuito se cargan juntos.
2. Pulsa Run. Velxio compila el sketch y lo arranca. La primera compilación de un sketch tarda hasta un minuto; después sale de la caché de compilación.
3. Todos los juegos empiezan con una demo en modo attract que se juega sola. Pulsa cualquier tecla o botón para tomar el control.
4. Juega con el teclado: las teclas de flecha son el D-pad, Z es A y X es B. Cada botón del lienzo muestra su tecla en una pequeña tecla dibujada. También puedes hacer clic en los botones con el ratón y mantenerlo pulsado para que el botón siga presionado. Skythread tiene un stick analógico y más botones; sus controles están en su propia sección más abajo.
5. Abre el monitor Serial para ver el registro del juego: una línea STAT con los fotogramas por segundo y una línea EVT por cada baja, nivel, objeto recogido y muerte. Skythread imprime su propia línea cada dos segundos, con los fotogramas por segundo, el tiempo que tardó en dibujar y enviar cada fotograma, y la puntuación.

Cualquier pulsador de Velxio se puede controlar desde el teclado, no solo estos. Haz clic derecho en un botón y usa la tarjeta Keyboard control: haz clic en ella, pulsa una tecla y, a partir de entonces, mantener esa tecla pulsada presionará el botón mientras la simulación esté en marcha.

El simulador ejecuta el propio firmware, compilado para el chip real: Velxio emula el ESP32 y el ESP32-S3 instrucción a instrucción, en tu navegador, y dibuja lo que el sketch envíe al ILI9341.

La portátil

El XIAO solo tiene 11 pines GPIO, y una pantalla y seis botones necesitan doce. El truco es que la pantalla no necesita dos de sus líneas habituales: nunca se lee nada de ella, así que MISO queda sin conectar, y su pin de reset va atado a 3,3 V para que se reinicie con la placa. Eso deja exactamente los suficientes.

Cada botón conecta su pin a masa. El sketch activa las resistencias pull-up internas del chip con pinMode(pin, INPUT_PULLUP), así que un pin lee HIGH cuando el botón está suelto y LOW cuando está pulsado. No hacen falta resistencias, ni en el lienzo ni en una protoboard real. Doom usa la misma idea en el ESP32 DevKit más grande, con sus propios pines (están listados en su sección más abajo).

Por qué el XIAO ESP32-S3

Los cuatro juegos del XIAO dibujan la imagen completa en memoria primero y luego la envían a la pantalla de una vez. Una imagen de 320 x 240 a dos bytes por píxel son 153.600 bytes, y tiene que caber en un bloque continuo de RAM.

Ahí es donde difieren los dos chips. Imprimimos el bloque libre más grande desde un sketch en cada uno: 110.592 bytes en el ESP32 clásico y 278.528 bytes en el ESP32-S3. El S3 puede contener el fotograma completo con espacio de sobra; el ESP32 clásico no, y por eso Doom dibuja su imagen columna a columna (más sobre esto abajo).

El S3 también es el más rápido de los dos en el simulador. Con el mismo benchmark de framebuffer en ambas placas, el motor en el navegador de Velxio ejecutó el ESP32 a entre 81 y 90 millones de instrucciones por segundo y el ESP32-S3 a entre 96 y 106 millones, y el S3 alcanzó 33 fotogramas completos por segundo frente a los 31 del ESP32.

Un motor para cuatro juegos

Los cuatro sketches del XIAO empiezan con las mismas 200 líneas: el motor. Es el dueño del framebuffer, de los botones, de un puñado de funciones de dibujo y del bucle de fotogramas.

Dibujar en RAM significa que el orden no importa. Un juego puede pintar el cielo, luego las colinas, luego los aviones, luego las explosiones encima, y la pantalla solo ve la imagen terminada, así que nada parpadea. Enviarla son tres llamadas a la librería Adafruit ILI9341:

static void present() {
  tft.startWrite();
  tft.setAddrWindow(0, 0, SCR_W, SCR_H);  // the whole 320 x 240 screen
  tft.writePixels(fb, SCR_W * SCR_H);     // 153,600 bytes in one burst
  tft.endWrite();
}

A 40 MHz, esos 153.600 bytes tardan unos 31 ms en los cables SPI, así que solo la transferencia ya fija el techo cerca de 30 fotogramas por segundo. El resto del fotograma, la lógica del juego y el dibujo, tiene que caber en lo que queda, y por eso las funciones de dibujo son sencillas: rectángulos rellenos, líneas, círculos, texto con la fuente de 5 x 7 que viene con Adafruit GFX, y sprites.

Los sprites están escritos como texto, un carácter por píxel, con . para los píxeles transparentes y una paleta de 128 entradas para el resto. Este es el robot de Gear Hop:

"........a.......",
"....mmmmmmmm....",
"...mMMMMMMMMm...",
"...mMllMMllMm...",   // l = the eyes, light cyan
"...mMllMMllMm...",
"...mMMMMMMMMm...",
"....mmmrrmmm....",   // r = the red mouth

Nada en estos juegos viene de un archivo de imagen. Los tiles del mapa, las texturas y los efectos los dibuja el código en RAM cuando arranca la placa, así que cada sketch es texto plano que puedes leer y cambiar en el editor.

Sky Duel: un combate aéreo con modelo de vuelo

Pilotas un biplano sobre un mundo de cuatro pantallas de ancho que se repite: si sales por el borde derecho, vuelves a aparecer por el izquierdo. Un escuadrón rojo te persigue, cañones antiaéreos y camiones esperan en el suelo, y cada oleada trae un avión enemigo más.

Cómo se juega. Apunta el D-pad hacia donde quieras volar, diagonales incluidas; el avión gira hacia esa dirección. Mantén A para las ametralladoras y pulsa B para soltar una bomba (seis por oleada). Las bombas son la única forma de destruir los objetivos terrestres. El radar de la parte superior muestra el mundo entero, para que puedas encontrar los aviones que están fuera de pantalla.

Cómo funciona. El avión no se mueve a una velocidad fija. En cada fotograma el sketch ejecuta un pequeño modelo de vuelo:

La velocidad tiende hacia un valor de crucero, pero ascender cuesta velocidad y picar la gana, en proporción al ángulo. Si tiras hacia arriba demasiado tiempo, el avión cae por debajo de la velocidad de pérdida: el morro cae hacia el suelo por sí solo y tienes que picar para volver a volar. Los pilotos enemigos vuelan con el mismo modelo, con la misma pérdida, y eso es lo que lo convierte en un combate aéreo y no en un tiro al blanco.

El avión es un único sprite de 16 x 16 orientado a la derecha. Al arrancar, el sketch lo rota en 32 rumbos y los guarda todos, reflejando los que apuntan a la izquierda para que el avión no vuele boca abajo. Dibujar un avión es entonces una consulta a una tabla, escalada al doble en pantalla. Los enemigos se dirigen hacia un punto justo delante de ti, disparan cuando estás delante de sus cañones y se alejan tras un pasada cercana para no embestirte.

XIAO Quest: un pequeño RPG

Un héroe, una aldea, un bosque y una cueva. El anciano junto a la fuente te cuenta que el Rey de las Sombras se llevó el cristal de la aldea a la vieja cueva y te da la llave de la puerta que bloquea el paso. En el bosque y en la cueva, los monstruos te atacan y luchas contra ellos por turnos.

Cómo se juega. Camina con el D-pad. A habla con la gente, lee carteles, abre cofres y confirma; B muestra tus estadísticas y objetos. La fuente te cura, el mercader vende pociones por 10 de oro y tres cofres contienen dos pociones, una espada de hierro y un anillo de plata. En un combate, elige con el D-pad y confirma con A: atacar, lanzar fuego (3 PM, daño doble, ignora la defensa), beber una poción o huir.

Cómo funciona. El juego es una pequeña máquina de estados. Cada estado tiene su propio manejo de la entrada y su propio dibujado, y estos son los eventos que lo hacen pasar de uno a otro:

Los tres mapas son de 20 x 14 tiles de 16 píxeles, escritos en el sketch como cadenas, un carácter por tile: # es un árbol, ~ agua, = un camino, K la puerta cerrada. El héroe se mueve de tile en tile y se desliza entre tiles durante 0,16 segundos, así que el movimiento se siente fluido pero las colisiones siguen siendo simples: un paso está permitido o no lo está.

Los combates usan pequeñas fórmulas con números enteros. Un ataque hace tu ataque más una tirada de 0 a 3, menos la defensa del enemigo. La experiencia trae niveles, y cada nivel suma salud, magia, ataque y defensa. La cueva está oscura: tras dibujar el mapa, el sketch atenúa a la mitad el brillo de cada píxel entre 50 y 70 píxeles del héroe y a un cuarto todo lo que está más lejos, así que llevas un farol. Medir la distancia de cada píxel hacía bajar los fotogramas por segundo de unos 27 a 16. Calculándolo una vez por fila, como un tramo iluminado, un tramo tenue y un resto oscuro, vuelve a unos 22.

Gear Hop: un plataformas

Un pequeño robot recorre dos niveles recogiendo engranajes. Los escarabajos caminan por el suelo, los drones flotan en el aire, los pinchos bordean algunos suelos y los huecos más anchos solo se pueden cruzar en plataformas móviles. Llega a la bandera al final de cada nivel.

Cómo se juega. Camina con IZQUIERDA y DERECHA, mantén B para correr y pulsa A para saltar. Mantén A más tiempo para un salto más alto. Cae sobre un enemigo para pisarlo y salta hacia un bloque ? desde abajo para sacar un engranaje. Tienes tres corazones; los pinchos y los enemigos quitan uno, y caer a un pozo también.

Cómo funciona. Los niveles son de 128 x 14 tiles, generados por un pequeño script y pegados en el sketch como cadenas. El robot es una caja de 10 x 14 píxeles, y en cada fotograma se mueve en dos pasos: primero en horizontal, empujado hacia fuera de cualquier pared en la que acabe dentro; luego en vertical, aterrizando en el suelo, en una plataforma de un solo sentido o en una plataforma móvil, o chocando la cabeza contra un bloque. Hacer los dos ejes por separado es lo que evita que el robot se quede pegado a las paredes o se cuele por las esquinas.

Tres pequeñas reglas hacen que el salto se sienta bien. Un salto pulsado hasta 0,12 segundos antes de aterrizar se ejecuta igualmente cuando el robot toca el suelo (un buffer de salto). Un salto pulsado hasta 0,08 segundos después de salir de una cornisa también cuenta (tiempo coyote). Y soltar A antes de tiempo recorta la velocidad ascendente, que es como mantener el botón da un salto más alto. Dos capas de colinas se desplazan a un quinto y a menos de la mitad de la velocidad de la cámara, lo que da profundidad a la escena.

Circuit Defense: tower defense en una placa de circuito

Los bichos se arrastran por una placa de circuito hacia el chip. Construyes piezas electrónicas en la placa para detenerlos: un LED dispara un láser rápido contra un bicho, un condensador se descarga sobre todos los bichos que lo rodean y una bobina ralentiza a los bichos. Cada bicho que llega al chip le cuesta un punto de salud, y las oleadas no dejan de hacerse más fuertes.

Cómo se juega. Mueve el cursor con la cruceta. B elige la pieza, A la construye, y A sobre una pieza que ya has construido la mejora, hasta el nivel 3. Los bichos destruidos pagan monedas, y cada oleada superada paga una bonificación. El círculo alrededor del cursor muestra el alcance de la pieza que estás a punto de construir.

Cómo funciona. Los bichos no siguen un recorrido fijo. Caminan por la placa abierta, y puedes guiarlos con lo que construyes: la pista de cobre de la placa es siempre la ruta que tomarán. Detrás hay una búsqueda en anchura, que se ejecuta de nuevo después de cada construcción:

La búsqueda empieza en las celdas contiguas al chip, las numera con 0 y se propaga hacia fuera: cada vecino libre de una celda numerada recibe ese número más uno. Cuando termina, cada celda guarda su distancia al chip, incluidos los muros de torres. Un bicho que está sobre una celda simplemente avanza a cualquier vecino con un número menor. No hay planificación de ruta por bicho: una sola búsqueda, 260 celdas, sirve para todos ellos.

Esos mismos números hacen fácil de aplicar la única regla del juego: puedes alargar el camino, pero nunca cerrarlo. Cuando construyes, el sketch coloca la pieza, ejecuta la búsqueda de nuevo y mira la celda de entrada. Si ya no tiene número, los bichos no podrían pasar: la pieza se retira y el juego muestra THAT BLOCKS THE PATH.

ESP32 Doom: un shooter en primera persona

El más antiguo de los cinco se ejecuta en el clásico ESP32 DevKit. Recorres un laberinto de paredes texturizadas, disparas a robots que te persiguen y a slimes que escupen ácido, abres puertas, recoges botiquines y munición, y superas oleada tras oleada.

Cómo se juega. La cruceta camina y gira, A dispara (mantenlo pulsado para disparar automáticamente), B abre la puerta que tienes delante, y B mantenido con IZQUIERDA o DERECHA hace strafe. Los pines son distintos de los de los juegos del XIAO: ARRIBA en GPIO 32, ABAJO 33, IZQUIERDA 25, DERECHA 15, A en 22, B en 21, y la pantalla en el bus VSPI del ESP32 (SCK 18, MOSI 23, MISO 19, CS 5, D/C 2, RST 4).

Cómo funciona. Doom es un raycaster, la técnica de Wolfenstein 3D (1992): para cada columna de la pantalla lanza un rayo desde el jugador hacia un mapa de rejilla de 20 x 20 y lo detiene en la primera pared. La distancia determina la altura con la que se dibuja el fragmento de pared. Como el ESP32 clásico no tiene espacio para un fotograma completo, el sketch construye una columna cada vez en un búfer de 200 píxeles, con el suelo, el techo, la pared, los enemigos, el arma y los efectos ya compuestos, y la envía en una sola ráfaga:

Los robots caminan directamente hacia ti y arañan 5 de salud por segundo; los slimes mantienen la distancia y escupen ácido que cuesta 7. Un disparo alcanza al enemigo más cercano bajo la mira, siempre que no haya una pared más cerca. Cada enemigo eliminado trae la siguiente oleada con dos más, un poco más rápidos y un poco más duros.

Skythread: vuelo en 3D sobre un mundo generado

Doom es 3D en interiores. Skythread es 3D al aire libre: pilotas un planeador de ala delta a baja altura sobre campo abierto, a lo largo de valles fluviales, entre montañas y sobre lagos, con niebla hacia el horizonte y un cielo que pasa del día a la hora dorada y a la noche. Hay anillos suspendidos en el aire delante de ti y el reloj corre. Empiezas con 45 segundos y cada anillo añade unos cuantos más. Cada anillo seguido aumenta el combo, hasta cinco veces los puntos, y atravesar el centro de un anillo otorga un PERFECT. Si fallas un anillo, el combo vuelve a empezar; si tocas el suelo, rebotas en él, más lento y tres segundos más pobre. Como los demás, arranca con una demo que se pilota sola.

La consola portátil. Skythread se escribió para la consola portátil que ejecuta nuestros ports de Metal Gear Solid y Castlevania, no para la disposición de cruceta de los otros cuatro: un Seeed Studio XIAO ESP32-S3 Sense, la misma pantalla ILI9341, un stick analógico de dos ejes, dos botones en pines propios y seis más en un solo pin. En Velxio el ejemplo se abre con esa disposición de consola portátil: el stick a la izquierda, la pantalla en el centro, los botones a la derecha y bajo la pantalla.

Cómo se juega. Dirige con el stick: haz clic en él sobre el lienzo y usa las teclas de flecha, o mantén el ratón sobre una de sus flechas. Tira hacia atrás (abajo) para ascender, empuja hacia delante para picar, y a izquierda o derecha para inclinarte y girar. FIRE (Z) es un impulso que consume la barra azul y también inicia una partida. BRAKE (X) te frena para giros cerrados. START (Enter) inicia y pausa, CROSS (C) también inicia una partida, SELECT (Q) vuelve a la demo, CIRCLE (T) cambia la hora del día, TRIANGLE (W) genera un mundo nuevo y L1 (F) muestra los fotogramas por segundo.

Seis botones en un solo pin. El XIAO tiene 11 pines, y la pantalla, el stick y ocho botones necesitarían 16. El truco para seis de los botones es una escalera de resistencias. Una resistencia de 10 kΩ pone D2 a 3,3 V, y cada botón conecta D2 a masa a través de una resistencia distinta, de modo que cada uno forma un divisor de tensión diferente. El pin lee 3,3 V × R / (R + 10 kΩ):

El sketch lee D2 con analogReadMilliVolts() y elige el botón cuya tensión es la más cercana, con umbrales a medio camino entre vecinos (300, 824, 1350, 1960, 2496 y 2960 mV). Velxio resuelve la escalera como un circuito real: la última columna es lo que el sketch imprimió en el monitor serie cuando pulsamos cada botón en el lienzo. Una escalera lee un botón a la vez, ya que dos pulsados juntos parecen un único botón con una resistencia menor. Por eso el juego mantiene FIRE y BRAKE, los dos que se sostienen mientras se vuela, en pines propios. También ignora la escalera hasta haberla visto liberada una vez, de modo que un D2 sin conectar nunca pueda pulsar botones fantasma.

Cómo funciona. El mundo se genera cuando arranca la placa: un mapa de 512 x 512 del paisaje hecho con ruido diamond-square, donde cada celda ocupa dos bytes, uno para la altura y otro para un color de la paleta. Con una copia a media resolución para la distancia lejana y dos búferes de fotograma, eso son unos 940 KB, y por eso Skythread necesita el Sense y su PSRAM. En Velxio el mundo tarda 3 segundos de tiempo simulado en construirse, y el primer fotograma llega a la pantalla 3,4 segundos después del encendido.

El dibujo usa el ray casting por columnas de los juegos de vuelo voxel de principios de los noventa. Para cada columna de la pantalla, el sketch recorre un rayo desde la cámara sobre el mapa, de cerca a lejos, hasta 160 pasos y 340 celdas de distancia; a partir de 110 celdas lee el mapa a media resolución. En cada paso convierte la altura del terreno en esa posición en una fila de la pantalla. Si esa fila es más alta que cualquier cosa dibujada hasta ahora en la columna, rellena el hueco con el color de esa celda y recuerda el nuevo borde superior:

Ese borde superior recordado por columna se llama y-buffer. El suelo cercano siempre se dibuja primero, así que el suelo lejano solo puede mostrarse por encima de él, y ningún píxel se pinta dos veces. La niebla son 20 paletas, cada una mezclada un poco más hacia el color del cielo, una por banda de distancia. La inclinación lateral es un cizallamiento: el horizonte de cada columna sube o baja en proporción a su distancia desde el centro de la pantalla, lo que parece un alabeo. Los anillos, la sombra del planeador y el sol se comprueban contra el mismo y-buffer a su propia distancia, de modo que una montaña delante de un anillo lo oculta.

El fotograma se almacena columna a columna, ya en el orden de bytes que espera el ILI9341. En el direccionamiento vertical propio del panel, una columna de la imagen del paisaje es una de sus filas, así que todo el fotograma sale en una sola ráfaga. Con dos búferes de fotograma, los dos núcleos del chip trabajan al mismo tiempo: una tarea en el núcleo 0 envía un fotograma a la pantalla por SPI a 40 MHz mientras el núcleo 1 dibuja el siguiente.

El sketch también vigila su propia velocidad. Cuando dibujar un fotograma tarda más de 22 ms de media, lanza 160 rayos en lugar de 320 y dibuja cada columna con dos píxeles de ancho, y vuelve al ancho completo por debajo de 7 ms. Pasados 45 ms, un caso que sus comentarios reservan para un host lento como un simulador de navegador, deja de solapar los dos núcleos y espera a que cada fotograma termine de salir antes de dibujar el siguiente, de modo que el panel simulado siempre recibe fotogramas completos. En Velxio se ejecutó en ese modo todo el tiempo, a 160 columnas, dibujando cada fotograma en 33 a 50 ms de tiempo simulado.

Fotogramas por segundo

Medimos cada juego en velxio.dev en un navegador Chrome sin interfaz en nuestro servidor, jugando alrededor de un minuto cada uno.

Dos números por juego. El primero es lo que el propio juego reporta en el monitor serie, a partir del millis() del propio chip: la tasa de fotogramas de la placa simulada. El segundo es cuántos fotogramas mostró realmente el navegador por segundo de tiempo real. Difieren cuando el ordenador que ejecuta la simulación no puede mantener el chip simulado a plena velocidad; el tiempo simulado entonces avanza un poco más despacio que el reloj de pared. Tus propios números dependen de tu ordenador.

Los cuatro juegos 2D del XIAO funcionan a casi el doble de la tasa de fotogramas de Doom. Parte de ello es el trabajo: un raycaster lanza 320 rayos y calcula el suelo y el techo píxel a píxel. Parte es la transferencia: una ráfaga por fotograma en lugar de 320 pequeñas, cada una con su propia ventana de direcciones. Skythread, el único que dibuja un paisaje en 3D, se mantiene en unos 20 fotogramas por segundo lanzando 160 rayos en lugar de 320, el compromiso que hace su propio código siempre que dibujar un fotograma tarda más de 22 ms.

Hazlos tuyos

Cada juego es un sketch, y el código está organizado en bloques: el motor, el arte, el estado del juego, la actualización y el dibujo. Algunos cambios que llevan un minuto:

• Sky Duel: cambia la velocidad de crucero (125) o la velocidad de pérdida (50) en fly() y siente cómo cambia el avión.
• XIAO Quest: los mapas son las cadenas de MAP_V, MAP_F y MAP_C; los números de los monstruos están en la tabla FOES.
• Gear Hop: la fuerza del salto es -335 en movePlayer(), la gravedad es 950; prueba la luna.
• Circuit Defense: añade una cuarta pieza a TW_NAME, TW_COST y updateTowers().
• Doom: MAP_SRC son 20 cadenas de 20 dígitos; cada dígito es una textura de pared, y un 9 es una puerta.
• Skythread: WORLD_SEED al principio del sketch elige el mundo en el que arrancas, y PITCH_PULL_TO_CLIMB puesto a 0 hace que el stick suba cuando lo empujas hacia delante.

Pulsa Run después de una edición y Velxio compila el sketch modificado, así que puedes cambiar un número y ver el resultado unos segundos después. Cuando funcione como te gusta, el mismo sketch se ejecuta en un XIAO ESP32-S3 real con una ILI9341 y seis botones cableados como se indica arriba, y Skythread en un XIAO ESP32-S3 Sense con el stick y los botones de su sección.

Abre la galería de ejemplos