Active olhar para o ponteiro do mouse

Oi pessoal, tudo bem? Faz tempo que não me pronuncio aqui hehe. Mas acabei tendo de mexer no MMF2 outro dia pra tirar uma dúvida via e-mail e me animei um pouco com a coisa (até comecei um pequeno projeto aqui). Daí, resolvi fazer uma matéria aproveitando o embalo.

Índice
1 - Introdução
2 - Preparando o Active Object
3 - Revisando trigonometria básica
4 - Traçando um plano antes de programar
--- 4.1 - A importância de traçar um plano de programação
--- 4.2 - Uma possível saída para o problema abordado
5 - O tão esperado editor de eventos
--- 5.1 - Evento do primeiro quadrante
--- 5.2 - Evento do segundo quadrante
--- 5.3 - Evento do terceiro quadrante
--- 5.4 - Evento do quadrante quadrante
6 - Finalizando

1 - Introdução:
Ensinarei, hoje, a fazer com que determinado objeto sempre "olhe" para o ponteiro do mouse. Os cálculos são relativamente simples. Usaremos a trigonometria básica, aprendida no oitavo ano do Ensino Fundamental. Os eventos ficarão um pouco poluídos, mas explicarei passo-a-passo. Com um pouco de atenção é possível entender tranquilamente.

2 - Preparando o Active Object:
As recomendações a seguir não precisam ser seguidas à risca, mas facilitarão os cálculos. Além disso, toda a matéria levará em consideração que o Active Object que olhará para o mouse foi configurado dessa forma. Contudo, é perfeitamente possível - e até mesmo recomendável, para fins de exercitação - fugir à essa configuração preestabelecida uma vez que tenha compreendido o raciocínio.

Então, vamos lá. Crie um Active Object qualquer e posicione-o de forma que, na direção direita (>), a parte que olhará para o Mouse fique a 0º e o HotSpot no centro. Nessa matéria, utilizarei um círculo de 32px de diâmetro, cuja parte que olhará para o ponteiro é uma linha de 3px de espessura que vai do centro até a borda.



Vamos adiante.

3 - Revisando trigonometria básica:
Antes de partir pros eventos, é bom revisar alguns conceitos. Infelizmente, não tenho tempo de explicar os detalhes. Só jogarei definições; o conhecimento acerca da aplicação matemática fica com vocês. Meu objetivo aqui será somente refrescar a memória de alguns. Contudo, é importante que todos saibam do que eu estou falando, senão não dá pra entender o raciocínio que empregarei posteriormente. Então, vamos aos conceitos.

Triângulo retângulo é um triângulo no qual um dos ângulos internos é reto (mede 90º). Os lados que formam o ângulo reto são chamados catetos, enquanto o lado oposto a ele se chama hipotenusa. Os lados de um triângulo retângulo relacionam-se entre si pelo Teorema de Pitágoras, no qual a soma dos quadrados dos catetos é igual ao quadrado da hipotenusa (Ca² + Cb² = H²). Já as relações entre ângulos e lados de triângulos retângulos são chamadas Relações Trigonométricas, das quais destacaremos uma para esta matéria: o seno de um ângulo, que é a razão entre o cateto oposto a esse ângulo num triângulo retângulo e a hipotenusa desse triângulo. O seno de um ângulo  será igual em qualquer triângulo. Isso significa que através de um seno qualquer, podemos descobrir seu ângulo correspondente, o que é feito com a função arco-seno.

Exemplo:
Analisemos o consagrado Triângulo 3-4-5.



Seus catetos são os lados AB [m(AB) = 3] e BC [m(BC) = 4]. A hipotenusa é o lado AC [m(AC) = 5]. Repare que 3² + 4² = 5². O seno do ângulo  pode ser dado pela medida do cateto oposto a ele (lado BC) dividido pela medida hipotenusa (lado AC). Portanto, sen = m(BC)/m(AC) => sen = 4/5. Calculando o arco-seno de 4/5, descobrimos que o ângulo  vale, aproximadamente, 53º.

Finalmente, hora de colocar a teoria na prática.

4 - Traçando um plano antes de programar:

4.1 - A importância de traçar um plano de programação:
Quando disse "colocar a teoria na prática", ainda não me referia aos eventos. Mas, sim, isso foi proposital. Eu queria que você, leitor, sentisse o impacto dessa etapa, ignorada e desprezada por tantos. Queria que você, leitor, percebesse que é aqui, nessa etapa, que surge o esqueleto da programação, e toda a teoria antes aprendida - não apenas a matemática, mas também a teoria da própria ferramenta utilizada - é colocada em prática a fim de esboçar um plano que permita, dentro das limitações da ferramenta, alcançar um objetivo. E essa é a tênue linha que separa um programador de um imitador. Se você quer ser o primeiro, continue lendo. Se quer ser o segundo - isto é, prefere continuar só repetindo o que os outros ensinam -, pois bem, pule para o item 5.

Irei expôr aqui a lógica por mim utilizada para chegar ao resultado (Active Object sempre olhar para o ponteiro do Mouse). Antes de mais nada, tenha em mente que existem várias formas de se chegar a um mesmo resultado. Cada programador traça seu próprio plano, com base nos seus conhecimentos, tanto físicos e matemáticos, quanto sobre a ferramenta que ele usa. Sendo assim, é bastante natural que outro programador encontre outro caminho, ou até mesmo vários outros. E é perfeitamente aceitável (e até muito bom) que você prefira utilizar um método próprio para chegar ao resultado. Contudo, se você está lendo essa matéria, é porque já tentou chegar a esse resultado, mas não conseguiu. Eu pensei nesse plano porque conhecia previamente todas as funções empregadas. Isso significa que se você não conhecia uma ou outra dessas funções, possivelmente já não conseguiria fazer a coisa do mesmo jeito que eu fiz. Entende o que quero dizer? Seu plano de programação é como uma redação. A conclusão a que todos devem chegar sobre determinado tema é praticamente a mesma, mas o conhecimento de mundo de cada um que sustentará o desenvolvimento pode ser completamente diferente.

Perceba, por fim, que toda essa matéria gira em torno do momento no qual irei expôr o plano que eu tracei. Para um bom programador, todo o resto - tanto o que veio antes, quanto o que vier depois - seria dispensável. Reflita um pouco: até o presente momento, eu ensinei qualquer coisa sobre fazer um Active Object olhar para o ponteiro do Mouse? De fato, não. Apenas introduzi a matéria, revisei alguns conceitos matemáticos e ressaltei a importância da etapa que você lê agora. Mas não ensinei propriamente o que prometi no título - ainda. E tenha certeza que, depois de expôr meu plano, também não estarei mais ensinando a vocês o que prometi, mas apenas mostrando aonde fica cada função utilizada no meu plano. Portanto, a partir daí, o que estarei ensinando a vocês é puramente MMF2. Coisa que vocês aprenderiam bem mais facilmente lendo o arquivo de ajuda do programa.

Nesse caso, por que estou falando tudo isso? Porque não só cheguei e joguei pra vocês os eventos necessários para fazer um Active olhar para o ponteiro do mouse? Porque se eu o fizesse, estaria incentivando a repetição. E não é isso que eu quero. Todos esses adicionais servem para você realmente aprender a fazer um Active olhar para o ponteiro do mouse, e não apenas decorar como fazê-lo. É como um professor de matemática que deve ensinar aos alunos Função afim: ele não pode ensinar isso sem antes mostrar a base (Conjuntos, Produto Cartesiano, Relações Binárias, Noções gerais de função etc). Se ele não mostrasse também a base, seus alunos simplesmente repetiriam mecanicamente o que ele faria sobre Função afim, sem entender nada.

Sem mais delongas, vamos ao meu plano.

4.2 - Uma possível saída para o problema abordado:
Bem, vamos lá. Em primeiro lugar, eu sei que existe uma ação no MMF2 chamada Set Angle. Sei também como ela funciona: conforme o ângulo do objeto aumenta, ele é girado no sentido anti-horário em torno de seu Hotspot. O ângulo 0º corresponde ao estado normal do objeto. Daí o motivo de, no editor de animações, posicionarmos seu Hotspot no centro e fazermos com que, na direção direita, ele olhe realmente para a direita. Utilizei a direção direita porque eu quis. Poderia ter usado qualquer uma, embora mudassem pequenos detalhes nos cálculos (uma vez assimilada a ideia, não será difícil fazer para outras direções). De qualquer forma, de agora em diante, por convenção, fica subentendido que todo o raciocínio se desenvolverá tendo como base a direção direita.

Então, usaremos a ação Set Angle. Excelente. Mas como determinar quanto o objeto deve rotacionar para que ele olhe para o Mouse? Simples. Analise a seguinte figura:



Perceba que há valores aí que podemos calcular. Percebeu? Não? Pois bem.



Percebeu agora? As linhas verdes representam os eixos X e Y. A vermelha, a distância mínima entre o hotspot do objeto e o mouse. E as azuis, as variações sofridas nos eixos X e Y até se chegar àquele ponto. O ângulo α é formado pelo eixo X e pela linha vermelha, enquanto o ângulo β é formado pelo eixo Y e pela linha vermelha. E, a partir de qualquer um desses ângulos, podemos descobrir quanto é necessário rotacionar o objeto para que ele olhe para o mouse! No caso, como utilizei por padrão a direção direita, e optei por usar a relação seno nessa matéria, é mais prático para mim usar o ângulo α (formado pelo eixo X e pela distância objeto-mouse).

Tudo bem. Usaremos a ação Set Angle. Confere. Sabemos qual ângulo fará o objeto olhar para o mouse. Confere. Mas como determinar o valor desse ângulo?

Agora, siga meu raciocínio. Podemos calcular facilmente tanto ΔX quanto ΔY. Para o primeiro quadrante, ΔX será a diferença entre a posição X do mouse e a posição X do objeto. Logo, ΔX = XMouse - XObj. Com ΔY é um pouco diferente, pois o eixo Y no plano computacional é invertido. Isso significa que, no primeiro quadrante, ΔY será dado pela diferença entre a posição Y do objeto e a posição Y do mouse - o contrário. Então, ΔY = XObj - XMouse. Contudo, isso vale apenas para o primeiro quadrante. Nos outros, os sinais podem ser diferentes. Para evitar isso, utilizaremos o módulo dessas diferenças, obtendo, assim, sempre valores positivos. Então, finalmente chegamos à seguinte conclusão: para qualquer quadrante, ΔX = |XMouse - XObj| e ΔY = |XMouse - XObj|. Adaptando isso para o padrão de expressões do MMF2, ΔX = Abs(XMouse - X("Nome do Active")) e ΔY = Abs(YMouse - Y("Nome do Active")).

Vamos, então, calcular a hipotenusa desses triângulos. Os dois triângulos da figura são congruentes, então não faz diferença qual você vai usar, o resultado é o mesmo. Usemos Pitágoras: (ΔX)² + (ΔY)² = [D(O, M)]². Isolando a hipotenusa: D(O, M) = √(ΔX)² + (ΔY)². Sabemos quanto vale ΔX e ΔY, então basta substituir na fórmula. Ficará assim (já usando o padrão do MMF2, e considerando o nome do Active Object como Active):
D(O, M) = Sqr((Abs(XMouse - X("Active"))*Abs(XMouse - X("Active")))+(Abs(YMouse - Y("Active"))*Abs(YMouse - Y("Active"))))+0.0
Observação: o 0.0 adicionado no final serve para o MMF2 interpretar que queremos o resultado quebrado. Caso contrário, ele arredonda o número, e precisamos do valor na forma mais original possível.

Ora, temos todos os 3 lados do triângulo! Podemos agora descobrir facilmente o seno de α! Sen α = ΔY/D(O, M). Colocando no padrão MMF2...
Sen α = (Abs(YMouse - Y("Active")))/(Sqr((Abs(XMouse - X("Active"))*Abs(XMouse - X("Active")))+(Abs(YMouse - Y("Active"))*Abs(YMouse - Y("Active"))))+0.0)

Finalmente, a partir do seno de α, podemos achar o valor de α com a função arco-seno.
ASen α = ASin((Abs(YMouse - Y("Active")))/(Sqr((Abs(XMouse - X("Active"))*Abs(XMouse - X("Active")))+(Abs(YMouse - Y("Active"))*Abs(YMouse - Y("Active"))))+0.0))

E a partir da fórmula acima, somos capazes de determinar o ângulo α! Mas calma lá... você não pode só jogar isso no editor de expressões. Lembre-se que esse é o ângulo formado entre o eixo X e a distância objeto-mouse. Jogar a fórmula tal qual está aí em cima só serviria pro primeiro quadrante. Nos outros, ele simplesmente ficaria alternando entre 0º e 90º. E queremos que nosso objeto rode de 0º a 360º. Talvez você não esteja entendendo muito bem o porquê, mas preste atenção no esquema abaixo:



Cada linha vermelha representa uma hipótese de onde o Mouse pode estar. Se ele estiver no primeiro quadrante, ótimo. Mas perceba que nos outros, o ângulo necessário para que ele olhe para o mouse já não é mais α. Embora possamos descobrir facilmente esses ângulos a partir de α.

Chamemos de θ o ângulo que o objeto precisa rotacionar para olhar para mouse. Repare o seguinte:
> No primeiro quadrante:
θ = α
θ = ASin((Abs(YMouse - Y("Active")))/(Sqr((Abs(XMouse - X("Active"))*Abs(XMouse - X("Active")))+(Abs(YMouse - Y("Active"))*Abs(YMouse - Y("Active"))))+0.0))

> No segundo quadrante:
θ = 180 - α
θ = 180-(ASin((Abs(YMouse - Y("Active")))/(Sqr((Abs(XMouse - X("Active"))*Abs(XMouse - X("Active")))+(Abs(YMouse - Y("Active"))*Abs(YMouse - Y("Active"))))+0.0)))

> No terceiro quadrante:
θ = 180 + α
θ = 180+(ASin((Abs(YMouse - Y("Active")))/(Sqr((Abs(XMouse - X("Active"))*Abs(XMouse - X("Active")))+(Abs(YMouse - Y("Active"))*Abs(YMouse - Y("Active"))))+0.0)))

> No quarto quadrante:
θ = 360 - α
θ = 360-(ASin((Abs(YMouse - Y("Active")))/(Sqr((Abs(XMouse - X("Active"))*Abs(XMouse - X("Active")))+(Abs(YMouse - Y("Active"))*Abs(YMouse - Y("Active"))))+0.0)))

Ou seja, para cada quadrante precisamos fazer pequenas alterações na fórmula a fim de encontrar o ângulo que rotaciona o objeto, fazendo com que ele olhe para o mouse.

E esse foi o plano que eu tracei. Difícil de explicar, mas uma vez que se entende, bastante rápido de se fazer. Fiz grande parte disso sem mesmo estar sentado em frente ao computador. A maior parte da lógica desenvolvi durante uma de minhas viagens em sala de aula (hehe). No dia anterior, um rapaz tinha me mandado várias dúvidas sobre como fazer certos tipos de jogos infantis interativos (ele trabalha com educação), e uma das atividades precisava, justamente, de rotação 360º. Daí, durante algumas aulas, acabei divagando e pensando sobre o assunto. Rascunhei, cheguei em casa e fiz poucos ajustes (como adaptar as fórmulas ao MMF2). E, justamente por isso, a coisa foi feita relativamente rápida. Eis a importância de pensar em um plano antes de começar a programar. Ressalto que não sou nenhum gênio. Na verdade, tenho poucas habilidades para matemática e programação. Mas seguindo o método correto, uma hora dá certo.

Por fim, vamos fazer os eventos!

5 - O tão esperado editor de eventos:
Acho que vou decepcionar muita gente aqui. Provavelmente a parte que muitos esperavam ansiosos após tanta dissertação. Feliz ou infelizmente, essa será a menor parte da matéria. As verificações de quadrantes foram feitas com combinações de condições Compare two general values (no grupo Specials).

5.1 - Evento do primeiro quadrante:
XMouse > XActive
YMouse < YActive
(Active) Set angle to ASin((Abs(YMouse - Y("Active")))/(Sqr((Abs(XMouse - X("Active"))*Abs(XMouse - X("Active")))+(Abs(YMouse - Y("Active"))*Abs(YMouse - Y("Active"))))+0.0))

Se o ponteiro do Mouse estiver à direita e acima do Hotspot do Active Object (primeiro quadrante), aplicamos a fórmula do primeiro quadrante.

5.2 - Evento do segundo quadrante:
XMouse < XActive
YMouse < YActive
(Active) Set angle to 180-(ASin((Abs(YMouse - Y("Active")))/(Sqr((Abs(XMouse - X("Active"))*Abs(XMouse - X("Active")))+(Abs(YMouse - Y("Active"))*Abs(YMouse - Y("Active"))))+0.0)))

Se o ponteiro do Mouse estiver à esquerda e acima do Hotspot do Active Object (segundo quadrante), aplicamos a fórmula do segundo quadrante.

5.3 - Evento do terceiro quadrante:
XMouse < XActive
YMouse > YActive
(Active) Set angle to 180+(ASin((Abs(YMouse - Y("Active")))/(Sqr((Abs(XMouse - X("Active"))*Abs(XMouse - X("Active")))+(Abs(YMouse - Y("Active"))*Abs(YMouse - Y("Active"))))+0.0)))

Se o ponteiro do Mouse estiver à esquerda e abaixo do Hotspot do Active Object (terceiro quadrante), aplicamos a fórmula do terceiro quadrante.

5.4 - Evento do quarto quadrante:
XMouse > XActive
YMouse > YActive
(Active) Set angle to 360-(ASin((Abs(YMouse - Y("Active")))/(Sqr((Abs(XMouse - X("Active"))*Abs(XMouse - X("Active")))+(Abs(YMouse - Y("Active"))*Abs(YMouse - Y("Active"))))+0.0)))

Se o ponteiro do Mouse estiver à direita e abaixo do Hotspot do Active Object (quarto quadrante), aplicamos a fórmula do quarto quadrante.

6 - Finalizando:
Bem, a matéria ficou bem grande. Acho que eu mesmo não leria toda hehe. Mas, por outro lado, acho que também ficaram poucas brechas pra dúvidas. Tentei explicar tudo o máximo possível, justamente pra ninguém ter o incômodo de ter de esperar eu responder e tudo mais (mas se você teve alguma, não hesite em perguntar). Além disso, acho que os tópicos aqui abordados são bastante importantes, e é sempre bom dar uma lembrada. Até porque por mais que a gente puxe a orelha, sempre há quem teime achando que é besteira. Então, quanto mais pisar na tecla, melhor.

Link do exemplo para estudo: aqui.

É isso pessoal, até a próxima e tudo de bom pra vocês!
Abraço.

oh matériazinha longa em? rsrsrs
muito útil, obrigado

é muito mais fácil usar a função ATan2. ela é usada assim:
ATan2([Y do active]-YMouse,XMouse-[X do active])

Confesso que não conheço a função ATan2. Contudo, apesar de a matéria ter ficado longa, os eventos são realmente curtos. Acho que no final daria quase a mesma coisa.

Talvez com ATan2, ficasse algumas linhas de códigos mais simples. Mas prefiro trabalhar um pouco mais e saber exatamente o que estou fazendo do que usar ATan2 sem entender o que aquilo significa. Por favor, NÃO estou dizendo que é o seu caso. Tô dizendo que eu, particularmente, não entendo como a coisa funciona com ATan2. Se fosse ATan entendia (e também era uma opção, particularmente optei por arco-seno, mas essa foi minha preferência, cabia a você escolher se ia usar arco-seno, arco-cosseno ou arco-tangente, seja lá qual você preferisse), mas não sei a diferença entre ATan e ATan2.

eu também não conhecia, conheci ela há poucos dias num tutorial de 360 sem extensões.
tem esse artigo na wikipédia(em inglês) que explica o que é ATan2: http://en.wikipedia.org/wiki/Atan2 , e nele está escrito que é uma função de arco-tangente com 2 argumentos.

Materia bem didatica, muito boa, parabéns, pena que o pessoal não quer entender os conceitos e lógica da programação, so querem um jeito rapido e fácil de se conseguir as "engines" rsrs.

Opa, valeu leo! Sua opinião é uma das que valorizo bastante.

Esse realmente era o objetivo da matéria, ser bem "didática". Na verdade, eu bem sei que muita pouca gente se interessa por essa parte mais técnica, mas, de qualquer forma, preferi colocar. Quem se interessar, taí. Melhor pecar por excesso do que por falta, né?

Eskyz, eu posso resumir sua matéria?

Para olhar pro Mouse é só usar:

ATan2(Y1 - Y2,  X2 - X1 )

Sendo Y2 e X2 o Mouse, e X1 e Y1 o objeto (ou vice-versa, tem que testar kkkkkk).

-------

PORÉÉÉÉM, é uma aula SENSACIONAL de Matemática! Gostei demais da sua matéria! Muito mesmo! Vou estudar muito ela! Parabéns!

----------------

EDIT: Esquece, o Ricardo já tinha postado a expressão antes kkkkkk Eu só fui ler as respostas agora...

Tô me sentindo uma anta agora. Só eu não sei usar ATan2? kkkkkkkkk

Aliás, eu sei que tem um jeito bem fácil usando Advanced Math Object, com uma linha também. Só que não lembrava como era, daí acabei tendo que fazer na marra. Como depois que terminei os eventos ficaram muito parecidos com o de uma engine antiga do Alves, pensei: "ah, deve ser isso mesmo".

Porém, volto a afirmar que, apesar da matéria enorme, são só 4 eventos - e muito parecidos, pra fazer os outros 3 bastaria copiar o primeiro e ajustar os detalhes. É que eu queria mesmo que fosse algo bem didático.

Então, usando o A-Math ou A-Direction, você fica limitado à 360 direções. E o A-Math não tá funcionando com o Fusion 2.5 (pelo menos aqui acho que não funciona mais). Sem falar que ela já foi descontinuada. E também, tem extensões e expressões que substituem e simplificam mais ainda as coisas que o A-Math fazia.

No Fusion 2.5, tem uma linha de comando que cria o angulo entre o objeto selecionado e um ponto X e Y. Mas, fica limitado aos 360. O mesmo com a distância, fica limitada aos números inteiros, atrapalhando em certos cálculos.

Calma aí... não se limitar ao 360 seria oq? Ter maior precisão nos ângulos? Tipo, em minutos e horas?

Todos os raios estão olhando para o mouse! Mas veja a diferença na posição.

Raio vermelho: Usando ATan2, dando o angulo perfeito (veja os valores "quebrados" em baixo).

Raio verde: Usando o padrão 360, veja o valor em baixo.

Raio azul: Usando o padrão 360, mas a 14px a baixo do canhão superior, mostrando a diferença nos gráficos do canhão.

Notou a gritante diferença entre o raio vermelho e verde? Em distâncias curtas, quase não se nota. Mas perceba que conforme vai distanciando, vai ficando bem diferente. Agora, vou mostrar a diferença em 1200px de distância:



Raio vermelho: Cálculo perfeito.

Raio verde: Cálculo impreciso.

OBS: O ponto preto eu coloquei na edição depois, pra se ter uma noção melhor de onde estava o Mouse.

-------------

EDIT: Aqui está o funcionamento -> Baixar Exemplo

Me desculpem pelo peso enorme do arquivo. É que o Fusion faz um simples exemplo ficar com mais de 1mb. O mfa ficou com 56kb, mas o exe ficou com 1,5mb. E não, não tinha como eu colocar o mfa pra vocês, já que eu uso o CF2.5 e ele é incompatível com o MMF2.

Sim, era mais ou menos isso mesmo, sobre a precisão dos valores dos ângulos. Na verdade, confesso que não tinha pensado nisso. É uma limitação bem chata mesmo. Pra grandes distâncias, o valorzinho quebrado "faz a diferença".

Mas nunca consegui burlar os cálculos arredondados do MMF2. Ele permite essa precisão? Ou só no fusion 2.5?

No MMF2 também. Eu já fazia isso antes de ter o CF2.5.

Uhum, vou rever o método aqui, então... não tinha reparado nisso. E a diferença é grande mesmo. Valeu!