Tutoriel de Scripting Visuel (Logic Bricks)

Dans cette leçon, nous allons créer la logique utilisée pour collecter l'objet en utilisant les Logic Bricks de Cave Engine.

Vous apprendrez comment détecter quand le Joueur entre en collision avec un objet collectable, identifier cet objet à l'aide d'une balise, le retirer de la scène et mettre à jour un simple compteur d'UI montrant combien d'objets ont été collectés.

C'est le début d'un système de gameplay très commun : l'interaction avec les objets. La même idée peut ensuite être étendue pour créer des pièces, des clés, des ramassages de munitions, de la santé, des objets de quête, des améliorations, ou tout autre objet que le Joueur peut collecter.

1. Créer la logique pour collecter l'objet

À l'intérieur de la logique de notre Joueur, nous allons détecter les collisions avec les objets collectables directement à partir du Joueur lui-même.

Après la logique de mouvement, nous créerons le système responsable de la détection du contact avec l'objet et de son retrait de la scène.

D'abord, obtenez l'Entity et accédez à son Character Component en utilisant Get Character.

À partir du Character Component, utilisez le nœud Get Collision With. Ce nœud nous permet de détecter les collisions en fonction d'une Tag spécifique.

Dans ce cas, nous utiliserons la balise item, qui a été assignée à notre objet collectable dans la leçon précédente.

C'est pourquoi l'ajout d'une balise à l'objet était important. Au lieu de vérifier un nom d'Entity spécifique, nous pouvons simplement demander au Joueur s'il a eu une collision avec quoi que ce soit étiqueté comme item. Cela rend la logique plus flexible, car tout objet collectable ayant cette même balise peut être détecté par le même système.

Le résultat de cette détection doit être connecté à un nœud Get, qui retourne les informations de collision, également connues sous le nom de Collision Info.

Ensuite, nous obtenons l'index 0, qui représente la première collision détectée.

Enfin, connectez ce résultat au nœud Kill, qui est responsable de la suppression d'une Entity de la scène.

L'Entity qui sera supprimé provient directement des Collision Info. En d'autres termes, l'objet collecté lui-même est passé comme entrée à Kill, le faisant disparaître de la scène lorsqu'il est touché par le Joueur.

Avec cette logique, le Joueur peut déjà détecter un objet collectable et le retirer de la scène.

En pratique, cela signifie que lorsque le Joueur touche une Entity étiquetée comme item, cette Entity sera collectée et supprimée de la scène actuelle.

2. Créer l'UI collectable

Maintenant, nous devons montrer au joueur qu'un objet a réellement été collecté.

Pour cela, nous allons créer une simple interface utilisateur qui affichera :

• l'icône de l'objet
• le nombre d'objets collectés
• le nombre total d'objets disponibles dans la carte

Pour commencer, accédez au Player Template et ajoutez un Interface component, spécifiquement un UI Element. Cet UI Element sera responsable de la construction de la partie visuelle de notre HUD.

À partir de cet élément, nous allons créer et configurer l'icône de l'objet collectable. Cette icône servira de base visuelle pour afficher les informations de collecte sur l'écran du joueur.

Dans l'onglet Basic de l'UI Element, nous pouvons configurer la position et l'échelle de l'icône.

En cliquant sur l'icône d'ancrage de la propriété de position, vous pouvez l'ancrer dans le coin inférieur gauche de l'écran.

Dans la configuration de l'échelle, gardez le point de référence verrouillé au centre et gardez les verrous de position et d'échelle actifs. Cela rend les valeurs relatives et aide la mise en page à s'adapter correctement à différentes résolutions d'écran.

Enfin, définissez la valeur de Layer à 2. Cela garantit que l'icône sera rendue au-dessus d'autres UI Elements de priorité inférieure.

Ajustez les valeurs de Scale jusqu'à ce que l'icône ait la taille que vous souhaitez.

Ensuite, utilisez les valeurs de Position pour la placer sur le côté gauche de l'écran, ou dans toute autre zone que vous préférez dans l'interface.

Ces paramètres vous permettent de contrôler précisément à la fois la taille et la position de l'élément dans le HUD.

Dans l'onglet Behaviour, nous pouvons supprimer le Default Style qui vient par défaut et ajouter une Texture personnalisée pour notre icône.

Vous pouvez également ajuster la couleur de Tint et la transparence de Alpha pour obtenir le résultat visuel que vous souhaitez.

L'option 9-Slice Scaling est utilisée pour éviter la distorsion lorsqu'une image est étirée dans la mise en page. Lorsque cette option est activée, vous pouvez ajuster ses valeurs selon les besoins de l'icône, en gardant l'image cohérente même lors du redimensionnement. Dans notre cas, nous n'utiliserons pas la 9-Slice, puisque notre image est une icône.

Maintenant, créons 3 nouvelles Entities d'interface de type Text.

Elles seront responsables de l'affichage du nombre d'objets collectés et du nombre total d'objets disponibles dans la carte.

D'abord, renommez le premier Text en TextCollect. Ce texte affichera le nombre d'objets collectés par le joueur.

Ensuite, le deuxième Text contiendra uniquement le caractère “/”, servant de séparateur visuel entre les valeurs de l'UI.

Enfin, renommez le troisième Text en TextMax. Celui-ci représentera le nombre maximum d'objets disponibles dans la carte.

Accédez maintenant à l'onglet Text des UI Elements créés.

Dans cette section, il y a un champ où nous pouvons définir le contenu qui sera affiché à l'écran.

Pour les deux textes représentant les valeurs des objets, TextMax et TextCollect, gardons la valeur initiale à 0.

Le texte utilisé comme séparateur doit contenir uniquement le caractère “/”, séparant visuellement le montant collecté du montant total des objets.

Positionnons maintenant les textes de l'UI afin qu'ils soient organisés à côté de l'icône.

• Tout d'abord, positionnez TextCollect.
• Ensuite, placez le texte “/” juste après.
• Enfin, positionnez TextMax après le slash.

Ainsi, l'UI sera organisée comme un compteur de progression, affichant clairement quelque chose comme :

objets collectés / objets totaux

Par exemple :

0 / 10

Remarque : En alternative, vous pouvez également créer une seule Entity et concaténer les chaînes programmatiquement (via Logic Bricks) pour obtenir le même résultat.

3. Créer la logique du compteur d'objets

Maintenant, nous devons faire en sorte que l'UI reflète les objets collectés.

Pour le moment, l'objet peut être retiré de la scène, mais l'UI ne sait toujours pas que le Joueur a collecté quoi que ce soit. Nous allons donc mettre en œuvre la logique du compteur.

D'abord, retournez au Player Logic Brick et créez une nouvelle propriété appelée Collected Item, de type Int.

Cette propriété stockera combien d'objets le Joueur a collectés pendant le jeu.

La valeur initiale de cette propriété devrait être 0.

Dans la logique du Joueur, juste après le nœud Kill qui retire l'objet collecté, nous créerons la logique responsable de la mise à jour du compteur d'objets.

D'abord, obtenez la propriété Collected Item.

Ensuite, ajoutez +1 à sa valeur actuelle.

Enfin, définissez le résultat à nouveau dans la propriété Collected Item.

De cette façon, chaque fois que le Joueur collecte un objet, la valeur de Collected Item augmentera de 1, gardant le compteur à jour.

Cependant, cette valeur est encore seulement stockée dans la propriété. Maintenant, nous devons l'afficher dans le texte de l'UI.

Juste après cela, continuez la logique en connectant le flux de Set Collected Item à un nœud Set Text.

Ce nœud sera responsable de la mise à jour du texte affiché dans l'interface.

Pour utiliser Set Text, nous devons fournir deux choses :

• le UI Element Component qui aura son texte mis à jour
• la nouvelle valeur de texte

Puisque les textes ont été créés comme enfants du Joueur, nous pouvons y accéder directement à travers la hiérarchie des Entities.

Pour ce faire, utilisez Entity, puis Get Child, en spécifiant le nom de l'objet texte. Activez l'option Recursive pour vous assurer que la recherche se fait également à l'intérieur des enfants des enfants du Joueur.

Ensuite, obtenez le UI Element Component de l'Entity qui a été trouvée.

Pour la valeur du texte, obtenez la propriété Collected Item, convertissez-la en String, et connectez-la à Set Text.

De cette façon, le texte de l'UI sera automatiquement mis à jour avec la même valeur stockée dans la propriété du Joueur.

Maintenant, faisons également en sorte que le texte représentant le nombre total d'objets fonctionne.

Toujours dans les Logic Bricks du Joueur, créez une nouvelle propriété appelée Max Item, de type Int.

Cette propriété stockera le nombre total d'objets collectables disponibles dans la carte.

Maintenant, pour stocker le nombre total d'objets dans la carte à l'intérieur de cette propriété, nous allons utiliser l'événement On Start du Joueur.

Cette valeur n'a besoin d'être calculée qu'une seule fois au début du jeu, car elle représente combien d'objets collectables existent dans la scène lorsque le jeu commence.

D'abord, obtenez la Scene du jeu.

Ensuite, utilisez le nœud qui retourne toutes les Entities dans la scène filtrées par la balise item. Puisque cette balise est présente uniquement dans nos objets collectables, cela retournera la liste de tous les collectables dans la carte actuelle.

Avec cette liste d'Entities, utilisez le nœud Size.

Le nœud Size retourne le nombre total d'éléments dans la liste en tant qu'entier. Cette valeur représente exactement combien d'objets existent dans la carte.

Enfin, définissez ce résultat dans la propriété Max Item, en veillant à ce que le jeu commence avec le bon nombre total d'objets collectables stockés dans la propriété.

Maintenant, il ne nous reste plus qu'à envoyer cette valeur au texte de l'UI.

Pour ce faire, nous allons utiliser la même logique que pour Objet Collecté.

Obtenez la propriété Max Item, convertissez la valeur en String, et connectez-la au nœud Set Text.

Ensuite, accédez à l'Élément UI correspondant au texte maximum des objets en utilisant la hiérarchie du joueur avec Get Child, en tapant le nom correct et en activant Recursive si nécessaire.

Enfin, connectez ce composant d'Élément UI à Set Text.

De cette manière, le nombre total d'objets sera correctement affiché dans l'interface du joueur.

À ce stade, le système d'objet collectable est fonctionnel.

Le joueur peut détecter les objets collectables en utilisant le tag item, les retirer de la scène, augmenter le compteur d'objets collectés, et mettre à jour l'interface utilisateur pour afficher à la fois la quantité collectée et le nombre total d'objets disponibles sur la carte.