Forums Développement Multimédia

Aller au contenu

- - - - -

Cordes en JS

CODE javascript

2 réponses à ce sujet

#1 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7010 messages

Posté 27 November 2016 - 14:56 PM

Bonjour,

D'habitude je cherche un peu tout seul, mais c'est pour un truc perso pour lequel j'ai peu de temps et je me suis dit que ça pouvait intéresser du monde de réfléchir sur un petit truc... alors je vais vous mettre à contribution :)

Voilà, je suis en train de monter un petit moteur de jeux à base de tuiles (oui, encore !) en Javascript. Je me suis dit qu'il était temps de me faire une petite lib sympa et perso pour monter ce que je voulais, j'y suis presque mais il me manque quelques petites choses pour parfaire le tout.

Un des trucs qui me manque c'est la création de cordes auxquelles le joueur peut s'agripper pour éviter un obstacle ou traverser un ravin. Je sais comment faire, je le faisait avec AS3, mais je cherche une solution plus optimisée, même si elle passe par des méthodes plus complexes.

Image attachée: prototype-rope.gif

La méthode classique passe par un ensemble de segments utilisant de la cinématique inverse, chaque segment possédant une hitbox, le tout étant animé via un peu de physique élémentaire. Ce n'est pas super compliqué à coder, mais ça me semble peu optimisé si pour chaque corde je dois gérer un ensemble d'objets reliés avec chacun sa hitbox.

Image attachée: 051.png

Dans un autre genre on peut aussi utiliser des cercles au lieu de segments, ceci permet d'obtenir un peu plus de précision, mais demande d'ajouter des collisions Cercles/AABB, pas très complexe, mais là encore je trouve que ça fait beaucoup d'objets à gérer pour une simple corde.

Image attachée: gravitus.png

Je suis donc parti sur l'idée d'un pendule simple avec une animation orientée en fonction du déplacement du pendule, ceci pour conserver une hitbox unique et assez grande pour faciliter les actions du joueur (s'y agripper, monter, descendre, tirer, sauter de corde en corde, ect...). Mais le problème, oui il y en a sinon ce serait trop beau, c'est que je ne suis du coup plus dans le cas de collisions AABB (Axis Aligned Bounding Box), ce qui m'oblige à composer une détection de collision spéciale pour les cordes et je perds l'optimisation que m'apporte l'idée du pendule...

Image attachée: Moving-animated-clip-art-picture-of-pendulum-x-bpm-1.gif

Mon moteur est basé pour le moment sur des collisions simples entre AABB (et à la limite de Cercles/AABB).

Image attachée: 400px-Aabb.png

J'aimerai donc trouver une astuce qui m'évite d'avoir à coder des collisions plus complexes que des AABB et utiliser de nombreux objets pour une simple corde. Si je ne trouve pas je coderai ma corde avec les méthodes classiques, je penche pour celle avec des cercles qui me semble être la plus souple, mais j'essaye de trouver une solution plus maline.

Des idées, des bouts de code ?

Je vais continuer à réfléchir de mon côté mais si vous avez des infos ça peut m'intéresser et me faire gagner du temps.

#2 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7010 messages

Posté 27 November 2016 - 17:02 PM

Pour ceux que ça intéresse, voici un début d'implémentation simple de la méthode via segments.
Reste à gérer les collisions avec le personnage.


[edit] j'ajoute la version sans la souris avec effet pendule

Fichier(s) joint(s)



#3 archiroc

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 259 messages

Posté 27 November 2016 - 20:31 PM

C'est volontaire le dernier segment plus long que les autres alors que la logique souhaiterait le contraire ?
Même si rien à voir avec le sujet....




Répondre à ce sujet



  

1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP