Crea un juego interactivo usando IA

En esta actividad, aprenderá a programar un juego interactivo que responde a gestos con las manos y aplicará ese conocimiento para desarrollar su propio juego interactivo. Luego, participará en un desafío de diseño para crear elementos de juego únicos, explorar el potencial de la IA en los juegos y obtener una comprensión más profunda de cómo funciona la IA. ¡Prepárate para descubrir las increíbles posibilidades de la IA!

La detección de manos es el proceso que utiliza una computadora para identificar una mano a partir de una imagen. Es importante en varios campos, como la robótica, la visión por computadora y la interacción humano-computadora. Se necesitan modelos precisos de detección de manos para permitir que las máquinas interactúen con los humanos de manera efectiva. Con la llegada de los métodos basados ​​en el aprendizaje, los modelos de detección de manos se han vuelto más robustos y precisos, lo que los hace adecuados para aplicaciones de la vida real.

Por ejemplo, los modelos de detección de manos se pueden usar para sistemas de reconocimiento de gestos como SignAll, que usa la visión por computadora para reconocer y traducir el lenguaje de señas estadounidense a texto o voz. Sus modelos de aprendizaje automático están capacitados para reconocer diferentes gestos del lenguaje de señas, lo que puede ayudar a las personas sordas o con dificultades auditivas a comunicarse con otras personas que no conocen el lenguaje de señas.

La tecnología central de SignAll utiliza información visual, como imágenes y videos, y convierte esa información en datos que pueden ser procesados ​​por la computadora.

El lenguaje de señas es un lenguaje expresivo y visual, por lo que puede ser difícil de interpretar para la tecnología tradicional. Con SignAll, la cámara de un teléfono o computadora se usa para capturar, analizar y traducir los elementos centrales del lenguaje de señas.

Todos estos elementos son catalogados e interpretados por el software informático, permitiéndole comprender la lengua de signos del usuario. A medida que la aplicación recopila esta información visual, la compara con una base de datos de miles de posibles gestos del lenguaje de señas. Utiliza el aprendizaje automático para reducir las posibilidades y predecir las opciones más probables. La aplicación presenta esas opciones al usuario y selecciona la opción que coincide con lo que estaba tratando de decir.

El aprendizaje automático puede ser una herramienta poderosa para abordar los desafíos de comunicación para las personas sordas y con problemas de audición. Las personas sordas o con dificultades auditivas a menudo experimentan barreras de comunicación cuando firman con miembros de la comunidad oyente. La IA puede ayudar a superar estas barreras mediante el desarrollo de soluciones tecnológicas que permitan a las personas sordas y con problemas de audición comunicarse con otras de manera espontánea y efectiva, en cualquier momento y en cualquier lugar.

Ahora que sabe cómo funciona SignAll, piense en estas preguntas:

Si pudieras llevar esta tecnología un paso más allá, ¿cómo sería? ¡Vamos a averiguar!

En esta actividad, tomará las ideas detrás de la aplicación SignAll y las simplificará para crear un juego interactivo que reconozca los movimientos de las manos y reaccione ante ellos. Moverá su mano alrededor de la pantalla mientras intenta tocar objetos que aparecen al azar. La cámara de su computadora observará dónde se mueve su mano y su inteligencia artificial rastreará y comprenderá su movimiento.

Es posible que desee trabajar con un socio o un grupo en este proyecto para que tenga amigos que lo ayuden a intercambiar ideas, ofrecer comentarios y depurar su código. No necesita ningún conocimiento previo de inteligencia artificial o aprendizaje automático para realizar esta actividad.

Para este proyecto, utilizará el software PoseBlocks de MIT. Este kit de herramientas gratuito utiliza bloques de arrastrar y soltar para crear código, muy parecido al popular lenguaje de codificación Scratch. La diferencia entre ellos es que PoseBlocks tiene bloques especiales para usar inteligencia artificial de seguimiento corporal incorporada.

Para crear su código, hará clic en el sprite de la cortadora y arrastrará los bloques al espacio de trabajo. El espacio de trabajo PoseBlock tiene varias secciones. (Si está familiarizado con Scratch, esto le parecerá muy familiar).

El área de la izquierda tiene tres pestañas denominadas "Código", "Disfraces" y "Sonidos", cada una de las cuales incluye una biblioteca de elementos que puede usar. Todos los bloques de código están en la biblioteca de códigos, donde están agrupados por función y codificados por colores. La biblioteca de disfraces te permite agregar, cambiar o dibujar sprites. "Sprite" es el nombre de un objeto o personaje en PoseBlock. A cada sprite se le puede dar un código para hacer algo en su programa. Cuando un sprite tiene múltiples formas, las llamamos disfraces. Por ejemplo, el elemento sprite tiene nueve disfraces. Haga clic en la pestaña "Disfraces" para verlos. (Puedes usar cualquier sprite que quieras. Incluso puedes dibujar el tuyo propio).

La biblioteca de sonidos le permite agregar o grabar sonidos. El área de código en el medio es donde arrastrarás tus bloques de código y los juntarás para hacer tu juego. En la parte superior derecha está el escenario. Aquí es donde puedes ver el sprite realizar las acciones que codificas. La bandera verde inicia el juego. La señal roja lo detiene. Debajo de eso está el panel de Sprite. Este panel es donde puede seleccionar sprites para codificar y ajustar algunas configuraciones para sprites. También puede seleccionar un Fondo personalizado. En la parte superior está la barra de herramientas. Ahí es donde puede cargar código de muestra y darle un nombre a su proyecto. También tenga en cuenta que puede hacer clic en el "Globo" 🌐 para ajustar el idioma utilizado. Hay más de 70 disponibles.

Para que pueda comenzar rápidamente con este proyecto, se ha creado un directorio especial de ejemplos. En el directorio, encontrarás tres archivos: Game, Tutorial y Game Graphics.

El código completo, listo para jugar, se encuentra en el archivo "Juego". Para usarlo, descargue el archivo a su computadora. Luego, en PoseBlocks, seleccione "Archivo" en la barra de herramientas y elija "Cargar desde su computadora". Si lo desea, puede comenzar inmediatamente a mezclar el código del juego y personalizar su juego. Vaya a la "Actividad 3: Personalice su juego interactivo" para obtener algunas ideas e inspiración. Si desea obtener información sobre la codificación que hace que este juego funcione, continúe con la "Actividad 2: Cree y programe su juego" para construir el juego, paso a paso.

Antes de continuar, hay algunos otros elementos en el directorio que pueden interesarle. El archivo "Tutorial" tiene todos los bloques de código individuales que se usan en el juego. Puede descargar este archivo a su computadora y cargarlo en Poseblocks tal como lo hizo con el archivo del juego. Si prefiere no tener que buscar cada bloque mientras codifica, esto le ayudará. Puede hacer que el proceso de programación sea más rápido y fácil, al mismo tiempo que le brinda la oportunidad de seguir los pasos. (Sugerencia: maestros, también hay disponibles versiones PNG de los bloques de código. Son excelentes si está enseñando en una pizarra inteligente o desea agregarlos a una presentación).

Finalmente, el archivo llamado "Gráficos del juego" contiene los sprites usados ​​en el juego como archivos PNG para que puedas editarlos, cargar solo los que te gustan o usarlos de otras formas creativas. También puede descargar este archivo, que cargará todos los sprites en PoseBlocks a la vez.

Comenzará codificando el sprite "rebanador". Haga clic en el icono del gato azul en la parte inferior del panel de Sprite, luego elija la opción "pintar". En la ventana Vestuario que se abre, haz un punto amarillo (o la forma que quieras). Llámalo "rebanador". Puedes deshacerte de otros sprites haciendo clic en la "x" en el panel de sprites. Este punto se moverá con el dedo para que pueda seguir su progreso en la pantalla.

Para este juego, usará una característica especial llamadabolígrafo , que permite que el sprite dibuje formas en la pantalla. Para decirle al bolígrafo qué hacer, necesitas algunos bloques de código. Encuentra el bloque "cuando se hizo clic en la bandera verde". Esto le indicará al juego que comience. Arrástrelo desde la biblioteca de códigos al área de códigos. A continuación, desea establecer el tamaño del bolígrafo en 11, hacer que el color sea blanco y activarlo. Busque los bloques "establecer tamaño de lápiz", "establecer color de lápiz" y "bolígrafo hacia abajo" en la biblioteca de código y arrástrelos también al área de código. Finalmente, agregue el "tamaño del conjunto". Establezca el tamaño del objeto al 10 por ciento y muéstrelo usando el bloque "mostrar". Esto también lo ayudará a rastrear el movimiento de su dedo en la pantalla. Recuerda que puedes cambiar cualquiera de los ajustes si lo deseas. Si prefieres una línea de bolígrafo morada, ¡adelante!

El siguiente paso es crear un bucle infinito y poner una condición dentro de él que verifique el valor de la variable de "corte". Cuando la punta de tu dedo "toca" uno de los elementos aleatorios en la pantalla, el sprite de la cortadora lo "corta", haciéndolo desaparecer. La variable de corte no solo gira el sprite 15 grados cuando se cruza con un objeto, sino que también cambia la figura del sprite mismo. Esta característica agrega un elemento visualmente atractivo a la experiencia de juego, mejorando la estética del juego.

Dado que esta es una acción que desea que suceda una y otra vez, necesita un bloque especial. Un bucle es una instrucción para la computadora que se repite, en este caso para siempre. Arrastre el bloque "para siempre" en el área del código y agréguelo a los bloques de su código. Cualquier cosa dentro de ese ciclo continuará ocurriendo mientras el juego se esté ejecutando.

Una variable es un valor que puede cambiar según la información que reciba. Para crear una variable, haga clic en la sección "Variables" de la biblioteca de códigos y seleccione "Crear una variable". Haz una variable llamada "cortar". En este caso, si la variable corte es igual a 1, entonces la pluma girará 15 grados, como parte del movimiento del juego, y reacción visual del corte, esto cuando nuestros dedos toquen cualquiera de los elementos de la pantalla. , para hacerlos desaparecer. Agregue un bloque "Si-entonces" con una condición que use un bloque de operador para verificar el valor de la variable de corte.

¡Es hora de activar la IA! Agregue el bloque "ir a" al final de su código y seleccione "dedo índice" y "punta". Su código detectará la ubicación de su mano, específicamente la punta de su dedo índice.

A continuación, tiene una condición que toma el valor absoluto de una operación. La operación rastrea las coordenadas de la punta de su dedo en la pantalla. El valor "X" representa la posición horizontal de su dedo. En esta operación, calculará la diferencia entre la "posición x" actual y la posición X anterior "último mouse x" y se asegurará de que la diferencia sea un número positivo (abs). Si la diferencia es mayor que 2, significa que el objeto se ha movido mucho de su posición original. La computadora puede hacer este cálculo muy, muy rápidamente. Use el bloque "if-then-else" para ayudar a la computadora a tomar esta decisión. Tenga en cuenta también que deberá crear la variable "último ratón x".

Si su mano se mueve rápido, la variable "corte" se establece en 1, lo que hará que el lápiz gire 15 grados, de modo que la línea se dibuje visiblemente. Si la diferencia entre las posiciones pasadas y presentes del lápiz es pequeña, entonces "corte" se establece en 0. Dado que no se está moviendo, el lápiz no necesita girar y todas sus marcas se borran. A los efectos del juego, cuando no esté moviendo el dedo, la computadora supondrá que ha tocado

El último paso es configurar la última variable x del mouse para que coincida con las coordenadas X de la posición actual de su dedo. Luego, el proceso se repite y comienza de nuevo.

Después de completar estos pasos, todos los bloques deberían verse así.

Ahora abordará la segunda parte del código de segmentación. El objetivo aquí es crear un clon o una copia del sprite original. El trabajo del clon es hacer algo genial justo después de que realizamos una acción de corte en el juego, cuando la punta de tu dedo toca un objeto y lo hace desaparecer. El sprite de la cortadora mostrará una animación parpadeante, agregando diversión y más interacción al juego.

Para definir un clon, primero establezca el tamaño del objeto al 100 por ciento y muéstrelo.

Luego crea un bucle que se repetirá 10 veces. Configure su código para rotar 15 grados, cambiar el tamaño en 1 y agregar un efecto de color y un efecto de desvanecimiento. Cambie la posición en Y a -2. Esto creará un efecto de parpadeo colorido cuando nuestro dedo toque uno de los elementos gráficos del juego. Finalmente, agregue "eliminar el clon" cuando termine la animación. ¡Juega con la configuración para crear el tipo de animación intermitente que te gusta!

Ahora, codificarás los sprites de "elementos". Estas imágenes aparecerán aleatoriamente y se moverán por la pantalla del juego. Deberá "tocarlos" con la punta del dedo, lo que activará la animación de corte que realizó en el primer paso.

Una vez más, debe agregar un nuevo sprite, tal como lo hizo antes. Se llamará "elementos". Sin embargo, esta vez, desea que aparezcan varios objetos diferentes. Utilice los gráficos del juego proporcionados (consulte "Actividad 1: Conozca la plataforma PoseBlock"), dibuje los suyos propios o seleccione sprites de la biblioteca. Haga clic en la pestaña Disfraces para verlos. Lo más importante es que cada objeto debe ser un disfraz bajo el mismo sprite de "elementos", como se muestra.

Haga clic en el sprite de elementos para agregar un bloque al espacio de trabajo de Código. Al iniciar el juego (haciendo clic en la bandera verde), oculta el objeto y crea un bucle para siempre. Dentro del ciclo, cree un clon de "mí mismo" haciendo clic en la flecha hacia abajo. Luego agregue el bloque de espera y configúrelo durante uno o dos segundos. Esto generará un sprite en un momento aleatorio entre uno y dos segundos, por lo que no puedes adivinar cuándo aparecerá. Esto continuará mientras el juego se esté ejecutando.

Una vez que se crea el clon, queremos seleccionar un disfraz de sprite de elemento aleatorio. Use el bloque "Cuando empiezo como clon" para comenzar el código. Luego agregue un bloque oculto y un bucle de repetición. Agregue el bloque "próximo disfraz" al bucle y pídale que elija al azar un número del 1 al 10 usando un bloque de operador. Esto aleatorizará qué elementos del disfraz de sprite aparecerán.

Ahora necesitamos darle a nuestros elementos algo que hacer en la pantalla. Agregue una variable y configúrela para "ir a la derecha". Use el mismo código aleatorio para establecer la variable en un valor aleatorio entre 1 y 0. Según el valor, el sprite de los elementos se moverá hacia la derecha o hacia la izquierda en la pantalla.

Con la ayuda de la variable "velocidad X", un valor positivo hace que se mueva en una dirección (derecha), mientras que un valor negativo la hace moverse en la dirección opuesta (izquierda). El valor de la velocidad determina la velocidad del objeto. Esencialmente, la variable de velocidad nos permite controlar cómo se mueve el objeto dentro del juego. Intente cambiar los valores para ver cómo afecta el movimiento de los elementos.

También necesita que el elemento aparezca en la pantalla. Use el bloque "mostrar" para hacer esto. Establezca la variable de velocidad (velocidad) en 20 en la dirección Y, que controla el movimiento hacia arriba y hacia abajo, creando una variable de "velocidad Y".

Ahora necesita codificar lo que sucede con el elemento sprite cuando se encuentra con la cortadora. Dentro de un ciclo infinito, cambie la variable de velocidad Y por -1. Cambie la posición de Y por la variable "Velocidad Y" y haga lo mismo con la posición en X. Esto hará que el sprite del elemento aparezca aleatoriamente desde la parte inferior del escenario y luego vuelva a caer. Luego, cree una condición que verifique si el sprite del elemento toca el borde del escenario. Si es así, elimine ese clon.

A continuación, cree una condición para que cuando toque el elemento sprite con el dedo (el bolígrafo de color blanco del cortador de pesar), se haga un clon del cortador. Esto aparcará la animación que codificamos previamente. Finalmente, agregue un bucle de repetición y establezca el bloque "cambiar el tamaño" en -10. Esto hará que el sprite del elemento se encoja hasta que sea muy pequeño.

Después de completar estos pasos, todos los bloques deberían verse así.

Este es un buen momento para guardar tu juego. Desafortunadamente, PoseBlocks no tiene una forma de guardar y compartir su programa en línea entre sesiones. En su lugar, deberá guardar el archivo. En la barra de herramientas, ingresa el nombre de tu juego en el cuadro blanco. Luego haga clic en "Archivo" y seleccione "Guardar en su computadora". Para trabajar en el juego en otro momento, simplemente cargue el archivo del juego en PoseBlock de la misma manera que lo hizo para cargar otros archivos como se describe en la Actividad 1. Asegúrese de guardar después de cada sesión. ¡Puedes enviar tus archivos de juego a cualquier persona, para que ellos también puedan jugar!

¿Listo? ¡Ahora es el momento de probar tu juego!

Ahora que has visto el juego básico, piensa en formas de adaptarlo. Puede cambiar los sprites, jugar cambiando los bloques de tiempo y movimiento, ajustar la animación del sprite de la cortadora o incluso agregar sonidos. Puedes cambiar bloques y probar cosas nuevas. Si algo sale mal, ¡siempre puedes deshacerlo!

Cuando esté listo para crear su propio juego, hágase estas preguntas.

Una vez que haya creado su juego, asígnele un nombre y guarde su trabajo. Haz que otros prueben tu juego y obtén comentarios. Juega los juegos que otros hicieron. Discuta los desafíos que enfrentó y cómo los superó.

¿Disfrutaste usando PoseBlocks para hacer un juego interactivo? ¡La diversión no tiene que parar ahí!

CréditosLección y complementos de Camila Luna y Diego Luna. Edición de Lois Parshley. Producción digital de Sandy Roberts.

Camila y Diego son los miembros fundadores de MoonMakers, una comunidad de creadores apasionados por el conocimiento. Albergan un Makerspace, un espacio abierto con diferentes máquinas de fabricación digital, y un canal de YouTube donde promueven la ciencia, la tecnología y el movimiento maker. Han colaborado para crear contenido educativo con empresas como Sesame Stree y Make: Community en Estados Unidos y Educational Television y Fundación Televisa en México. Camila también imparte talleres en toda la República Mexicana con Talent Land, la Secretaría de Educación en Jalisco, Conacyt, Centro Cultural España.

Conviértase en un ingeniero de chatbot a medida que diseña, crea y adapta su propio chatbot único en su tipo utilizando inteligencia artificial.

Aprenda sobre inteligencia artificial (IA) experimentando directamente con chatbots y tecnología de aprendizaje automático.