Alors je fais un jeu de la Tower Defense avec HTML5 et JavaScript. Mon seul problème est de détecter lorsque la souris entre en contact avec la voie de l'attaquant, qui est nécessaire pour arrêter le joueur des tours de construction sur le chemin. Le chemin des attaquants est déterminé dans le fichier carte.js (voir le lien en bas), par un tableau de deux dimensions (un tableau contenant des paires x et y), ce que je dois travailler avec est une série de points qui constituez un chemin lorsqu'il est connecté. Je veux simplement interdire au joueur de placer des tours à l'intérieur, disons, 50 pixels du chemin. Pour être honnête, je suis juste affreux avec la détection de collision, alors certaines aide seraient grandement appréciées.
Voici le lien vers tout le code: http://shapaifting.comuv.com/tower_defense/td/
Comme vous pouvez l'imaginer, seuls les fichiers .js sont applicables, mais la plupart du code correspondant est dans le fichier Objets.js. (Veuillez excuser le désordre)
3 Réponses :
Je voudrais aborder cela par étapes. Regardons ce que vous commencez avec. Vous avez un chemin défini par des points - paires de points définissent un segment de ligne. Donc, ce que vous avez vraiment, c'est un chemin composé de segments de ligne. Lorsque l'utilisateur déplace la souris, vous obtiendrez des coordonnées X, Y de la position actuelle. Ce que vous voulez faire, c'est trouver la distance de la souris sur tous les segments de ligne. S'il est inférieur à 50 pixels de n'importe quel segment de ligne, vous ne voulez pas leur permettre de construire là-bas.
Pour trouver la distance entre un point et un segment de ligne, le code pseudo ressemble à ceci. Supposons que les points A et B représentent les deux extrémités d'un segment de ligne et le point C est le point de la souris. Ceci répondrait à votre question de détection de collision, mais je pense que vous pourriez alors vouloir regarder la performance. Combien de segments de ligne seront sur votre chemin et souhaitez-vous calculer la distance à chaque segment de ligne chaque fois que l'utilisateur déplace sa souris? Vous pouvez mettre les segments de ligne dans un quadtree afin que vous ne deviez que tester des collisions de point de souris contre un nombre plus petit de segments de ligne.
Il est probablement plus simple et plus rapide de définir les zones que l'utilisateur peut placer des tours dans le fichier de carte ... Définissez chaque zone sous forme de polygone convexe (y compris de manière possiblement les bords de la carte, des polygones concaves fractionnés, préfèrent les lignes horizontales ou verticales. , puis le test de la souris est dans l'un des polygones, voir cette réponse pour une implémente
Comment tester si un point est à l'intérieur d'un polygone convexe dans les coordonnées entier 2D?
la décomposition aux triangles rend le test encore plus simple
L'utilisation de carrés est probablement la plus simple, qui vous ramène à l'idée de la grille.
La détection de collision est l'un de ces anciens problèmes cachés de codage d'un jeu. Généralement, les gens prennent l'approche de DarkPenguin de précalclement de la manière de la manière de votre carte statique et ne sont pas placables. La prochaine étape consiste à proposer un moyen de spécifier la carte de collision la plus efficace.
Vous ne voulez pas que votre jeu fasse une tonne de mathématiques en réponse à l'utilisateur déplaçant leur souris - il doit être court et rapide - donc précalculer jusqu'à quelque chose de rapide est critique.
Si votre carte est une grille, vous avez votre réponse à droite - la carte de collision est une matrice 2D précalculée - essentiellement une très petite image noire et blanche avec un pixel pour chaque lieu de la grille. Les pixels blancs (1) sont placables et des pixels noirs (0) ne sont pas. Vous venez d'utiliser ce tableau 2D de True / False à titre de recherche. Si vous souhaitez enregistrer la mémoire, vous pouvez regrouper chaque bande de 32 espaces sur la grille en un drapeau unique.
Si votre carte n'est pas une grille, vous voulez toujours précalculer les choses, mais la stratégie est un peu plus complexe. La première possibilité est d'effectuer des mathématiques comme HITESH pour produire une carte de collision légèrement supérieure à résolution, puis le reste est exactement comme la stratégie de la grille - par exemple si chaque bloc de pixels de 4x4 était une entrée en collision, alors si une tour peut être une tour Placé est un test quant à la question de savoir si ses coordonnées testez-vous sur suffisamment de 1 - Vous pourriez avoir besoin de 100% des tests être 1, ou vous risquez de les laisser atteindre un peu et que 75% des tests soient 1.
Si cela n'est toujours pas suffisant, vous pouvez faire ces tests de polygone plus complexes, mais vous voulez qu'ils soient aussi simples que possible. Lorsque vous n'utilisez pas une grille précalculée, le test de collision 2D le plus simple est de 2 cercles - vous calculez simplement la distance entre leurs centres et vérifiez s'il est plus grand ou moins que la somme de leurs rayons. Si vous précalculez votre chemin de monstre dans une traînée de cercles, la prochaine étape consiste à partitionner ces cercles dans ... Devinez quoi ... une grille. Cela empêche chaque chèque de devoir tester chaque cercle sur la carte. Cela vous permet d'avoir un nombre élevé de ces cercles dans la carte de collision, car le test de collision est d'abord une recherche sur les entrées de la grille La tour est actuellement terminée, suivie de la vérification si elle est en collision avec juste les cercles, plutôt que toute la carte. Il est important de noter que cette grille précalculée de listes de cercle aura souvent le même cercle dans plusieurs entrées de réseau voisin, car chaque entrée de grille contenant une partie d'un cercle donné doit avoir ce cercle dans sa liste de contrôle de collient.
L'une des bonnes choses sur les 2 premières approches de la grille est qu'il est très facile de vous assurer que vous-même - stockez littéralement la carte de collision comme une image et inspectez-la visuellement pour vous assurer que la carte est basée sur la carte. Vous pouvez également le dessiner à la main si vous ne voulez pas écrire le code pour les générer.
L'approche du cercle vous donne des courbes légitimes et peut conduire à de plus en détail de bord de collision, mais il est évidemment plus difficile de tester et d'éviter que aucune carte n'a de mauvaises cartes de collision. C'est également plus de travail pour écrire l'outil de génération de cartes.
bonne chance!