Hagamos un juego con el control de la sonrisa | Ivan Chafran | Enero de 2022
A veces participo en hackathons, donde puedo implementar cualquier idea loca. Hoy te contaré cómo hacer un prototipo de juego para móvil con controles inusuales en tan solo unas horas: un personaje responde a sonrisas y parpadeos.
Hace unos años, tuve la idea de crear un juego de este tipo durante un hackathon. El formato asume que tengo un día laborable para desarrollar, que son 8 horas. Elegí el SDK de Android para completar el prototipo a tiempo. Tal vez un motor de juego sea más adecuado, pero no sé que ninguno de ellos sea lo suficientemente bueno.
Otro juego me propuso el concepto de controlar las emociones: donde puedes configurar las acciones del personaje cambiando el volumen del sonido. Quizás alguien ya haya usado las emociones en el control del juego. Pero conozco pocos ejemplos de este tipo, así que elegí este formato.
¡Ten cuidado! ¡Este es un video rotundo!
Sólo necesitamos Estudio de Android En la computadora.Si tu no tienes Dispositivo Android real Para correr, puedes usar Emulador y Habilitar cámara web.
Crea un proyecto con ML Kit
Kit de aprendizaje automático Cuando usas IA en tu prototipo, ¡esta es una gran herramienta para impresionar al jurado del hackathon! También puede ayudarlo a integrar soluciones de aprendizaje automático en sus proyectos, como definir las funciones de los objetos en el marco, así como la traducción y el OCR.
ML Kit tiene una API sin conexión gratuita para reconocer sonrisas y ojos abiertos o cerrados, lo cual es muy adecuado para nosotros.
Anteriormente, teníamos que registrarnos en Firebase console antes de poder crear cualquier proyecto con ML Kit. Ahora podemos omitir este paso para implementar la funcionalidad sin conexión.
Eliminar innecesario
Tomamos la muestra oficial y eliminamos las cosas innecesarias para evitar escribir la lógica de procesamiento de la cámara desde cero.
1. Descarga Este ejemplo Y trata de ejecutarlo. Explore el modo de detección de rostros: parece una vista previa de un artículo.
Tenga en cuenta que el enlace apunta a una confirmación específica en el pasado. Este tutorial utiliza esta versión específica del ejemplo como base.Definitivamente puedes usar La última versión de la muestraPero debes igualar las diferencias y adaptar tus ideas a la nueva versión.
aparecer
Empecemos a editar AndroidManifest.xmlEliminaremos todas las etiquetas activas excepto la primera.Vamos a poner CameraXLivePreviewActivity En su lugar para que podamos empezar desde la cámara de forma inmediata.Solo dejamos la cara android:value Atributo para excluir recursos innecesarios del APK.
cámara
Ahorraremos tiempo y no borraremos archivos innecesarios, en cambio, nos centraremos en CameraXLivePreviewActivity Pantalla.
En la línea 117 configuraremos el modo de detección de rostros:
private String selectedModel = FACE_DETECTION;
En la línea 118 encenderemos la cámara frontal:
private int lensFacing = CameraSelector.LENS_FACING_FRONT;
Al final onCreate Método Ocultaremos la configuración en las líneas 198-199:
findViewById(R.id.settings_button).setVisibility(View.GONE); findViewById(R.id.control).setVisibility(View.GONE);
Podemos detenernos aquí. Pero si el renderizado FPS y la malla de rostros distraen visualmente, puede desactivarlos de las siguientes maneras:
dentro VisionProcessorBase.java Archivo, borramos las líneas 213-215 para ocultar FPS:
graphicOverlay.add(
new InferenceInfoGraphic(
graphicOverlay, currentLatencyMs, shouldShowFps ? framesPerSecond : null));
dentro FaceDetectorProcessor.java file, Eliminamos las líneas 75-78 para ocultar la malla de la cara:
for (Face face : faces) {
graphicOverlay.add(new FaceGraphic(graphicOverlay, face));
logExtrasForTesting(face);
}
Reconocimiento de emociones
La detección de sonrisas está desactivada de forma predeterminada, pero es fácil comenzar. ¡No es descabellado que nos basamos en un código de muestra! Asignamos los parámetros requeridos a una clase separada y declaramos la interfaz de escucha:
Lo haremos CameraXLivePreviewActivity class y subscribe reciben estados emocionales para permitir la clasificación emocional. Luego, convertimos la probabilidad a una bandera booleana. Para probar, agregaremos un TextView al diseño, en el que expresaremos emociones a través de emojis.
Divide y conquistaras
Estamos haciendo un juego, por lo que necesitamos un lugar para dibujar los elementos. Suponemos que se ejecuta en modo vertical en el teléfono. Dividamos la pantalla en dos partes: la cámara en la parte superior y el juego en la parte inferior.
Controlar a un personaje sonriente es una tarea abrumadora, y el hackathon casi no tiene tiempo para implementar mecánicas avanzadas. Por lo tanto, nuestro personaje recopilará cosas interesantes durante todo el camino, ya sea en la parte superior o inferior del campo de juego. Agregaremos la acción de cerrar o abrir los ojos como complejidad del juego: cerramos los ojos y capturamos algo genial, lo que significa duplicar la puntuación.
Si quieres lograr una jugabilidad diferente, te puedo sugerir algunas otras opciones:
- Guitar Hero / Dance Full-Simulation, necesitas expresar cierta emoción a la música;
- En una carrera para superar obstáculos, debes llegar a la meta en un momento determinado o no chocar;
- El tirador, el jugador parpadea y dispara al enemigo.
Mostraremos el juego en una vista personalizada de Android.dentro onDraw Método, dibujaremos los personajes. CanvasEn el primer prototipo, nos limitaremos a utilizar primitivas geométricas.
jugador
Nuestro personaje es un cuadrado. Lo cambiaremos de tamaño y lo colocaremos a la izquierda durante la inicialización, porque quedará fijo en la misma posición. La posición del eje Y dependerá de la sonrisa del jugador. Calcularemos todos los valores absolutos en relación con el tamaño del área de juego. Esto es más fácil que elegir un tamaño específico, y también obtendremos un buen aspecto en otros dispositivos.
pastel
Nuestro personaje «corre» e intenta agarrar la tarta para conseguir la mayor cantidad de puntos posible. Usamos técnicas estándar para hacer la transición a un sistema de referencia relativo al jugador: él se quedará quieto y el pastel volará hacia él. Si el cuadrado de la torta se cruza con el cuadrado del jugador, ganamos puntos. Si al menos un ojo del usuario está cerrado al mismo tiempo, contamos dos puntos. ¯ _ (ツ) _ / ¯
También habrá un solo pastel en nuestro universo. Cuando un personaje se lo coma, se moverá de la pantalla a una línea aleatoria con coordenadas aleatorias.
Haremos que la visualización de puntos sea muy sencilla. Mostraremos los números en el centro de la pantalla. Solo necesitamos considerar la altura del texto y sangrar la parte superior.
Veamos qué juegos hicimos:
¡Agregaremos algunos gráficos para que no nos avergüence mostrar el juego en una demostración de hackathon!
imagen
No sabemos cómo dibujar gráficos impresionantes. Afortunadamente, hay algunos sitios web que ofrecen recursos de juegos gratuitos.me gusta Este sitio, Aunque por razones que no conozco, no se puede usar directamente en este momento.
dibujos animados
Dibujamos en Canvas, lo que significa que debemos implementar la animación nosotros mismos. Si hay imágenes con animación, la programación es sencilla. Introdujimos una clase para objetos con imágenes alternas.
También necesita animar el fondo para obtener el efecto de movimiento. Tener una serie de marcos de fondo en la memoria es caro. Por lo tanto, haremos algo más complicado: dibujar una imagen con desfase de tiempo. Esquema de la idea:
Esta no es una obra maestra, pero se puede hacer un prototipo de la noche a la mañana.Puedes encontrar el código aquíSe ejecuta localmente sin pasos adicionales.
Finalmente, quiero agregar que ML Kit Face Detection también es útil para otros escenarios.
Por ejemplo, puede analizar a todos en el encuadre y asegurarse de que todos sonríen y abran los ojos para tomar una selfie perfecta con amigos. La detección de múltiples caras en una transmisión de video está disponible de inmediato, por lo que la tarea no es difícil.
El uso del reconocimiento de contorno facial del módulo de detección de rostros ayuda a reproducir las máscaras que ahora son populares en casi todas las aplicaciones de la cámara. Si añadimos interactividad a través de la definición de sonrisa y guiño, su uso será más interesante.
Esta característica, el reconocimiento del contorno facial, se puede utilizar no solo para entretenimiento. Aquellos que intenten recortar fotos de documentos por sí mismos adorarán esta función. Obtenemos contornos faciales y recortamos automáticamente una foto con la relación de aspecto requerida y la posición correcta de la cabeza. El sensor de giroscopio ayudará a determinar el ángulo de disparo correcto.
![Arquitectura nativa de React - [part one] | Por Salama Salem | febrero de 2022](https://sistemaandroid.info/wp-content/uploads/2022/02/Arquitectura-nativa-de-React-part-one-Por-Salama-390x220.png "Arquitectura nativa de React - [part one] | Por Salama Salem | febrero de 2022 12")
