Definir sprite para enfrentar a direção do mouse


9

Estou construindo um jogo de tela html5 e preciso de uma maneira de fazer meu sprite encarar o cursor do mouse. Eu tenho as coordenadas X e Y para o sprite, e também as coordenadas X e Y do ponteiro. Tudo o que estou preso é a matemática envolvida para fazer o sprite encarar o ponteiro. É tudo em um mundo 2D, então não consigo imaginar que seja muito complicado, mas tenho muito pouca experiência com esse material.

Além disso, qualquer link útil para artigos / posts sobre esse tipo de coisa seria incrível (programação de jogos 2D em geral, não especificamente Javascript).

Para adicionar, devo observar que preciso de um ângulo em graus que me aponte para o cursor usando sua posição X e Y.

Como posso saber as coordenadas do cursor e onde coloco tudo isso?


Olá, tive um problema semelhante ao seu, com o tiro com arco. Confira meu blog, se você quiser: yannbane.blogspot.com .
jcora

Respostas:


11

Sem conhecer as APIs à sua disposição, aqui está a matemática básica por trás da obtenção de um ângulo em graus:

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

O * 180 / math.pi;converte de radianos em graus.


3
Observe que o ângulo produzido por atan2assume que o sistema de coordenadas é + x para a direita e + y para cima . Se o seu cair, você precisará negar o ângulo. Ele também assume que o objeto estará voltado para a direção (1, 0) (direita) quando o ângulo for 0. Se estiver voltado para uma direção diferente, será necessário compensar o ângulo. Minha resposta aqui explica como fazer isso.
Nicol Bolas
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.