Remarque : Un fichier de projet complet pour ce tutoriel peut être trouvé à la fin de cet article.

Introduction

Dans ce tutoriel, nous allons créer l'intelligence artificielle (IA) pour un slime ennemi convaincant pour un jeu de style plate-forme. Nous couvrirons certaines fonctionnalités et comportements plus avancés dans hyperPad, donc ce tutoriel suppose une connaissance de base de l'éditeur hyperPad. Si vous pensez devoir vous familiariser davantage avec la création d'un jeu à partir de zéro, vous pouvez d'abord consulter le Guide Complet - Créer un Jeu de Plate-forme.

Pour donner un aspect "intelligent" au slime, il doit faire plus que simplement se déplacer d'avant en arrière, et il doit être quelque peu conscient de son environnement.

Ça semble excitant ! Mais avant de commencer, nous devrions d'abord détailler comment le slime ennemi devrait se comporter :

Au lieu de marcher, le slime sautera à gauche ou à droite pour se déplacer.
Le slime sautera dans la direction du joueur.
Si le joueur est trop loin, le slime ne se déplacera pas (inactif).
Le slime enlèvera des points de vie au joueur au contact.
Le slime est vaincu si le joueur saute dessus.

Maintenant que nous savons ce que nous voulons faire, commençons !

Part 1 : Configuration du projet

Dans ce tutoriel, nous commencerons un nouveau projet à partir de zéro pour garder les choses simples. Créez un nouveau projet et définissez-le sur "Vue de côté", vous pouvez laisser les autres paramètres à leurs valeurs par défaut.

Une fois votre nouveau projet créé, allez à la Bibliothèque d'Assets et récupérez le "Pack de Démarrage de Plate-forme" par hyperPad dans la boutique d'assets. (C'est gratuit !)

Maintenant que nous avons quelques assets avec lesquels travailler, allez-y et placez quelques blocs de sol et créez votre monde. Si vous n'y êtes pas déjà, allez à la Bibliothèque d'Assets et appuyez sur "Téléchargements", puis "Pack de Démarrage de Plate-forme".

Dans l'image ci-dessous, quelques blocs de sol (dossier "Grass World") ont été placés et un arrière-plan (dossier "Backgrounds") a été défini.

Maintenant que nous avons une belle scène à travailler, ajoutons les objets Joueur et Slime. Allez à la Bibliothèque d'Assets et ouvrez votre dossier "Téléchargements", puis le dossier "Pack de Démarrage de Plate-forme" s'il n'est pas déjà ouvert.

Nous allons utiliser le "Spaceman Vert" comme joueur, alors appuyez sur l'asset du spaceman vert pour voir tous ses cycles d'animation. Par défaut, nous voulons que le joueur reste simplement debout, alors appuyez sur l'animation "Stand" et placez-la sur la scène.

Dans le même dossier de la Bibliothèque d'Assets, il y a aussi un personnage animé "Slime Rose". Parfait pour nous en tant qu'ennemi slime ! Appuyez sur l'asset de slime et choisissez l'animation "Move" et placez un slime sur votre scène avec votre personnage joueur.

Jusque-là, tout va bien ! Nous avons maintenant notre objet joueur et notre objet slime, prêts à être utilisés. Mais si nous devions jouer notre projet maintenant, nous ne pourrions pas interagir avec le jeu du tout. Nous devrons donc créer une logique pour donner vie à notre jeu.

Partie 2 : Contrôles du Joueur

Avant de pouvoir commencer à donner vie à notre slime ennemi, nous devrions d'abord avoir des contrôles pour le spaceman vert.

Appuyez sur le spaceman vert et définissez son mode de physique de Mur à Physique, ce qui permettra au joueur de se déplacer librement. Ensuite, appuyez sur le bouton "Comportements" pour ouvrir l'éditeur de Comportements pour notre personnage joueur afin que nous puissions ajouter des contrôles.

Dans l'éditeur de comportements pour notre personnage joueur, vous devriez déjà voir un comportement Jouer Animation solitaire. Nous pouvons laisser ce comportement seul, mais nous pouvons lui donner quelques amis.

Sous la section Interaction, placez un Contrôle par Joystick ainsi qu'un Saut avec Bouton n'importe où. Avec ces comportements, notre joueur est maintenant prêt à être contrôlé. Mais il manque encore quelques animations.

Appuyez sur le comportement Contrôle par Joystick et définissez l'"Animation de Joystick Gauche" sur le cycle d'animation "Marche" dans l'asset Spaceman Vert. Faites de même avec "Animation de Joystick Droit".

Maintenant notre personnage joueur marche, mais ne s'anime toujours pas lorsqu'il saute.

Appuyez sur le comportement Saut avec Bouton et changez l'"Animation de Chute" et l'"Animation de Saut" pour le cycle d'animation "Saut".

Si nous jouons à notre jeu maintenant, nous pouvons bouger et sauter ! La prochaine étape est de commencer à travailler sur notre slime ennemi.

Partie 3 : Mouvement du Slime

Comme nous l'avons détaillé dans la section d'introduction de ce tutoriel, nous voulons que notre slime saute vers le joueur. Pour cela, notre slime doit savoir où se trouve le joueur dans le monde. C'est pourquoi nous devrions ajouter un Tag à notre personnage joueur, afin que nos comportements puissent récupérer notre personnage joueur dans n'importe quelle scène.

Appuyez sur le personnage joueur et sélectionnez l'onglet Tags en bas de la vue des propriétés. Tapez "Joueur" dans le champ de texte en haut du menu des tags et appuyez sur le bouton ajouter (+) à côté. Maintenant, notre personnage joueur est tagué avec le tag "Joueur".

Comme ce que nous avons fait avec le personnage joueur, appuyez sur le slime et définissez son mode de physique de Mur à Physique. Ensuite, appuyez sur le bouton Comportements pour ouvrir l'éditeur de comportement du slime.

Dans l'éditeur de comportements, allez à la section Personnalisé et placez un comportement Timer dans l'éditeur.

Appuyez sur le comportement Timer et définissez son intervalle à 2 secondes.

Cela sera le début de notre logique pour l'intelligence artificielle de notre slime.

L'idée ici est qu'une fois toutes les 2 secondes, notre slime "pense" à ce qu'il doit faire ensuite, comme : Est-ce que le slime doit sauter ? S'il choisit de sauter, dans quelle direction doit-il sauter ?

Ensuite, allez à la section Transformation et placez un Obtenir la Position comportement. Appuyez dessus et définissez sa cible sur le tag "Joueur" que nous avons créé précédemment en appuyant sur l'onglet Tags en bas de la vue de ses propriétés et en sélectionnant "Joueur". Connectez maintenant le Timer au comportement Obtenir la Position.

Désormais, nous savons où se trouve notre joueur dans le monde ! Pour déterminer si le joueur est à gauche ou à droite du slime, nous devons également savoir où se trouve le slime dans le monde.

Faites glisser un autre comportement Obtenir la Position dans l'éditeur. Par défaut, le comportement cible déjà notre slime, donc nous n'avons rien d'autre à faire que de le connecter à notre branche de logique. Allez-y et connectez l'Obtenir la Position pour le joueur à l'Obtenir la Position pour le slime.

Optionnel : Pour simplifier la compréhension, j'ai renommé mes comportements Obtenir la Position pour indiquer clairement ce qu'ils suivent : "Obtenir la Position Joueur" et "Obtenir la Position Slime". C'est optionnel, mais si vous souhaitez également renommer les comportements, vous pouvez le faire en appuyant sur le comportement et en touchant son nom en haut de la vue des propriétés.

Jusqu'à présent, ce que nous avons est qu'une fois toutes les 2 secondes, le slime récupère la position du personnage joueur et de lui-même. Maintenant que nous avons cette information, nous pouvons déterminer si le slime doit sauter à gauche ou à droite.

Sous l'onglet Logique, déposez et connectez un comportement Si. Dans ses propriétés, définissez la première valeur sur la position x du premier Obtenir la Position (tag "Joueur") en faisant glisser la valeur de sortie du comportement dans le champ des propriétés de Si. Pour la deuxième valeur, définissez-la sur la position x du second Obtenir la Position (slime). Enfin, définissez la condition du comportement Si sur "Est Inférieur à" (<).

Remarque : La position x d'un objet est la valeur représentant où se trouve l'objet dans le monde sur son axe x. (Gauche et droite)

Alors, que signifie tout cela ? Le comportement Si vérifiera si la position x du joueur est inférieure à celle du slime. Si cela est vrai, alors elle exécutera le comportement suivant connecté. Ce qui signifie essentiellement que si le joueur est plus à gauche que le slime, l'exécution des comportements continuera.

D'accord, nous avons maintenant la logique configurée pour que le slime saute à gauche, alors faisons en sorte que le slime fasse exactement cela !

Sous la section Physique, déposez et connectez un comportement Appliquer Force au comportement Si. Dans ses propriétés, définissez la Force sur : x = -0.5, y = 1. Ensuite, définissez le multiplicateur sur un nombre considérable, 200 devrait faire l'affaire.

Ce que nous avons maintenant, c'est que si le slime trouve le joueur plus à gauche que lui, il sautera vers le haut (y = 1 × 200) et un peu à gauche (x = -0.5 × 200).

Essayez ! Jouez au jeu et testez pour vous assurer que tout fonctionne. Ce que vous devriez voir, c'est le slime sautant vers la gauche toutes les 2 secondes, tant que le joueur est à sa gauche. Si vous déplacez le joueur à droite du slime, il cesse de sauter jusqu'à ce que vous le déplaciez à sa gauche à nouveau.

Remarque : Si votre slime ne se déplace pas, parcourez les étapes précédentes pour vous assurer que vous n'avez rien manqué. Assurez-vous que les comportements sont correctement connectés et que le mode de physique de votre slime est réglé sur Physique (mobile) au lieu de Mur (non mobile). De plus, nous allons bientôt résoudre le problème où le slime se retourne parfois sur le côté ou à l'envers.

De grands progrès jusqu'à présent ! Si votre slime saute autour comme prévu, alors nous sommes prêts à continuer. Terminons les comportements de mouvement en permettant également au slime de sauter vers la droite.

Retournez dans l'éditeur de comportement du slime, dupliquez le comportement Si. Faites glisser le nouveau comportement Si à droite du comportement original. Cela le transformera en un comportement "Sinon Si".

Dupliquez également le comportement Appliquer Force et connectez-le à la nouvelle Else If.

Dans les propriétés de l'Else If, changez la condition de "Est Inférieur à" (<) à "Est Supérieur à" (>). Cela aura l'effet opposé du premier Si. Si le premier comportement Si n'est pas vrai, il vérifiera ensuite si l'Else If est vrai à la place. Cela signifie que si le joueur n'est pas à gauche du slime, il vérifiera si le joueur est à droite du slime, et continuera à exécuter les comportements connectés à l'Else If à la place.

Vous devriez maintenant avoir une branche de comportements qui ressemble à quelque chose comme ça :

Dans le second Appliquer Force (sous l'Else If), changez ses propriétés afin que sa force soit x = 0.5, au lieu de x = -0.5. Maintenant, au lieu de sauter vers la gauche, le slime sautera vers la droite.

Jouez au projet et réessayez ! Maintenant, vous devriez voir le slime sauter dans la direction du joueur. Excellent !

Une chose que vous avez peut-être remarquée lors des tests de jeu, est que si vous entrez en collision avec le slime, il peut parfois tomber sur le côté ou se mettre à l'envers. Nous voulons que le slime reste droit, alors corrigeons cela rapidement.

Retournez dans l'éditeur de comportement du slime, allez à la section des comportements de Transformation et déposez un comportement Verrouiller la Rotation dans l'éditeur. Pas besoin de le connecter à un autre comportement, nous voulons qu'il verrouille sa rotation dès que le slime est créé, donc vous pouvez le laisser tel quel. Une fois que vous avez fait cela, essayez à nouveau le jeu. Cette fois, vous devriez avoir des difficultés à déplacer le slime sur le côté.

Vous avez également peut-être remarqué que l'animation du slime se joue trop rapidement. Si cela se produit, appuyez sur le comportement Jouer Animation dans l'éditeur de comportements du slime et changez les Images par Seconde à un nombre beaucoup plus petit. 6 images par seconde semblent plutôt bien.

Super ! Maintenant notre slime non seulement se déplace bien, mais il a également l'air génial. Pour la plupart, la logique de mouvement de notre slime est complète.

Cependant, nous voulons également que le slime ne saute que si le joueur est à proximité. De cette façon, si nous construisons un monde plus grand, les slimes éloignés n'essaieront pas immédiatement de sauter vers et d'attaquer le joueur. Dans la prochaine partie, nous allons ajouter une autre condition pour bloquer la logique de saut si le joueur est trop loin.

Partie 4 : Inactivité du Slime

Dans cette partie, nous allons mettre en œuvre certains comportements de slime qui le rendront inactif (c'est-à-dire, ne pas bouger) lorsque le joueur est trop loin.

Pour cela, nous devons trouver un moyen de mesurer la distance entre notre slime et le joueur. Fort heureusement, il existe des comportements disponibles pour cela ! Travaillons.

Ouvrez l'éditeur de comportements du slime et déposez un comportement Calculer la Distance de la section Logique. Dans ses propriétés de comportement, le premier objet est déjà défini sur notre slime. Pour le second objet, allez dans le menu des onglets et sélectionnez le tag "Joueur".

Ce comportement, lorsqu'il est exécuté, calculera la distance en mètres entre notre slime et le joueur. À l'aide de cette information, nous pourrons vérifier si le joueur est trop loin en vérifiant si cela dépasse une certaine distance.

Placez un autre comportement Si de la section Logique et connectez-le sous le comportement Calculer la Distance. Dans les propriétés du comportement Si, définissez la première valeur sur la valeur de sortie du Calculer la Distance. Définissez la condition sur "Est Inférieur à" et la seconde valeur sur 15.

Maintenant, ce que nous avons, est un moyen de vérifier si le joueur est trop loin en voyant si la distance entre le slime et le joueur est inférieure à 15 (mètres). Si cette condition est fausse, alors le joueur est trop loin et le comportement Si n'exécutera pas le comportement suivant.

Maintenant que nous avons notre nouvelle condition prête à être utilisée, déconnectez l'Obtenir la Position (slime) et l'ancien comportement Si de la partie précédente du tutoriel et faites de la place pour notre nouvelle condition. Vous pouvez déconnecter les comportements en appuyant et en maintenant les connexions entre les comportements.

Avec la nouvelle condition de distance en place, connectez l'Obtenir la Position (slime) au comportement Calculer la Distance, puis connectez le nouveau comportement Si au ancien comportement Si. Vous devriez maintenant avoir quelque chose comme ça :

Ça commence à avoir l'air assez compliqué maintenant, mais l'idée est relativement simple. Maintenant, nous avons que, avant même de vérifier dans quelle direction le slime doit sauter, nous vérifions d'abord si la distance entre le slime et le joueur est inférieure à 15 (mètres).

Si le joueur est plus proche que 15 mètres, il continuera et vérifiera dans quelle direction nous devrions sauter, comme d'habitude. Si le joueur est à plus de 15 mètres, nous ne continuons pas et la logique se termine là jusqu'à ce que le slime "pense" à nouveau (dans 2 secondes).

Essayez le jeu ! Si vous êtes trop près du slime, il devrait commencer à sauter vers vous, mais si vous vous éloignez trop, il devrait cesser de bouger et attendre jusqu'à ce que vous vous rapprochiez à nouveau.

Notre slime commence à avoir un aspect plutôt menaçant maintenant, mais il lui manque toujours un moyen de blesser le joueur. Dans la prochaine partie de ce tutoriel, nous allons donner au joueur une barre de santé et implémenter une logique pour infliger des dégâts au joueur.

Partie 5 : Attaque du Joueur

Comme détaillé dans la section d'introduction, nous allons implémenter les attaques du slime en faisant en sorte que le slime blesse le joueur lorsqu'il touche le joueur. Pour commencer à implémenter un moyen pour le slime d'attaquer le joueur, nous devons d'abord donner de la santé au joueur.

Dans l'éditeur principal, sélectionnez la couche UI de la scène et créez un nouvel objet avec le bouton Objets Spéciaux. Appuyez sur "Barre de Santé" pour créer une barre de santé pour notre joueur.

Comme elle est placée sur la couche UI de la scène, si nous choisissons d'élargir notre monde et de faire suivre l'écran au joueur, elle restera au même endroit à l'écran.

Vous pouvez la placer où bon vous semble à l'écran. Je l'ai placée au centre de l'écran près du bas.

Une fois que vous avez trouvé un bon emplacement pour votre barre de santé, nous pouvons nous attaquer à l'ajout d'un moyen de retirer des points de vie de la barre de santé. Revenez à la couche principale où se trouve votre slime et ouvrez à nouveau son éditeur de comportement.

Dans un endroit vide de vos comportements, déposez un comportement Collision trouvé sous la section Objet. Dans ses propriétés, définissez le second objet sur le tag "Joueur".

Dans la section des comportements Personnalisé, déposez un comportement Diffuser un Message et connectez-le sous le comportement Collision. Dans les propriétés du comportement Diffuser un Message, définissez la Clé d'Événement sur "joueur touché" et définissez la valeur sur -10.

Rappelez-vous : Les clés d'événements sont sensibles à la casse ! Pour simplifier, ce tutoriel utilisera des minuscules pour les clés d'événements. Vous pouvez choisir d'utiliser des majuscules si vous le préférez, mais assurez-vous de vous souvenir des lettres qui sont en majuscule pour plus tard.

Maintenant, nous avons un moyen de détecter quand le joueur doit perdre des points de vie. Lorsque le joueur entre en collision avec le slime, un message pour l'événement "joueur touché" sera diffusé avec une valeur de -10. Nous utiliserons le -10 pour dire à la barre de santé d"ajouter" -10 points de vie, et puisque la valeur est négative, cela retirera 10 points de vie.

Nous devons encore ajouter cette logique à la barre de santé, alors faisons cela maintenant. Quittez l'éditeur de comportement du slime, puis dans l'éditeur principal, appuyez sur la couche UI de la scène, puis sur la barre de santé. Ouvrez l'éditeur de comportements pour la barre de santé.

Dans l'éditeur de comportement de la barre de santé, déposez un comportement Recevoir un Message de la section Personnalisé. Dans ses propriétés, définissez la Clé d'Événement sur "joueur touché". (Rappelez-vous, c'est sensible à la casse !)

Ce comportement sera notre écouteur pour le message "joueur touché" envoyé à chaque fois que le joueur touche le slime. Lorsque ce comportement détecte un message diffusé pour "joueur touché" n'importe où dans le jeu, il s'exécutera.

Maintenant, ajoutez un comportement Ajouter à la Barre de Santé sous la section UI et connectez-le sous le comportement Recevoir un Message.

Dans les propriétés Ajouter à la Barre de Santé, glissez la valeur de sortie de Recevoir un Message dans le champ "Valeur à ajouter". Cette valeur sera celle de -10 que nous avions définie plus tôt dans le comportement Diffuser un Message sur le slime. De cette manière, si nous choisissons de faire en sorte que d'autres ennemis infligent des dommages différents, il nous suffit de changer la valeur du message diffusé pour tout ce que nous voulons, et la barre de santé utilisera cette nouvelle valeur !

Assurez-vous que "Événement Complet" est désactivé, et "Événement Vide" est activé. Cela signifie que si la barre de santé atteint zéro, cela exécutera le prochain comportement.

Sous la section Scène, déposez un comportement Charger Superposition et connectez-le au comportement Ajouter à la Barre de Santé.

Dans les paramètres Charger la Superposition, changez la superposition sélectionnée pour celle de "Game Over" qui est automatiquement créée pour vous lorsque vous créez un nouveau projet.

Jouez au jeu et essayez-le ! Maintenant, chaque fois que vous soignez le slime, cela doit réduire votre barre de santé. Lorsque la barre de santé atteint zéro, c'est la fin du jeu.

C'est cool ! Nous avons maintenant un moyen d'infliger des dommages au joueur et de perdre la partie.

Il semble cependant qu'il manque quelque chose. Nous ne donnons pas beaucoup de retour au joueur qu'il a été touché, à part retirer des points de vie de la barre de santé.

Nous pouvons corriger cela en propulsant le joueur et le slime loin l'un de l'autre, rendant très clair qu'ils sont entrés en contact, ainsi qu'en empêchant le joueur de perdre des points de vie trop rapidement en entrant en collision avec le slime de manière répétée.

Allez à l'éditeur de comportement pour le slime (vous devrez peut-être d'abord sélectionner la couche Principale) et déposez un comportement Propulser l'Objet sous la section Physique. Connectez-le sous le comportement Diffuser un Message plus tôt et ouvrez ses propriétés.

Dans les propriétés, changez le second objet sur le tag "Joueur" en ouvrant l'onglet Tags et en sélectionnant "Joueur". Changez la valeur de Force à 200, le Multiplicateur de l'Objet A à 0.25, et le Multiplicateur de l'Objet B à 1.

Maintenant, lorsque le joueur entre en collision avec le slime, il sera repoussé loin du slime avec une force de 200 (1 × 200 force) et le slime sera poussé loin du joueur avec une force de 50 (0.25 × 200 force).

Notre jeu commence à être plutôt agréable maintenant ! Le seul problème maintenant est que nous avons un slime invincible et que notre joueur n'a aucun moyen de le vaincre. Dans la prochaine partie, nous allons implémenter un moyen pour notre joueur de riposter.

Partie 6 : Vaincre le Slime

Pour permettre à notre joueur d'attaquer le slime en sautant dessus, nous allons devoir changer la façon dont nous gérons les collisions en faisant en sorte que le slime ignore le bas du joueur (les pieds du joueur) lors de l'infligement de dégâts.

Ouvrez l'éditeur de comportement pour le slime et appuyez sur le comportement Collision que nous avons créé dans la partie précédente du tutoriel. Désactivez l'option "Sur le Bas", qui ignorera les collisions si le slime entre en collision avec le bas de la boîte de collision du joueur.

Maintenant, notre slime ne blessera pas le joueur si le joueur saute dessus. Au lieu de cela, nous voulons exécuter une logique différente lorsque cela se produit.

Avec l'événement Collision sélectionné, dupliquez-le et inversez toutes les options dans le nouveau comportement Collision, de sorte que seule l'option "Sur le Bas" soit activée.

Cela servira de point d'entrée lorsque le joueur saute au-dessus du slime.

Ensuite, déposez et connectez un comportement Détruire l'Objet de la section Objet. Il doit déjà être configuré pour détruire notre objet slime par défaut.

Maintenant, lorsque nous jouons à notre jeu, sauter sur le slime le détruit. Mais encore une fois, comme cela s'est produit avec le fait d'être touché par le slime plus tôt, cela ne semble pas très satisfaisant.

Comme nous l'avons fait dans la partie précédente du tutoriel, ajoutons un autre Propulser Objet. Dupliquez l'ancien comportement Propulser Objet de la logique de dommages au joueur et connectez-le sous le comportement Détruire l'Objet. Ses propriétés de l'ancien comportement Propulser Objet peuvent rester les mêmes.

Maintenant, lorsque nous jouons au jeu, il y a un joli rebond satisfaisant lorsque nous sautons sur le slime.

Conclusion & Exercices

Et c'est à peu près tout ! Nous avons vérifié toutes les cases faites dans la section d'introduction :

Au lieu de marcher, le slime sautera à gauche ou à droite pour se déplacer. Vérifié !
Le slime sautera dans la direction du joueur. Vérifié !
Si le joueur est trop loin, le slime ne se déplacera pas (inactif). Vérifié !
Le slime enlèvera des points de vie au joueur au contact. Vérifié !
Le slime est vaincu si le joueur saute dessus. Vérifié !

Si vous êtes arrivé aussi loin, vous devriez maintenant avoir une compréhension décente de la façon dont vous pouvez donner intelligemment vos ennemis afin qu'ils pensent et prennent des décisions par eux-mêmes. Bien joué !

Cependant, il y a toujours plus de choses qui peuvent être faites. En tant qu'exercice, essayez de faire les choses suivantes par vous-même :

Jouer une animation "touche/mort" pour le slime lorsque le joueur saute dessus.
Jouer une animation "touche" pour le joueur lorsque le slime attaque le joueur.
Ajouter un peu de randomité à la distance que le slime sautera à chaque fois.

Un fichier de projet complet pour ce tutoriel peut être trouvé ici : Télécharger le Projet de Tutoriel

Comment créer une intelligence artificielle pour un slime ennemi