Mettre le sprite face à la direction de la souris

9

Je construis un jeu de toile html5 et j'ai besoin d'un moyen pour que mon sprite fasse face au curseur de la souris. J'ai les coordonnées X et Y pour le sprite, ainsi que les coordonnées X et Y du pointeur. Tout ce avec quoi je suis coincé, c'est le calcul nécessaire pour que le sprite fasse face au pointeur. Tout est dans un monde 2D, donc je ne peux pas imaginer que ce sera trop compliqué, mais j'ai très peu d'expérience avec ce genre de choses.

De plus, tout lien utile vers des articles / articles de blog sur ce genre de choses serait génial (programmation de jeux 2D en général, pas spécifiquement Javascript).

Pour ajouter, je dois noter que j'ai besoin d'un angle en degrés qui me dirigera vers le curseur en utilisant sa position X et Y.

Comment puis-je connaître les coordonnées du curseur et où dois-je mettre tout ça?

2d html5 html-canvas Robinson
la source
Salut, j'ai eu un problème similaire à vous avec le tir à l'arc. Consultez mon blog, si vous le souhaitez: yannbane.blogspot.com .
jcora
doublon possible d' Orientation d'une figurine pour faire face à une cible
Nicol Bolas

Réponses:

11

Ne connaissant pas les API à votre disposition, voici les mathématiques de base pour obtenir un angle en degrés:

angle = math.atan2(y2 - y1, x2 - x1) * 180 / math.pi;

Le * 180 / math.pi;convertit de radians en degrés.

William Mariager
la source
3
Notez que l'angle produit par atan2suppose que le système de coordonnées est + x à droite et + y vers le haut . Si le vôtre descend, alors vous devrez annuler l'angle. Cela suppose également que l'objet fera face à la direction (1, 0) (à droite) lorsque l'angle est égal à 0. S'il fait face à une direction différente, vous devez alors compenser l'angle. Ma réponse ici explique comment procéder.
Nicol Bolas