Rana contra Escarabajo: Controla un Juego de Scratch con tu Cara
Usa tu nariz para controlar una rana hambrienta y atrapar la mayor cantidad posible de escarabajos antes de que se acabe el tiempo. Este divertido juego de Scratch utiliza la extensión de FaceMesh AI para conectar la posición de la rana con un punto preciso de tu rostro.
Dificultad
Principiante
Tiempo estimado
20–25 minutos
Extensión
FACEMESH
📖 Qué Aprenderás
- Cómo FaceMesh detecta puntos de referencia detallados en un rostro.
- Cómo leer la posición X e Y de la punta de la nariz.
- Cómo controlar un personaje de Scratch moviendo la cara.
- Cómo hacer que un sprite apunte hacia otro.
- Cómo crear un juego de atrapar objetos con límite de tiempo.
- Cómo usar variables para registrar el tiempo y la puntuación.
FaceMesh de Pishi.ai puede seguir 478 puntos de referencia faciales y devolver las coordenadas de cualquier punto dentro del escenario de Scratch. En este proyecto se utiliza el punto de referencia 1, que corresponde a la punta de la nariz, para controlar la rana.
🧰 Qué Necesitas
- Un ordenador con una cámara que funcione
- Chrome, Firefox, Edge u otro navegador moderno compatible con WebGL2
- Pishi.ai en Scratch (iniciar un nuevo proyecto)
- La extensión FaceMesh (ver la guía de ayuda)
- Un sprite de Rana
- Un sprite de Escarabajo
- Dos variables:
- score (puntuación)
- time (tiempo)
Usa buena iluminación y mantén tu cara visible para la cámara, así FaceMesh podrá rastrearla de forma confiable. La detección facial se ejecuta localmente en el navegador, y las imágenes de la cámara no se suben a ningún servidor.
🛠️ Construye tu Proyecto
1. Prepara el Juego
Añade los sprites de Rana y Escarabajo a tu proyecto.
Crea dos variables:
- score (puntuación)
- time (tiempo)
El juego durará 15 segundos. Durante ese tiempo, el jugador mueve la rana con su nariz e intenta atrapar al escarabajo.
Puedes elegir cualquier fondo que te guste. Un fondo de estanque, jardín o bosque funcionaría bien.
2. Controla la Rana con tu Nariz
Añade la extensión FaceMesh y permite que el navegador use tu cámara.
Al hacer clic en la bandera verde:
- Establece time en 0
- Sigue moviendo la rana hasta que el juego termine
- Establece la posición X de la rana en la posición X de la punta de la nariz
- Establece la posición Y de la rana en la posición Y de la punta de la nariz
- Haz que la rana apunte hacia el escarabajo
Usa el punto clave 1, que representa la punta de la nariz, y selecciona a la persona 1.
Ahora mueve tu cabeza frente a la cámara. La rana debería seguir tu nariz por el escenario mientras siempre mira hacia el escarabajo.
A diferencia de la detección facial simple, FaceMesh permite que el proyecto lea la posición de un punto de referencia individual a partir de una malla facial detallada. También puede seleccionar a una persona en particular cuando hay más de una cara visible.
3. Añade al Escarabajo y Suma Puntos
Programa el sprite de Escarabajo para que aparezca en posiciones aleatorias.
Al hacer clic en la bandera verde:
- Establece score en 0
- Mueve el escarabajo a una posición aleatoria
- Reinicia el temporizador integrado de Scratch
- Continúa hasta que el temporizador pase 15 segundos
- Haz que el escarabajo apunte hacia la rana
- Comprueba si el escarabajo está tocando a la rana
Cuando la rana atrapa al escarabajo:
- Aumenta la puntuación en 1
- Reproduce un sonido de croar
- Mueve al escarabajo a otra posición aleatoria, luego espera 0.1 segundos para evitar otra captura inmediata si aparece demasiado cerca de la rana.
Cada vez que la rana toca al escarabajo, este escapa a una nueva posición y el jugador gana un punto.
4. Anuncia el Final del Juego
Puedes usar el Escenario, el sprite de Pishi o un sprite anunciador independiente para los mensajes de inicio y final.
Al hacer clic en la bandera verde:
- Di "Start" durante un segundo
- Espera hasta que la variable time se vuelva FINISH
- Di "¡Se acabó el tiempo!"
- Reproduce un sonido de finalización
El script del Escarabajo cambia time a FINISH después de 15 segundos. Esto indica a los scripts de la Rana y del anunciador que el juego ha terminado.
🚀 ¡Prueba tu Proyecto!
Haz clic en la bandera verde y mira hacia la cámara.
Mueve tu cabeza para guiar a la rana:
- Mueve tu cabeza a la izquierda o derecha para moverte por el escenario.
- Mueve tu cabeza arriba o abajo para alcanzar al escarabajo.
- Atrapa tantos escarabajos como sea posible antes de que termine el cronómetro de 15 segundos.
🤖 ¿Cómo Funciona?
FaceMesh analiza la imagen de la cámara y encuentra puntos detallados en tu cara. El proyecto lee las coordenadas del punto de referencia 1, ubicado en la punta de la nariz.
Luego, la rana usa esas coordenadas como su propia posición en el Escenario de Scratch.
The FaceMesh coordinates are mapped to the Scratch Stage, approximately from −240 to 240 on the X-axis and −180 to 180 on the Y-axis.
When the camera preview is mirrored, the X coordinates are flipped to match the movement the player sees on screen.
Tu cara
↓
FaceMesh AI
↓
Punto de referencia de la nariz
↓
Coordenadas X e Y
↓
Movimiento de la rana
↓
Atrapar al escarabajo
💡 ¡Mejóralo!
- Abre la Boca para Atrapar al Escarabajo
En lugar de atrapar al escarabajo cada vez que toca a la rana, exige que el jugador también abra la boca.
Mide la distancia entre:- Punto clave 0, labio superior medio
- Punto clave 17, labio inferior medio
Cuenta el escarabajo solo cuando la distancia entre los labios sea mayor que el umbral elegido. Esto demuestra la capacidad de FaceMesh para medir la geometría facial, no solo seguir una cara.
- Parpadea para Activar el Poder de la Rana
Mide la distancia entre los puntos de referencia del párpado superior e inferior.
Por ejemplo:- Ojo derecho: puntos clave 159 y 145
- Ojo izquierdo: puntos clave 386 y 374
Cuando el jugador parpadea, haz que la rana se mueva más rápido o aumenta temporalmente el tamaño de su área de captura.
- Añade Más Insectos
Dale al sprite del Escarabajo varios disfraces, como:- Escarabajo
- Mariposa
- Mosca
- Mosquito
Cambia al siguiente disfraz después de cada captura. Puedes otorgar diferentes cantidades de puntos según el insecto.
- Añade Objetos que Evitar
Añade una abeja o araña que reste un punto cuando la rana la toque.
Esto hace el juego más desafiante porque el jugador debe mover su cara con cuidado en lugar de atrapar todo lo que se mueve.
