Créer un jeu interactif à l'aide de l'IA

Dans cette activité, vous apprendrez à programmer un jeu interactif qui répond aux gestes de la main et appliquerez ces connaissances pour développer votre propre jeu interactif. Ensuite, vous participerez à un défi de conception pour créer des éléments de jeu uniques, explorer le potentiel de l'IA dans les jeux et acquérir une compréhension plus approfondie du fonctionnement de l'IA. Préparez-vous à découvrir les incroyables possibilités de l'IA !

La détection des mains est le processus utilisé par un ordinateur pour identifier une main à partir d'une image. C'est important dans divers domaines, comme la robotique, la vision par ordinateur et l'interaction homme-machine. Des modèles précis de détection des mains sont nécessaires pour permettre aux machines d'interagir efficacement avec les humains. Avec l'avènement des méthodes basées sur l'apprentissage, les modèles de détection des mains sont devenus plus robustes et précis, ce qui les rend adaptés aux applications réelles.

Par exemple, les modèles de détection des mains peuvent être utilisés pour les systèmes de reconnaissance gestuelle comme SignAll, qui utilise la vision par ordinateur pour reconnaître et traduire la langue des signes américaine en texte ou en parole. Ses modèles d'apprentissage automatique sont formés pour reconnaître différents gestes de la langue des signes, ce qui peut aider les personnes sourdes ou malentendantes à communiquer avec d'autres personnes qui ne connaissent pas la langue des signes.

La technologie de base de SignAll utilise des informations visuelles, telles que des images et des vidéos, et convertit ces informations en données pouvant être traitées par l'ordinateur.

Le langage des signes est un langage visuel expressif, il peut donc être difficile pour la technologie traditionnelle de l'interpréter. Avec SignAll, l'appareil photo d'un téléphone ou d'un ordinateur est utilisé pour capturer, analyser et traduire les éléments essentiels de la langue des signes.

Tous ces éléments sont catalogués et interprétés par le logiciel informatique, lui permettant de comprendre la langue des signes de l'utilisateur. Au fur et à mesure que l'application collecte ces informations visuelles, elle les compare à une base de données de milliers de gestes potentiels en langue des signes. Il utilise l'apprentissage automatique pour réduire les possibilités et prédire les options les plus probables. L'application présente ces options à l'utilisateur et il sélectionne l'option qui correspond à ce qu'il essayait de dire.

L'apprentissage automatique peut être un outil puissant pour relever les défis de communication des personnes sourdes et malentendantes. Les personnes sourdes ou malentendantes rencontrent souvent des obstacles à la communication lorsqu'elles signent avec des membres de la communauté entendante. L'IA peut aider à surmonter ces obstacles en développant des solutions technologiques qui permettent aux personnes sourdes et malentendantes de communiquer avec les autres de manière spontanée et efficace, à tout moment et en tout lieu.

Maintenant que vous savez comment fonctionne SignAll, réfléchissez à ces questions :

Si vous pouviez pousser cette technologie un peu plus loin, à quoi cela ressemblerait-il ? Découvrons-le!

Dans cette activité, vous allez prendre les idées derrière l'application SignAll et les simplifier pour créer un jeu interactif qui reconnaît les mouvements de la main et y réagit. Vous déplacerez votre main sur l'écran en essayant de toucher des objets apparaissant au hasard. La caméra de votre ordinateur observera où se déplace votre main et son intelligence artificielle suivra et comprendra votre mouvement.

Vous voudrez peut-être travailler avec un partenaire ou un groupe sur ce projet afin que vous ayez des amis pour vous aider à trouver des idées, offrir des commentaires et déboguer votre code. Vous n'avez besoin d'aucune connaissance préalable de l'IA ou de l'apprentissage automatique pour faire cette activité.

Pour ce projet, vous utiliserez le logiciel PoseBlocks du MIT. Cette boîte à outils gratuite utilise des blocs de glisser-déposer pour créer du code, un peu comme le langage de codage populaire Scratch. La différence entre eux est que PoseBlocks a des blocs spéciaux pour utiliser l'intelligence artificielle intégrée de suivi du corps.

Pour créer votre code, vous allez cliquer sur le sprite du slicer et faire glisser des blocs dans l'espace de travail. L'espace de travail PoseBlock comporte plusieurs sections. (Si vous connaissez Scratch, cela vous semblera très familier.)

La zone de gauche comporte trois onglets intitulés "Code", "Costumes" et "Sons", chacun comprenant une bibliothèque d'éléments que vous pouvez utiliser. Tous les blocs de code se trouvent dans la bibliothèque de codes, où ils sont regroupés par fonction et codés par couleur. La bibliothèque de costumes vous permet d'ajouter, de modifier ou de dessiner des sprites. "Sprite" est le nom d'un objet ou d'un personnage dans PoseBlock. Chaque sprite peut recevoir un code pour faire quelque chose dans votre programme. Lorsqu'un sprite a plusieurs formes, nous les appelons costumes. Par exemple, le sprite des éléments a neuf costumes. Cliquez sur l'onglet "Costumes" pour les voir. (Vous pouvez utiliser n'importe quel sprite que vous aimez. Vous pouvez même dessiner le vôtre.)

La bibliothèque de sons vous permet d'ajouter ou d'enregistrer des sons. La zone de code au milieu est l'endroit où vous allez faire glisser vos blocs de code et les cliquer ensemble pour créer votre jeu. En haut à droite se trouve la scène. C'est là que vous pouvez voir le sprite effectuer les actions que vous codez. Le drapeau vert lance la partie. Le panneau rouge l'arrête. En dessous se trouve le volet Sprite. Ce panneau est l'endroit où vous pouvez sélectionner les sprites à coder et ajuster certains paramètres pour les sprites. Vous pouvez également sélectionner une toile de fond personnalisée. En haut se trouve la barre d'outils. C'est là que vous pouvez charger un exemple de code et donner un nom à votre projet. A noter également, vous pouvez cliquer sur le "Globe" 🌐 pour ajuster la langue utilisée. Il y en a plus de 70 disponibles.

Pour vous permettre de démarrer rapidement sur ce projet, un répertoire spécial d'échantillons a été créé. Dans le répertoire, vous trouverez trois fichiers : Game, Tutorial et Game Graphics.

Le code complet, prêt à jouer, se trouve dans le fichier "Game". Pour l'utiliser, téléchargez le fichier sur votre ordinateur. Ensuite, dans PoseBlocks, sélectionnez "Fichier" dans la barre d'outils et choisissez "Charger depuis votre ordinateur". Si vous le souhaitez, vous pouvez immédiatement commencer à remixer le code du jeu et à personnaliser votre jeu. Passez à "Activité 3 : Personnalisez votre jeu interactif" pour trouver des idées et de l'inspiration. Si vous voulez en savoir plus sur le codage qui fait fonctionner ce jeu, continuez à "Activité 2 : Créer et coder votre jeu" pour construire le jeu, étape par étape.

Avant de continuer, il y a quelques autres éléments dans le répertoire qui pourraient vous intéresser. Le fichier "Tutoriel" contient tous les blocs de code individuels utilisés dans le jeu. Vous pouvez télécharger ce fichier sur votre ordinateur et le charger dans Poseblocks comme vous l'avez fait pour le fichier Game. Si vous préférez ne pas avoir à rechercher chaque bloc lors du codage, cela vous aidera. Cela peut rendre le processus de programmation plus rapide et plus facile, tout en vous donnant la possibilité de suivre les étapes. (Astuce : Enseignants, des versions PNG des blocs de code sont également disponibles. Elles sont idéales si vous enseignez sur un tableau intelligent ou si vous souhaitez les ajouter à une présentation.)

Enfin, le fichier appelé "Game Graphics" contient les sprites utilisés dans le jeu sous forme de fichiers PNG afin que vous puissiez les modifier, télécharger uniquement ceux que vous aimez ou les utiliser de manière créative. Vous pouvez également télécharger ce fichier, qui téléchargera tous les sprites vers PoseBlocks en une seule fois.

Vous commencerez par coder le sprite "slicer". Cliquez sur l'icône du chat bleu en bas du panneau Sprite, puis choisissez l'option "peindre". Dans la fenêtre Costume qui s'ouvre, faites un point jaune (ou n'importe quelle forme que vous aimez). Nommez-le "trancheuse". Vous pouvez vous débarrasser de tous les autres sprites en cliquant sur le "x" dans le panneau Sprite. Ce point se déplacera avec votre doigt afin que vous puissiez suivre votre progression sur l'écran.

Pour ce jeu, vous utiliserez une fonction spéciale appelée unstylo , qui permet au sprite de dessiner des formes sur l'écran. Pour dire au stylo quoi faire, vous avez besoin de quelques blocs de code. Trouvez le bloc "lorsque le drapeau vert est cliqué". Cela indiquera au jeu de commencer. Faites-le glisser de la bibliothèque de codes vers la zone de code. Ensuite, vous souhaitez définir la taille du stylo sur 11, rendre la couleur blanche et l'activer. Recherchez les blocs "définir la taille du stylo", "définir la couleur du stylo" et "stylo vers le bas" dans la bibliothèque de codes et faites-les également glisser vers la zone de code. Enfin, ajoutez la "taille définie". Définissez la taille de l'objet sur 10 % et affichez-le à l'aide du bloc "afficher". Cela vous aidera également à suivre le mouvement de votre doigt sur l'écran. N'oubliez pas que vous pouvez modifier n'importe lequel des paramètres si vous le souhaitez. Si vous préférez un trait de stylo violet, foncez !

L'étape suivante consiste à créer une boucle éternelle et à y placer une condition qui vérifie la valeur de la variable "coupe". Lorsque votre doigt "touche" l'un des éléments aléatoires à l'écran, le sprite du trancheur le "coupe", le faisant disparaître. La variable de coupe fait non seulement pivoter le sprite de 15 degrés lorsqu'il croise un objet, mais modifie également la figure du sprite lui-même. Cette fonctionnalité ajoute un élément visuellement attrayant à l'expérience de jeu, améliorant l'esthétique du jeu.

Puisqu'il s'agit d'une action que vous voulez voir se reproduire encore et encore, vous avez besoin d'un bloc spécial. Une boucle est une instruction pour l'ordinateur qui se répète, dans ce cas pour toujours. Faites glisser le bloc "pour toujours" sur la zone de code et ajoutez-le aux blocs de votre code. Tout ce qui se trouve à l'intérieur de cette boucle continuera à se produire tant que le jeu sera en cours d'exécution.

Une variable est une valeur qui peut changer en fonction des informations qu'elle reçoit. Pour créer une variable, cliquez sur la section "Variables" de la bibliothèque de code et sélectionnez "Créer une variable". Créez une variable appelée "coupe". Dans ce cas, si la découpe variable est égale à 1, alors le stylet va tourner de 15 degrés, dans le cadre du mouvement du jeu, et de la réaction visuelle de la découpe, ceci lorsque nos doigts touchent l'un des éléments à l'écran, pour les faire disparaître. Ajoutez un bloc "Si-alors" avec une condition qui utilise un bloc opérateur pour vérifier la valeur de la variable de coupe.

Il est temps d'activer l'IA ! Ajoutez le bloc "aller à" à la fin de votre code et sélectionnez "index" et "pointe". Votre code détectera l'emplacement de votre main, en particulier le bout de votre index.

Ensuite, vous avez une condition qui prend la valeur absolue d'une opération. L'opération suit les coordonnées du bout de votre doigt sur l'écran. La valeur "X" représente la position horizontale de votre doigt. Au cours de cette opération, vous allez calculer la différence entre la position actuelle - "x position" - et la position X précédente "dernière souris x" - et vous assurer que cette différence est un nombre positif (abs). Si la différence est supérieure à 2, cela signifie que l'objet s'est beaucoup déplacé depuis sa position d'origine. L'ordinateur peut faire ce calcul très, très rapidement. Utilisez le bloc "if-then-else" pour aider l'ordinateur à prendre cette décision. Notez également que vous devrez créer la variable "dernière souris x".

Si votre main se déplace rapidement, la variable "coupe" est définie sur 1, ce qui fera tourner le stylo de 15 degrés, de sorte que la ligne est visiblement tracée. Si la différence entre les positions passées et présentes du stylet est faible, alors "coupe" est réglé sur 0. Puisque vous ne bougez pas, le stylet n'a pas besoin de tourner et toutes ses marques sont effacées. Pour les besoins du jeu, lorsque vous ne bougez pas votre doigt, l'ordinateur supposera que vous avez touché

La dernière étape consiste à définir la dernière variable x de la souris pour qu'elle corresponde aux coordonnées X de la position actuelle de votre doigt. Ensuite, le processus boucle et recommence.

Une fois ces étapes terminées, tous les blocs devraient ressembler à ceci.

Vous allez maintenant aborder la deuxième partie du code du slicer. Le but ici est de créer un clone ou une copie du sprite d'origine. Le travail du clone consiste à faire quelque chose de cool juste après avoir effectué une action de coupe dans le jeu, lorsque votre doigt touche un objet et le fait disparaître. Le sprite trancheur affichera une animation clignotante, ajoutant du plaisir et plus d'interaction au jeu.

Pour définir un clone, définissez d'abord la taille de l'objet sur 100 % et affichez-le.

Créez ensuite une boucle qui se répétera 10 fois. Définissez votre code pour qu'il pivote de 15 degrés, redimensionne de 1 et ajoute un effet de couleur et un effet de fondu. Changez la position en Y en -2. Cela créera un effet clignotant coloré lorsque notre doigt touchera l'un des éléments graphiques du jeu. Enfin, ajoutez "supprimer le clone" lorsque l'animation est terminée. Jouez avec les paramètres pour créer le type d'animation clignotante que vous aimez !

Maintenant, vous allez coder les sprites "elements". Ces images apparaîtront au hasard et se déplaceront sur l'écran dans le jeu. Vous devrez les "toucher" du bout du doigt, ce qui déclenchera l'animation du slicer que vous avez faite à la première étape.

Encore une fois, vous devez ajouter un nouveau sprite, comme vous l'avez fait auparavant. Il sera appelé "éléments". Cependant, cette fois, vous souhaitez que plusieurs objets différents puissent apparaître. Utilisez les graphismes du jeu fournis (voir "Activité 1 : Apprenez à connaître la plate-forme PoseBlock"), dessinez les vôtres ou sélectionnez des sprites dans la bibliothèque. Cliquez sur l'onglet Costumes pour les voir. La chose la plus importante est que chaque objet doit être un costume sous le même sprite "éléments", comme indiqué.

Cliquez sur le sprite des éléments pour ajouter un bloc à l'espace de travail Code. Au démarrage du jeu (en cliquant sur le drapeau vert), cachez l'objet et créez une boucle pour toujours. A l'intérieur de la boucle, créez un clone de "moi-même" en cliquant sur la flèche vers le bas. Ajoutez ensuite le bloc d'attente et définissez-le pendant une à deux secondes. Cela générera un sprite à un moment aléatoire entre une et deux secondes, de sorte que vous ne pouvez pas deviner quand il apparaîtra. Cela continuera tant que le jeu sera en cours d'exécution.

Une fois le clone créé, nous voulons sélectionner un costume de sprite d'élément aléatoire. Utilisez le bloc "Quand je démarre en tant que clone" pour commencer le code. Ajoutez ensuite un bloc caché et une boucle de répétition. Ajoutez le bloc "costume suivant" à la boucle et faites-le choisir au hasard un nombre de 1 à 10 à l'aide d'un bloc opérateur. Cela randomisera les éléments du costume de sprite qui apparaîtront.

Maintenant, nous devons donner à nos éléments quelque chose à faire à l'écran. Ajoutez une variable et définissez-la sur "aller à droite". Utilisez le même code aléatoire pour définir la variable à une valeur aléatoire entre 1 et 0. Selon la valeur, les éléments sprite se déplaceront vers la droite ou vers la gauche sur l'écran.

A l'aide de la variable "Vitesse X", une valeur positive le fait se déplacer dans un sens (droite), tandis qu'une valeur négative le fait se déplacer dans l'autre sens (gauche). La valeur de la vitesse détermine la vitesse de l'objet. Essentiellement, la variable de vitesse nous permet de contrôler la façon dont l'objet se déplace dans le jeu. Essayez de modifier les valeurs pour voir comment cela affecte le mouvement des éléments.

Vous avez également besoin que l'élément apparaisse à l'écran. Utilisez le bloc "show" pour ce faire. Réglez la variable de vélocité (vitesse) sur 20 dans la direction Y, qui contrôle le mouvement de haut en bas, en créant une variable « Vitesse Y ».

Vous devez maintenant coder ce qui arrive au sprite des éléments lorsqu'il rencontre le slicer. Dans une boucle éternelle, modifiez la variable de vitesse Y de -1. Modifiez la position de Y par la variable "Vitesse Y" et faites de même avec la position en X. Cela fera apparaître le sprite d'élément au hasard depuis le bas de la scène, puis tombera à nouveau. Ensuite, créez une condition qui vérifie si l'image-objet de l'élément touche la bordure de la scène. Si c'est le cas, supprimez ce clone.

Ensuite, créez une condition pour que lorsque le sprite de l'élément est touché par votre doigt - le stylo de couleur blanche du slicer malgré - un clone du slicer est créé. Cela va parquer l'animation que nous avons codée précédemment. Enfin, ajoutez une boucle de répétition et définissez le bloc "changer la taille" sur -10. Cela fera rétrécir le sprite de l'élément jusqu'à ce qu'il soit très petit.

Une fois ces étapes terminées, tous les blocs devraient ressembler à ceci.

C'est le bon moment pour sauvegarder votre partie. Malheureusement, PoseBlocks n'a pas de moyen de sauvegarder et de partager votre programme en ligne entre les sessions. Au lieu de cela, vous devrez enregistrer le fichier. Dans la barre d'outils, entrez le nom de votre jeu dans la case blanche. Cliquez ensuite sur "Fichier" et sélectionnez "Enregistrer sur votre ordinateur". Pour travailler sur le jeu une autre fois, chargez simplement le fichier du jeu dans PoseBlock de la même manière que vous l'avez fait pour télécharger d'autres fichiers comme décrit dans l'activité 1. Assurez-vous de sauvegarder après chaque session. Vous pouvez envoyer vos fichiers de jeu à n'importe qui, afin qu'ils puissent jouer aussi !

Prêt? Il est maintenant temps de tester votre jeu !

Maintenant que vous avez vu le jeu de base, réfléchissez aux façons de l'adapter. Vous pouvez changer les sprites, jouer avec la modification des blocs de synchronisation et de mouvement, ajuster l'animation du sprite de la trancheuse ou même ajouter des sons. Vous pouvez changer de blocs et essayer de nouvelles choses. Si quelque chose ne va pas, vous pouvez toujours l'annuler !

Lorsque vous êtes prêt à créer votre propre jeu, posez-vous ces questions.

Une fois que vous avez créé votre jeu, donnez-lui un nom et enregistrez votre travail. Demandez à d'autres d'essayer votre jeu et d'obtenir des commentaires. Jouez aux jeux créés par les autres. Discutez des difficultés que vous avez rencontrées et de la manière dont vous les avez surmontées.

Avez-vous aimé utiliser PoseBlocks pour créer un jeu interactif ? Le plaisir ne doit pas s'arrêter là !

CréditsLeçon et suppléments par Camila Luna et Diego Luna.Copyediting par Lois Parshley.Digital Production par Sandy Roberts.

Camila et Diego sont les membres fondateurs de MoonMakers, une communauté de créateurs passionnés par le savoir. Ils hébergent un Makerspace, un espace ouvert avec différentes machines de fabrication numérique, et une chaîne YouTube où ils font la promotion de la science, de la technologie et du mouvement maker. Ils ont collaboré pour créer du contenu éducatif avec des entreprises telles que Sesame Stree et Make: Community aux États-Unis et Educational Television et Fundación Televisa au Mexique. Camila enseigne également des ateliers dans toute la République mexicaine avec Talent Land, le secrétaire à l'éducation de Jalisco, Conacyt, Centro Cultural España.

Devenez un ingénieur chatbot en concevant, créant et adaptant votre propre chatbot unique en son genre à l'aide de l'intelligence artificielle.

Découvrez l'intelligence artificielle (IA) en expérimentant directement les chatbots et la technologie d'apprentissage automatique.