Share
Il est très important dans un jeu que vous détectiez correctement les collisions. Personne ne va jouer à un jeu où les choses commencent à exploser même quand elles sont séparées de plusieurs pixels. Outre les graphismes et les sons, c’est une chose de plus que vous devriez essayer de garder aussi précise que possible..
Dans ce tutoriel, vous allez apprendre à détecter et à déboguer les collisions en détail..
Avant de pouvoir détecter des collisions, vous devez ajouter le Collision composant à une entité. Ce composant détectera avec succès une collision entre deux polygones convexes quelconques. Ce composant a deux événements: HitOn et HitOff. le HitOn L'événement est déclenché lorsqu'une collision se produit. Il ne se déclenchera plus à moins que les collisions de ce type ne cessent. le HitOff événement est déclenché quand une collision cesse.
Si vous recherchez une collision avec plusieurs composants et que toutes ces collisions se produisent simultanément, chaque collision se déclenche. HitOn un événement. Les données reçues d'un événement de collision ne sont valides que tant que la collision a toujours lieu.
Vous pouvez utiliser le .checkHits () méthode pour effectuer des vérifications de collision avec toutes les entités avec un composant spécifié. L'appel de cette méthode à plusieurs reprises n'entraînera pas plusieurs vérifications redondantes..
N'oubliez pas que les vérifications sont effectuées lors de la saisie de chaque nouvelle image. Supposons qu'il y a deux objets qui ne sont pas encore entrés en collision lorsque la vérification est effectuée. Désormais, si l'un des objets se déplace vers un nouvel emplacement et chevauche le second objet plus tard dans la même image, les événements de hit ne seront pas déclenchés tant qu'une vérification de collision ne sera pas effectuée à nouveau dans l'image suivante..
Si vous ne devez détecter que la première collision entre différentes entités, vous pouvez utiliser le .ignoreHits (String ComponentList) méthode. le composantListe variable est une liste de composants séparés par des virgules avec lesquels vous ne souhaitez plus détecter les collisions. Lorsqu'aucun argument n'est fourni, la détection de collision avec toutes les entités sera arrêtée. Voici un exemple:
Accentsconagua
littleBox.bind ("HitOn", fonction (hitData) Crafty ("Obstacle"). color ('rouge'); this.ignoreHits ('Obstacle'););Vous pouvez voir que Crafty commence non seulement à détecter le HitOn événement mais aussi le HitOff un événement. C'est pourquoi la couleur de la grande boîte ne redevient pas noire.
Une autre méthode similaire appelée .resetHitChecks (String ComponentList) peut être utilisé pour vérifier à nouveau la collision entre des composants spécifiques. Cette méthode continuera à tirer le HitOn événement encore et encore tant que la collision se produit toujours.
Lorsque des entités se déplacent continuellement, il est très difficile de savoir si les collisions sont déclenchées au bon moment. Dans la démo ci-dessus, il semble que le HitOn événement se déclenche légèrement avant l'événement réel. Crafty vous donne la possibilité de dessiner des zones de frappe autour d'entités afin que vous puissiez réellement voir ce qui se passe.
Vous pouvez utiliser deux composants à des fins de débogage. Ceux-ci sont WiredHitBox et SoldHitBox.
Le premier composant vous permettra d’utiliser le .debugStroke ([String strokeColor]) méthode, qui va tracer un contour autour de l'entité avec une couleur donnée. Lorsqu'aucune couleur n'est fournie, la couleur rouge est utilisée pour dessiner le contour.
De même, le second composant est utilisé pour remplir les entités avec une couleur donnée en utilisant .debugFill ([String fillStyle]) méthode. Lorsqu'aucune couleur n'est fournie, la couleur rouge est utilisée. Voici une démo avec le .debugStroke () méthode.
Vous pouvez également créer une zone de résultats personnalisée pour la détection de collision. Ceci est utile lorsque vous utilisez des sprites d’image dans votre jeu qui ne sont pas rectangulaires. le .collision() La méthode que vous pouvez utiliser pour créer une zone de contact personnalisée accepte un seul paramètre utilisé pour définir les coordonnées de la nouvelle zone de résultat..
Ces coordonnées peuvent être fournies sous la forme d'un objet polygone, d'un tableau de paires de coordonnées x, y ou d'une liste de paires de coordonnées x, y. Les points du polygone sont marqués dans le sens des aiguilles d'une montre et ils sont positionnés par rapport à l'état sans rotation de notre entité. La zone de contact personnalisée se fera automatiquement pivoter lorsque l'entité pivote.
Vous devez garder à l’esprit quelques points lorsque vous utilisez des zones d’attaque personnalisées. La zone active 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 pouvez également constater une légère dégradation des performances lorsque la zone de contact que vous avez définie se situe en dehors de l'entité elle-même..
La zone d’attaque personnalisée que vous avez définie n’aura d’effet que si vous ajoutez le Collision composant à chaque entité avec laquelle votre zone touchée a besoin de détecter une collision.
littleBox.collision (80, 0, 100, 100, 50, 100) .debugStroke ('green') .checkHits ('Obstacle');Dans la démonstration ci-dessus, nous avons défini une zone de résultats personnalisée située en dehors de la zone orange. Comme vous pouvez le constater, le gros bloc ne devient bleu qu'en entrant en collision avec le triangle. La position de la boîte orange n'a pas d'importance.
Jetons un coup d'oeil à un autre exemple qui utilise un vaisseau spatial de Gumichan01. La zone de résultats par défaut du vaisseau spatial est la limite de l'image-objet elle-même. Dans le scénario actuel, le coin supérieur droit du vaisseau touche le bloc en premier, mais cet espace est en fait vide. Pour les utilisateurs qui jouent à votre jeu, il s'agit d'un cas de détection de mauvaise collision.
Ce que vous pouvez faire ici est de définir votre propre zone de contact en utilisant une forme triangulaire comme le code suivant. Le polygone de zone de contact personnalisé que vous définissez peut avoir autant de côtés que vous le souhaitez. Assurez-vous qu'il s'agit toujours d'un polygone convexe.
spaceShip.collision (8, 0, 0, 48, 70, 48);
Après avoir terminé tous ces tutoriels, vous devriez maintenant pouvoir créer vos propres petits jeux avec de superbes graphismes, de beaux effets sonores, des scènes et une détection de collision. Je dois vous rappeler que j'ai utilisé la version 0.7.1 de Crafty dans ce tutoriel et que les démos risquent de ne pas fonctionner avec d'autres versions de la bibliothèque..
JavaScript est devenu l'un des langages de facto du travail sur le Web. Ce n'est pas sans apprendre les courbes, et il y a beaucoup de cadres et de bibliothèques pour vous tenir occupé, aussi. Si vous recherchez des ressources supplémentaires à étudier ou à utiliser dans votre travail, consultez ce que nous avons à votre disposition sur le marché Envato..
Si vous avez des questions, faites le moi savoir dans les commentaires.
