Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. 2D Games
Code

Crafty au-delà des bases: Les collisions

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Crafty Beyond the Basics.
Crafty Beyond the Basics: Sounds and Scenes

French (Français) translation by fredpiK (you can also view the original English article)

Dans un jeu, il est primordial de détecter correctement les collisions. Personne n'aime jouer à un jeu où les choses se mettent à exploser, alors qu'elles sont distantes de plusieurs pixels. Avec les graphismes et les sons, c'est une chose supplémentaire que vous devez essayer de traiter avec le maximum de précision.

Dans ce tutoriel, vous allez apprendre à détecter et débugger les collisions en détails.

Détecter et ignorer les impacts

Avant de détecter les collisions, vous devez ajouter le composant Collision à une entité. Ce composant détectera avec succès une collision entre deux polygones convexes. Ce composant gère deux événements: HitOn et HitOff. L'évènement HitOn est déclenché quand une collision se produit. Il ne sera pas déclenché à nouveau à moins que les collisions de ce type spécifique cesse. L'évènement HitOff est déclenché quand une collision cesse.

Si vous testez des collisions entre de multiples composants et que toutes ces collisions se produisent simultanément, chacune d'elles déclenchera son propre évènement HitOn. Les données reçues depuis un évènement de collision restent valides aussi longtemps que la collision dure.

Vous pouvez utiliser la méthode .checkHits() pour effectuer des tests de collision d'un composant donné avec toute entité. Appeler cette méthode plusieurs fois ne créera pas de tests redondants.

Gardez à l'esprit que les tests d'impact sont déclenchés au début de chaque nouvelle image. Supposons qu'il y a deux objets qui n'ont pas été en collision au moment où le test est lancé. Maintenant, si un des deux objets se déplace vers une nouvelle position et se superpose au second objet plus tard dans la même image, l'évènement ne sera pas déclenché avant le prochain test de collision de l'image suivante.

Si vous devez détecter seulement la première collision entre deux entités différentes, vous pouvez utiliser la méthode .ignoreHits(String componentList). La variable componentList est une liste de composants séparés par des virgules pour lesquels vous ne souhaitez pas détecter les collisions. Quand aucun argument n'est fourni, cela désactivera la détection de collision pour toutes les entités. Voici un exemple:

Vous pouvez voir que Crafty non seulement détecte l'évènement HitOn, mais aussi le HitOff. C'est pour cette raison que la couleur de la grande boite ne retourne pas au noir.

Une autre méthode similaire, appelée .resetHitChecks(String componentList) peut être utilisée pour tester à nouveau les collisions entre deux composants spécifiques. Cette méthode continuera à déclencher l'évènement HitOn tant que la collision dure.

Débugger les Collisions

Quand les éléments se déplacent en permanence, il est difficile de voir si les collisions sont détectées au bon moment. Dans la démo ci-dessus, il semble que l'évènement HitOn est déclenché légérement avant l'évènement réel. Crafty vous donne la possibilité de tracer les "HitBox" autour des entités de manière à pouvoir voir ce qui se passe.

Il y a deux composants prévus pour le débogage. Ce sont WiredHitBox et SolidHitBox.

Le premier vous permettra d’utiliser la méthode .debugStroke ([String strokeColor]), qui va tracer un contour de l’entité avec une couleur donnée. Lorsque aucune couleur n’est fournie, la couleur rouge est utilisée pour dessiner le contour.

De même, le deuxième composant permet de remplir les entités avec couleur donnée, à l’aide de la méthode .debugFill ([String fillStyle]). Lorsque aucune couleur n’est fournie, la couleur rouge est utilisée. Voici une démo avec la méthode .debugStroke().

Création d’une Hit Box personnalisée

Vous pouvez également créer une Hit Box personnalisée pour la détection de collision. Ceci est utile lorsque vous utilisez dans votre jeu des sprites d’image non rectangulaires. La méthode .collision(), que vous pouvez utiliser pour créer une zone personnalisée, accepte un paramètre unique utilisé pour définir les coordonnées de la nouvelle Hit Box.

Ces coordonnées peuvent être renseignées sous la forme d’un objet polygone, un tableau de coordonnées x, y ou une liste de coordonnées x, y. Les points du polygone sont notés dans le sens horaire, et ils sont positionnés par rapport à l’état sans rotation de notre entité. La zone de contact personnalisée se tournera automatiquement lorsque l’entité pivotera.

Il y a quelques choses que vous devez garder à l’esprit lorsque vous utilisez des zones de contact personnalisées. La zone que vous définissez doit former un polygone convexe pour que la détection de collision fonctionne correctement. Pour ceux qui ne connaissent pas le terme, un polygone convexe est un polygone dont tous les angles intérieurs sont inférieurs à 180°. Vous pourriez également constater une légère baisse des performances lorsque la zone de contact que vous avez définie se situe en dehors de l’entité elle-même.

La zone de contact personnalisée que vous avez définie n’aura aucun effet, sauf si vous ajoutez le composant Collision à toute entité avec laquelle votre zone doit détecter une collision.

Dans la démo ci-dessus, nous avons défini une Hit Box personnalisée qui se trouve à l’extérieur de la boîte orange. Comme vous pouvez le voir, le gros bloc vire au bleu uniquement lorsqu’il entre en collision avec le triangle. La position de la boîte orange n’entre pas en compte.

Jetons un œil à un autre exemple qui utilise un vaisseau spatial de Gumichan01. La Hit Box par défaut pour le vaisseau spatial est la limite du sprite lui-même. Dans le scénario actuel, le coin supérieur droit du vaisseau spatial touche le bloc en premier, mais cet espace est en réalité vide. Pour les utilisateurs de votre jeu, c’est un mauvais cas de détection.

Ce que vous pouvez faire ici, c’est définir votre propre zone de contact à l’aide d’une forme triangulaire semblable au code suivant. Le polygone de détection personnalisé que vous définissez peut autant de côtés que vous le souhaitez. Assurez-vous juste que c’est toujours un polygone convexe.

Conclusion

Après avoir terminé tous ces tutoriaux, vous devriez être capable de créer vos propres petits jeux avec de superbes graphismes, des bruitages sympas, et la détection des collisions. Je dois vous rappeler que j’ai utilisé la version 0.7.1 de Crafty dans ce tutoriel, et les démonstrations peuvent ne pas fonctionner avec d’autres versions de la bibliothèque.

JavaScript s'est imposé comme une évidence parmi les langages pour travailler sur le web. Il n’est pas sans une certaine courbe d'apprentissage et il y a beaucoup de frameworks et de bibliothèques pour vous occuper. Si vous cherchez des ressources supplémentaires pour étudier ou pour utiliser dans votre travail, regardez ce que nous avons de disponible sur le marketplace Envato.

Si vous avez des questions, faites le moi savoir dans les commentaires.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.