Dev Faq
7
votes

Comment créer des obstacles en toile

J'essaie de faire un simple plateforme comme jeu. Le code que j'utilise est présenté ci-dessous

p> 

<canvas id="game" width="1000" height="600" style="border:1px solid #000;"></canvas>

10 commentaires

C'est un problème courant dans le développement de jeux. Vous devez calculer où le joueur sera dans la trame suivante et vérifier s'il est passé un collisionneur, si oui, faites-la entrer en collision. En outre, je ne vérifierais pas la collision pour chaque collisionneur, mais seulement ceux qui se trouvent dans une distance donnée, sinon vous pourriez bientôt avoir des problèmes de performance.

Ouais je vais essayer comme ça merci @jonasgrumann

Vous avez plus de 8k représentant sur afin de ne pas savoir comment créer un MCVE ?

Désolé si je ne l'ai pas fait clairement @Hind le plus à quoi d'autres devrais-je ajouter?

Il s'agit d'un sujet très large, couvrant des livres complets et vous devriez rencontrer des termes tels que des boîtes de liaison ou des cercles de liaison, une phase large et une phase étroite et un tas d'autres termes dans votre recherche. Si vous souhaitez trouver votre réponse sur le réseau Stack Exchange, un bon départ est un bon départ est Comment fonctionne un moteur de collision? sur GameDev SE.

Merci @goléztrol je vais sûrement regarder ça

J'utilise un moteur de jeu appelé Phaserjs pour mes jeux basés sur les navigateurs 2D. Sa source est sur GitHub. Tandis que d'autres mentionnent de bonnes façons de résoudre le problème en regardant le Moteurs de physique Disponible en phase peut aider si vous souhaitez rouler le vôtre. EDIT: Je pense que le système d'arcade est noyau, les autres une bibliothèque distincte tirée. Mais je pourrais me tromper à ce sujet.

@ ste2425 bonjour merci pour cela je l'essaie de sortir

@Akshay super trucs. Sur une pièce d'identité de la note de côté complètement non liée, jetez un coup d'œil à demandanimationframe Over seinterval pour votre jeu si possible.

Je changerai certainement à demandanimationframe @ ste2425

3 Réponses :

1
votes

Ce que vous vivez est généralement appelé tunneling.

Il y a de Lot fort> de différentes façons de le résoudre, mais le plus facile est généralement de sauver la dernière position et de faire l'une des opérations suivantes. p>

a fort> p>

Calculez une nouvelle boîte de collision plus grande pour chaque élément, contenant la dernière position de l'élément et c'est nouveau. Pensez à cela comme une boîte contenant votre élément deux fois. Une fois pour sa dernière position (LP) et une pour sa nouvelle position (NP), P> 

 ____
| LP |      
|____||      
  ---- |___ 
   |___|NP |
      |____|

1 commentaires

Merci j'essaye et j'ai presque réussi à le faire fonctionner

1
votes

Eh bien, j'ai fait une "calculatrice de collision" il y a plusieurs mois, vous pouvez donc changer et utiliser le code ci-dessous comme vous le souhaitez :) Pour une meilleure explication:

  • p_x est la dernière position du lecteur x plus sa largeur
  • p_y est la position du dernier joueur Y plus sa hauteur
  • p_x_m est la dernière position du lecteur x
  • p_y_m est la dernière position du lecteur Y
  • Y_M est une nouvelle position du joueur (son Y - quelqueévalue)
  • x_m est une nouvelle position du joueur (son x - quelqueévalue)
  • y_p est la nouvelle position du joueur (son Y + Quelquevalue + sa hauteur)
  • Y_P_M est une nouvelle position du joueur (son Y + Quelquevalue)
  • x_p est la nouvelle position du joueur (son x + quelqueévalue + sa largeur)
  • x_p_m est une nouvelle position du joueur (son x + quelque évalue)
  • w_x est la position murale x
  • w_y est la position murale y
  • w_w est wall largeur

  • w_h est hauteur murale

  • pressékeys est une chaîne racontant quelle touche lecteur pressée (par exemple "était" ou "wd" ou "ad", etc.)

  • this.walls est une variable avec des murs (par exemple si j'ai 4 murs, le tableau ressemblerait à [faux, 's', false, false, faux] Parce que j'ai touché deuxième mur avec la touche "S").

    code: xxx

    commentaires sur le côté droit du code montre comment le joueur est en collision.

    Ce code 100 % Travaille, je l'utilise à chaque fois que je veux vérifier la collision.

    J'espère que cela a aidé un peu :)

1 commentaires

Salut merci pour votre aide, bon code que vous avez (un peu complexe) je vais l'essayer

5
votes

Il existe une complication lorsque des objets de test de collision qui se déplacent rapidement forts>

Vous devez déterminer si votre lecteur et votre obstacle intersecté à à tout moment forte> pendant le déplacement em> - Même si le joueur a dépassé l'obstacle d'ici la fin du mouvement. Par conséquent, vous devez prendre en compte le chemin complet que le lecteur est passé du début à la fin du déplacement. P>

Entrez la description de l'image ici ... Entrez la description de l'image ici a> p>

alors vous pouvez vérifier si le joueur a déjà intersecté l'obstacle pendant le mouvement en vérifiant si la piste du joueur coupe l'obstacle. p>

Entrez la description de l'image ici A > p>

une méthode relativement efficace pour tester les collisions impliquant des objets de déplacement rapide forts> p>

  1. Définissez les 3 segments de ligne qui connectent les 3 sommets du rectangle de départ du joueur le plus proche du rectangle de fin du joueur. LI> ol>

    Entrez la description de l'image ici p>

    1. Pour l'une des 3 lignes qui recoupent un obstacle, calculez la distance du segment de ligne à l'obstacle. Sélectionnez la ligne qui a la distance la plus courte entre le sommet de départ et l'obstacle. Li> ol>

      Entrez la description de l'image ici Entrez la description de l'image ici P>

      1. Calculez les distances "x" et "y" du segment de ligne sélectionné. P> 

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Drag start & end player position rects<br>The shortest segment intersecting the obstacle is red.<br>The repositioned player is shown on the obstacle.</h4>
<canvas id="canvas" width=400 height=400></canvas>

      2. Déplacez le joueur de leur position de départ par la distance calculée dans # 3. Cela se traduit par le joueur qui se déplace sur place où il est entré en collision d'abord avec l'obstacle. P> 

        body{ background-color: ivory; }
#canvas{border:1px solid red; }

2 commentaires

@marke bonne réponse. Je voudrais simplement faire un commentaire sur la façon dont vous retournez des valeurs de la ligne interception et de la piste. Plutôt que de créer un nouvel objet pour chaque appel (une allocation de mémoire et une surcharge de GC) Ajoutez la structure de retour en tant que dernier argument en option, par exemple, LineintC (P1, P2, P3, P4, Point) {if (point == = indéfini) {point = {x: null, y: null};} alors point.x = // réponse x; point.y = //answer.y; Point de retour; qui économisera beaucoup de temps de processeur par appel si le point est fourni. C'est juste un point trivial, car la réponse est excellente.

Merci :-) Oui, le passage des valeurs par argument de référence est plus efficace - en particulier parce que le test de collision est probablement appelé souvent et avec plusieurs obstacles.

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO