Advertisement
  1. Code
  2. Games

Consejo rápido: Trigonometría para desarrolladores de juegos Flash

Scroll to top
Read Time: 11 min
This post is part of a series called You Do The Math.
Quick Tip: Get a Random Number Within a Specified Range Using AS3
Simulate Projectile Motion with ActionScript 3.0

Spanish (Español) translation by Esther (you can also view the original English article)

En Despliegue de un tanque en una zona de guerra isométrica, aprendiste cómo hacer que un objeto rote para enfrentar el puntero y se mueva hacia una ubicación al hacer clic. En este consejo rápido, echaremos un vistazo general a las matemáticas que hay detrás: la trigonometría.


Avance del resultado final

Este es el resultado final de mi tutorial anterior. Hace uso de los principios de trigonometría que cubriremos en este Consejo Rápido:

Mueve el ratón para que la torreta apunte, y haz clic en cualquier lugar para que el tanque se dirija a ese punto.

Cualquier programador, especialmente cualquier programador de juegos, se enfrenta a la necesidad de mover objetos en la pantalla tarde o temprano. Es una tarea sencilla si necesitas mover un objeto en una dirección, por ejemplo a lo largo del eje x o y. Pero supongamos que quieres hacer que un objeto siga el puntero del ratón allá donde lo muevas, o crear un juego de carreras en el que controles la aceleración de un coche pulsando la tecla de flecha arriba y utilices las flechas izquierda y derecha para dirigirlo.

Digamos que pulsas la tecla de flecha derecha una vez y añade 10 grados a la propiedad de rotación de tu coche, pero todavía quieres que el coche se mueva hacia delante (es decir, que acelere) cuando pulses una tecla de flecha hacia arriba, incluso si el coche está girado hacia el fondo de la pantalla o hacia un lado izquierdo o derecho, etc. y no quieres que parezca que se está deslizando hacia los lados. Entonces, ¿cómo lo harías? ¡Ahí es donde ayuda un poco de trigonometría!

Para los que se les dan bien las matemáticas no será un problema, pero hay mucha gente que no las entiende en absoluto, o incluso les dan miedo. Intentaré explicarlo lo más claramente posible en este consejo rápido.

Paso 1: El sistema de coordenadas de Flash

Para empezar, recordemos el sistema de coordenadas cartesianas. ¿Te parece complicado? Si es así, mira la imagen de abajo y seguro que te resultará familiar:

Tiene ejes X e Y; puedes ver claramente dónde X e Y son positivos y negativos. Cuando se trata de coordenadas en Flash, la situación es ligeramente diferente. Flash también tiene su sistema de coordenadas pero se parece al sistema cartesiano al revés:

También tiene los ejes X e Y y el punto de origen, con la única diferencia de que el eje Y es positivo por debajo del eje X.

Cualquier símbolo creado en Flash tiene su propio sistema de coordenadas incorporado. Si crea un nuevo símbolo, ya sea un clip de película o un botón, es posible que vea una propiedad "punto de registro" en el cuadro de diálogo de creación de símbolos. ¿Qué es? El punto de registro es el punto de origen de un símbolo. Es el punto alrededor del cual girará el objeto si modificas su propiedad de rotación.

Nota: el punto de origen de la instancia del escenario está en su esquina superior izquierda. Esto significa que todos los puntos del escenario tienen coordenadas X e Y positivas.

En este consejo rápido veremos las tres funciones trigonométricas más utilizadas en Flash: Seno, Coseno y Atan2. Algunas personas se preguntarán, ¿cómo podemos utilizar estas funciones en Flash? Veamos algunos ejemplos prácticos y entendamos por qué los necesitamos y cómo pueden facilitarnos la vida.

Paso 2: Calcular el ángulo

Vamos a calcular el ángulo entre dos puntos. Crea un nuevo archivo Flash (ActionScript 3.0). Selecciona el primer fotograma de la línea de tiempo y pulsa F9 para abrir un Panel de Acciones.

En este punto vamos a hacer algo sencillo. Simplemente escribe esto en el Panel de Acciones:

Esto nos dará la posición del puntero del ratón cada vez que hagamos clic en el escenario. No es precisamente fascinante, ¿verdad?

Bien, ahora supongamos que quieres "decirle" a algún objeto las coordenadas del puntero de tu ratón relativas a este objeto, y luego mostrarle la dirección que debe recorrer para alcanzar la posición del puntero.

Cierra el Panel de Acciones y ve a Insertar > Nuevo Símbolo o simplemente pulsa Ctrl + F8.

Dale un nombre cualquiera (o deja un nombre por defecto) y pulsa OK. La pequeña cruz en el centro de la pantalla es el punto de registro del símbolo o su punto de origen. Estas serán las posiciones X e Y del objeto. Ahora coge la herramienta Oval (tecla O) y dibuja un círculo (con la tecla Shift pulsada) en cualquier lugar de la pantalla.

Haz clic en el círculo para seleccionarlo y ve a su panel de Propiedades > Posición y tamaño. Para W (ancho) escribe 20, lo mismo para H (altura) y para la posición X e Y escribe (-10). Esto hará que el círculo sea de 20x20 px y lo centrará exactamente en el punto de registro. Ahora sal del modo de edición de símbolos (haz clic en la Escena 1 de arriba), coge este símbolo en tu biblioteca y simplemente arrástralo al escenario (a cualquier lugar, ya obtendremos su posición dinámicamente más tarde). Una vez que tu objeto esté en el escenario, dale un nombre de instancia como mCircle.

Ahora queremos calcular la dirección desde la posición Y y X de nuestro círculo hasta la posición Y y X del puntero del ratón. La línea roja en la imagen de abajo es la dirección que necesitamos saber. Se puede encontrar utilizando la función estándar Math.atan2().

Hagámoslo ahora. Elimina las declaraciones "trace" del código y crea una nueva variable en su lugar. Luego rastrea esta variable para ver lo que obtienes:

Ten en cuenta que e.stageY - mCircle.y es la distancia vertical del ratón al círculo, y e.stageX - mCircle.x es la distancia horizontal.

En el panel de salida obtendrás este tipo de números:

Son los ángulos relativos (entre la línea del eje X y la línea roja) en radianes. ¿Por qué no en grados? Bueno, Flash utiliza los radianes para calcular el seno y el coseno, pero si quieres saber cuáles son estos ángulos en grados siempre puedes multiplicar "miAtan2" por 180 y dividirlo por Math.PI. Así:

Editor: Como recurso adicional, aquí hay un gran conjunto de funciones para la conversión de grados/radianes. Está almacenado como un fragmento en snipplr.com, ¡el último miembro de la red de Envato!

Paso 3: Entender el seno y el coseno

Como sabemos el ángulo entre dos puntos, ahora podemos calcular cuántos píxeles tenemos que añadir a las propiedades X e Y del círculo en cada fotograma hasta que llegue al punto de clic. Vamos a examinar lo que necesitamos saber aquí:

La línea azul es el coseno del ángulo, y la naranja es el seno del ángulo. En otras palabras,

  • Sine(angle) == e.stageY - mCircle.y
  • Cosine(angle) == e.stageX - mCircle.x

En lugar de explicar cómo funcionan el seno y el coseno, voy a demostrar cómo utilizarlos con algunos ejemplos prácticos. En pocas palabras, el seno y el coseno son las relaciones entre Y y X en nuestro ángulo.

Imagina que el ángulo entre dos objetos es de 45 grados. En este caso la relación entre el seno y el coseno es de 1:1 (ver la imagen de abajo), lo que significa que tenemos que aumentar las propiedades X e Y de nuestro círculo en la misma cantidad en cada fotograma para llegar al destino. Por ejemplo, hay que añadir 5 píxeles a X y 5 píxeles a Y en cada fotograma.

En este diagrama, el ángulo ha cambiado y la relación entre el seno y el coseno también ha cambiado. Ahora es de 1:2.

En este caso debemos añadir el doble de píxeles a la propiedad X de nuestro círculo que a la Y. Por ejemplo, X += 10, Y += 5;

Paso 4: Ejemplos prácticos

Probablemente te preguntarás por qué necesitamos el seno y el coseno si ya conocemos las coordenadas del punto de clic, podemos simplemente mover nuestro mCircle a ellas de inmediato... Bueno, podrías haberlo hecho así si quisieras que tu círculo (o cualquier otro objeto) se "teletransporte" a las coordenadas de un punto de clic en cuanto se produzca el clic. ¿Pero qué pasa si quieres que se mueva gradualmente en la dirección del clic? Para ello tienes que añadir una cantidad determinada de píxeles a sus propiedades X e Y, por ejemplo, cada fotograma o cada segundo.

Calculemos ahora cuántos píxeles debemos añadir a sus propiedades X e Y basándonos en el seno y el coseno del ángulo entre nuestro objeto y un punto de clic. Recuerda que Flash conoce el ángulo entre ellos a partir de esta operación:

Para ello debemos actualizar un poco nuestro código.

Fíjate en lo que he hecho aquí: He promovido todas mis variables fuera de cualquier función, porque ahora tengo más de una función y quiero que estas variables sean accesibles desde todas las funciones.

El escenario tiene un oyente de eventos para los clics del ratón, por lo que cuando se produce el clic, se llama al método calculateAngle() y se instancian las siguientes variables:

Esta función también agrega un escuchador de eventos para entrar en el escenario, que llama al método moveTheCircle() en cada cuadro.

Paso 5: Calcular los píxeles

Ahora, vamos a desglosar nuestro método moveTheCircle() en sí. Por ahora solo hace dos cosas:

Como puedes ver, la primera línea calcula cuántos píxeles debe añadir a la propiedad X y la segunda se ocupa de la Y. Déjame explicarte. Math.cos encuentra el coseno (propiedad x) del ángulo "myAtan2", Math.sin hace lo mismo con su seno (propiedad y). Si nuestro ángulo myAtan2 equivale aproximadamente a 0,785 radianes (45 grados) el coseno y el seno serán ambos iguales a aproximadamente 0,707... Puedes utilizar una calculadora para comprobarlo.

Un simple cálculo mostrará cuántos píxeles añadirá el código anterior a las propiedades X e Y de nuestro objeto si el ángulo es de 45 grados.

Si el ángulo, por ejemplo, es 60 grados entonces los resultados serían así:

Paso 6: Solucionar un problema con el código

Bueno, ya casi hemos terminado. Pero todavía hay un pequeño problema con nuestro código. Habrás notado que nuestro objeto nunca se detiene, aunque llegue al punto de clic sigue moviéndose. Podemos solucionar este problema muy fácilmente. A medida que nuestro objeto se mueve hacia el punto de clic, la distancia entre ellos se acorta, por lo que el valor absoluto de la distancia también disminuye. Podemos hacer un seguimiento de esta manera:

(Math.abs() convierte los números negativos en positivos simplemente multiplicándolos por -1. No hace nada con los números que ya son positivos).

No es necesario que añadas esta declaración de rastreo a tu código, la he puesto aquí solo para mostrarte la forma en que puedes ver el valor absoluto. En este caso ambos valores absolutos son menores que 3 cuando el objeto alcanza el punto de clic. Así que lo que necesitamos ahora es añadir una sentencia if dentro de nuestra función moveTheCircle().

Cuando el valor absoluto es inferior a 3, se elimina la escucha del cuadro de entrada. Debemos comprobar los valores absolutos de X e Y porque uno de ellos puede llegar a 3 aunque el segundo no lo haya hecho. Esto significa que los objetos podrían detenerse así:

La imagen de arriba muestra la versión en la que solo se comprueba el valor absoluto de X. El valor absoluto de la distancia X ya es inferior a 3, por lo que deja de prestar atención al valor Y.


Conclusión

Bueno, eso es todo. Espero que este consejo rápido te ayude a entender algo de trigonometría utilizada en el desarrollo de Flash :)

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.